（1）什麼是GULP

  GULP是一個工具包，幫助我們解決開發過程中遇到的一些痛苦或者耗費時間長的任務，避免出現低階的錯誤，實際上就是幫程式設計師做一些低階的，重複性的工作。

特點：易於使用和學習，構建快速，外掛高質

（2）GULP環境的配置（基於node.js）

1.安裝node.js在官網上下載安裝即可)

安裝完後開啟命令列輸入 node -v 進行檢視你安裝node.js的版本

2.全域性安裝gulp-cli

命令列輸入後回車進行安裝 npm install gulp-cli -g

3.建立package.json

在自己的工作目錄下命令列執行 npm init 一路回車就可以了

4.區域性安裝gulp

命令列輸入後回車進行安裝 npm install gulp --save-dev

5.建立gulpfile.js(gulp執行時依賴的js檔案)

var gulp = require('gulp');

gulp.task('default', function(){

// place code for your default task here

});

6.命令列執行gulp命令

（3）GULP基本使用

在gulpfile.js中進行使用：

// 第一個引數是任務的名稱

// 第二個引數是任務所依賴的其它任務（可省略）

// 第三個引數是執行任務要執行的程式碼（也就是回撥函式）（當傳遞第二個引數後可以省略）

gulp.task('my-task',function(){

// 取到指定的檔案 .pipe將檔案以流的形式進行輸入 gulp.dest( './dist' ) 將檔案拷貝到dist目錄下

// 檔案路徑/*.html 是將資料夾下所有的html檔案拷貝到指定的目錄下

// 資料夾下存在資料夾的形式 採用 檔案路徑/**/*.*

guld.src('檔案路徑').pipe( gulp.dest( './dist' ) )

})
 

接下來我們可以在工作目錄的資料夾的命令列中輸入 gulp my-task(可能會報錯 命令列輸入npm install gulp回車後安裝完在執行gulp my-task)

// 監聽檔案的改變

gulp.watch()

當檔案發生變化使執行一些任務：

gulp-task ( 'watch', function(){

gulp.watch( './src/index.html', ['copy-index'] );

} )

（4）GULP的外掛安裝與使用（首先命令列安裝外掛 例如： npm install gulp-concat 在gulpfile.js中接收外掛即var content = require('gulp-concat');）

1.連線JS （gulp-concat）

gulp.task( 'content', function(){

    gulp.src( './src/script/**/*.js' ).pipe( content( 'output.js' ) ).pipe( gulp.dest( './dist/js' ) )

} )

2.壓縮JS（gulp-uglify）

gulp.task( 'content', function(){
    gulp.src( './src/script/**/*.js' ).pipe( content( 'output.js' ) ).pipe( uglify()         ).pipe( gulp.dest( './dist/js' ) )
} )

3.編譯sass （gulp-sass）

npm install gulp-sass

var sass = require('gulp-sass');

gulp.task( 'sass', function(){

gulp.src( './src/style/**/*.scss ).pipe( sass() ).pipe( minify() ).pipe( gulp.dest( './dist/js' ) )

} )

4.最小化css（gulp-minify-css）

npm install gulp-minify-css

var minify = require('gulp-sass');

5.檔案重新命名（gulp-rename）:生成兩個版本的js一個是壓縮版的一個是完整版的

npm install gulp-rename

var rename = require('gulp-rename');

gulp.task( 'content', function(){

gulp.src( './src/script/**/*.js' ).pipe( content( 'output.js' ) ).pipe( gulp.dest( './dist/js' ).pipe( uglify() ).pipe( rename( 'output1.js' ) ).pipe( gulp.dest( './dist/js' ) )

} )

6.熱更新（gulp-connect）:當修改完某個檔案後進行儲存後重新整理相關的頁面connect.reload（）

npm install gulp-connect；

var connect = require('gulp-connect');

gulp.task( 'server', function(){

connect.serve({

root: './dist', // 根目錄

livereload: true // 支援自動重新整理

})

} )

7.錯誤處理（gulp-plumber）當時用監聽的時候，儲存檔案出錯會導致整個監聽事件崩潰需要重新啟動因此需要這個外掛

npm install gulp-plumber；

var plumber= require('gulp-plumber');

gulp.task( 'sass', function(){

gulp.src( './src/style/**/*.scss ).pipe( plumber() ).pipe( sass() ).pipe( minify() ).pipe( gulp.dest( './dist/js' ) )

} )