Node環境配置及Gulp工具


1.GitLab網上使用

  • 兩種登錄方式

    • 通過Http登錄,需要用戶名和密碼

    • 通過SSH登錄,不需要用戶名和密碼只需要RSA密鑰就行,RSA通過在git bash中輸入 ssh-keygen -t rsa生成,生成好的密鑰通過生成的路徑找到對應的id_rsa.pub文件,將其內容添加到gitlab中並保存ssh密鑰,以后的push 或者pull操作都不會需要用戶名和 密碼。

  • 克隆倉庫

    • git clone 你的地址(這里可以通過https地址或者通過SSH方式獲取你的網上倉庫)

  • 獲取倉庫內容

    • git pull 地址/origin master 可以通過https地址獲取倉庫數據,但是這樣做太麻煩了,使用origin相當於替換了之前的地址用法都是一樣的。

      • 其實這樣使用包含了兩個操作

      • git fetch origin (獲取遠端的分支)

      • git merge origin/master (合並遠端分支)

  • 遠端分支管理

    • 創建遠端分支

      • 1.在本地創建好分支以后,本地 push 該分支即可

      • 2.在網頁上創建分支好以后,通過git fetch獲取該分支

    • 刪除遠端分支

    • git push origin --delete 需要刪除的分支,那么其他人如果需要更新分支 需要 git fetch -p

  • git 補充知識

    • 保存當前的工作現場

      • 使用git stash保存當前的工作現場,那么就可以切換到其他分支進行工作,或者在當前分支上完成其他緊急的工作,比如修訂一個bug測試提交。

        • 1 在通過git add 提交完代碼到緩存區以后 輸入git stash 保存現場,完成以后通過創建其他分支或者跳轉其他分支解決對應的工作

        • 2 解決完對應的工作后跳轉到之前的工作分支中在通過 git stash pop 還原現場

    • 查看隱藏分支 git branch -a

2.Node

  • 什么是Node

    • Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境

  • 官網

  • Node.js(難道是類似於jQuery的js文件)

  • chrome瀏覽器的JS引擎(V8引擎)

  • javascript組成

    • ECMAScript 基本語法

    • DOM

    • BOM

  • node 只解析ES,像aler()之類的就不能使用了

    • 加上谷歌V8對js的解析速度大大提高

    • 提供了一些系統級API,比如對文件的操作

    • 其實就是一個js運行環境

  • 安裝Node

    • 不要安裝在中文路徑

    • nvm Node Version Manager(版本管理)

    • nrm Node Registry Manager(路徑管理)

    • npm Node Package Manager (依賴包管理)www.npmjs.com npm下載地址

  • 常用nvm命令

    • nvm ls 查看node下載的版本

    • nvm install 4.6.0 下載名為4.6.0的版本

    • nvm use 4.6.0 切換4.6.0版本

  • 常用nrm 命令

    • nrm ls查看不同的下載源地址

    • nrm use cnpm 切換到cnpm下載源

  • 常用的npm命令

    • npm init 初始化一個 package.json 文件,如果加上-y就不需要在敲回車了

    • npm install -g bower 全局安裝bower

    • npm install jquery --save-dev 本地安裝jquery並記錄到package.json中

    • npm uninstall 包名 刪除包 如果是全局安裝就加上-g

3.Bower

  • 什么是bower

    • bower是一個前端的管理工具,主要用來管理前端的包例如:Jquery、BootStrap、Angular等。

    • 有人會有疑問為什么npm也是管理工具我還要學習bower管理工具?

      • 原因很簡單,因為就像有迅雷下載你為什么還要用QQ旋風、電驢、快車下載,其實原因都一樣因為npm在某些時候不能滿足用戶需求那么市場上就會出現替代產品。

    • bower網站

    • 如何使用bower進行管理

      • 安裝Bower:npm install -g bower

      • 創建包bower.json:bower init

      • 安裝各種包文件:bower install < package>,如下載jquery: bower install jquery ,bower install jquery#1.8.0 選擇下載1.8.0版本

      • 卸載包文件:bower uninstall < package>

      • 包搜索:bower search <package>

      • 包版本:bower info <package>

      • 修改Bower安裝位置:在項目根目錄下創建.bowerrc然后添加以下內容`{

             "directory": "vendor"//這里是指定包安裝路徑,加完以后記得刪除這條注釋

        }`

4.Gulp

  • 什么是gulp

    • 用自動化構建工具增強你的工作流程!

  • 什么又是自動化構建

    • 當一個項目足夠大的時候,我們會采按功能划分給不同的人員開發,進一步各個功能又會划分成不同的模塊進行開發,這就會造成一個完整的項目實際上是由許許多多多的“代碼版段”組成的;我們開發中又會用到less、sass等一些預處理程序,需要將這些預處理程序進行解析;為了減少請求需要將css、javascript進行合並;為了加速請求需要對html、css、javascript、images進行壓縮;這一系列的任務完全靠手功完成幾乎是不可能的,需要借助構建工具才可以實現。所謂構建工具是指通過簡單配置就可以幫我們實現合並、壓縮、校驗、預處理等一系列任務的軟件工具。

  • 不同的構建工具

    • 常見的構建工具包括:Grunt、Gulp、F.I.S(百度出品)

  • gulp的優點

    • 易於使用通過代碼優於配置的策略,Gulp 讓簡單的任務簡單,復雜的任務可管理。

    • 構建快速利用 Node.js 流的威力,你可以快速構建項目並減少頻繁的 IO 操作。

    • 插件高質Gulp 嚴格的插件指南確保插件如你期望的那樣簡潔高質得工作。

    • 易於學習通過最少的 API,掌握 Gulp 毫不費力,構建工作盡在掌握:如同一系列流管道。

  • 入門指南

      1. 全局安裝 gulp:$ npm install --global gulp-cli

      1. 作為項目的開發依賴(devDependencies)安裝:$ npm install --save-dev gulp

      1. 在項目根目錄下創建一個名為 gulpfile.js 的文件: ` var gulp = require('gulp'); gulp.task('default', function() { // 將你的默認的任務代碼放在這}); `

      1. 運行 gulp: $ gulp

  • gulp示例代碼· gulp.task('image', function () {return gulp.src('./images/*', {base: './'})

    .pipe(imagemin())
    .pipe(gulp.dest('./dist'));

    }); ·

  • gulp插件庫:

    [官網地址](http://gulpjs.com/plugins/)
    [npm也能找到gulp插件](https://www.npmjs.com/)
  • 常用插件gulp-autoprefixer(css加前綴)https://www.npmjs.com/package/autoprefixer`//通過require引用gulpvar gulp = require('gulp');var autuprefixer=require('gulp-autoprefixer');//添加css前綴gulp.task('cssautuprefixer',function () { //通過src獲取到需要的css文件 //*表示全部匹配 //pipe管道 起到一個承前啟后的作用 //dest輸出結果 gulp.src('./css/*.css')

      .pipe(autuprefixer())
      .pipe(gulp.dest('./dist/css'));

    });`

gulp-uglify(最小化 js 文件)https://www.npmjs.com/package/gulp-uglify `//最小化jsgulp.task('uglify',function () { gulp.src('./js/*.js', {base: './'})

   .pipe(uglify())
   .pipe(gulp.dest('./dist'))

});`gulp-htmlmin(壓縮html文件)https://www.npmjs.com/package/gulp-minify-html`//壓縮html頁面gulp.task('htmlmin',function () {

gulp.src('./*.html', {base: './'})
.pipe(htmlmin({
    collapseWhitespace: true,
    removeComments:true,
    minifyJS:true,
}))
.pipe(gulp.dest('./dist'));

});`gulp-imagemin(最小化圖像)https://www.npmjs.com/package/gulp-imagemin`//壓縮圖片gulp.task('imagemin',function () {

gulp.src(['./images/*.jpg','./images/*.png'], {base: './'})
    .pipe(imagemin())
    .pipe(gulp.dest('./dist'))

});


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM