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'))

});

​