gulp

gulp 是一款 nodejs 應(yīng)用，用于前端開發(fā)過程中對代碼進行構(gòu)建，是自動化項目的構(gòu)建利器。她不僅能對網(wǎng)站資源進行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)，比如打包、壓縮、合并、git、遠(yuǎn)程操作等，能夠通過編寫好配置文件后，配合使用合適的插件自動完成，提高我們的工作效率。

gulp 簡單易用，基于數(shù)據(jù)流的處理方式，就像制造車間的一臺進口車床（gulp），配合一系列高質(zhì)量的刀具（gulp插件），來流水線般完成多道工序，最后再輸出成品（文件）。

中間過程都是半成品（數(shù)據(jù)流）的形式，可以任意的定制不同工序（使用不同的插件）， 一個車間里，也可以布置多個車床（創(chuàng)建多個task任務(wù)），用于生產(chǎn)不同產(chǎn)品（比如 圖片壓縮、CSS壓縮合并、JS壓縮合并等）。

在你正式使用 gulp 之前，首先你要安裝 node.js 環(huán)境，自會贈送你 npm 包管理工具，然后 在命令行里：

# 安裝 gulp-cli 命令行工具
npm install gulp-cli -g
# 安裝本地依賴
npm install gulp -D
# 創(chuàng)建 gulpfile.js 文件
touch gulpfile.js
# 可以選擇查看幫助
gulp --help

下面一起來看一個例子，使用 gulp 對圖片、CSS 和 JS 進行處理：

(github 源碼地址)

首先，創(chuàng)建一個 package.json 文件，把你認(rèn)為需要用到的模塊，通過 npm 安裝到 node_modules 文件夾里，可以使用：

npm install -save-dev xxx xxx xxx

如此安裝的同時，就寫入到 package.json 的開發(fā)依賴字段中了，下次別人 clone 你的文件，擁有了你寫的 package.json，就可以通過 npm install 快速在本地安裝指定的依賴模塊了。

因為通常我們是不會把 node_modules 文件夾也 push 到 github 上的，會在 .gitignore 文件中忽略它，這些模塊存在于在 npm 的服務(wù)器中，（當(dāng)然也存在淘寶鏡像等第三方資源，為了提升我們的 install 速度）我們使用的時候，只需要依照 package.json 說的，安裝指定版本即可。

假設(shè)你已經(jīng)安裝了需要用到的模塊，下面我們就可以開始編寫 gulpfile.js 文件了：

var gulp = require('gulp')

//引入組件
var concat = require('gulp-concat'), //合并文件 
  cssnano = require('gulp-cssnano'), //CSS壓縮
  autoprefixer = require('gulp-autoprefixer'), //后編譯，自動添加css兼容前綴
  jshint = require('gulp-jshint'), //js代碼規(guī)范性檢查
  uglify = require('gulp-uglify'), //js壓縮
  imagemin = require('gulp-imagemin') //圖片壓縮

首先你要做的是引入 gulp 模塊，接著引入 gulp 插件，這是CommonJs 的語法規(guī)范，因為 gulpfile.js 最終是運行在 node 環(huán)境下的。

gulp 有四個方法，gulp.src 、gulp.dest 、 gulp.task 、 gulp.watch，是不是超級簡潔？沒錯，簡單即是強大，你需要用干什么，就去下載使用相應(yīng)的插件即可。

引入組件之后：

我們就開始通過 gulp.task 創(chuàng)建任務(wù)并制定任務(wù)名稱，然后通過 gulp.src 指定輸入路徑，接著使用 .pipe （相當(dāng)于管道，電路）串聯(lián)不同的工具，以數(shù)據(jù)流（想象水流、電流，經(jīng)過不同的閥門，閘口，電子元器件）的形式接力處理，最后傳給 gulp.dest 輸出到指定目錄， 完成了我們的目的。

盡管如此，下面的用法初次遇見，可能還是會比較迷糊，但是理解了 gulp 的處理方式后， 阻礙你的只是某個插件的具體用法而已，至于具體怎么用， 那就千篇一律的同時不盡相同了，你只需要到 npm 去搜索相應(yīng)的插件，仔細(xì)閱讀 usage 即可，別人說怎么用你就怎么用，人家說了算，不要糾結(jié)。

對于 CSS ，我們可以：

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

  return gulp.src('src/css/*.css')  //讀取待src/css 目錄下所有的css文件
    .pipe(concat('merge.min.css')) //合并CSS，同時重命名為merge.min.css
    .pipe(cssnano()) //壓縮 CSS
    .pipe(autoprefixer({  //自動給CSS 加前綴，用于兼容不同瀏覽器，不同版本
      browsers: ['last 10 versions'],  //具體參數(shù)含義，你應(yīng)該去npm看文檔
      cascade: false
    }))
    .pipe(gulp.dest('dist/css'))  //最后輸出到 dist/css 目錄下
})

對于JS，我們可以：

gulp.task('js', function(){
  return gulp.src('src/js/*.js') //讀取待src/js 目錄下所有的 JS 文件
    //.pipe(jshint())  這些都是可以按需使用，進行串聯(lián)的
    //.pipe(jshint.reporter('default')) //檢查如果出錯，則在命令行以默認(rèn)樣式輸出報告

    .pipe(concat('merge.min.js'))   //合并JS并重命名
    .pipe(uglify())  //壓縮JS
    .pipe(gulp.dest('dist/js/'))  //輸出到 dist/js 目錄下（如果沒有這個目錄，會自動創(chuàng)建）
})

對于圖片，我們可以：

gulp.task('img', function(){
  return gulp.src('src/imgs/*')  //進入
    .pipe(imagemin()) //壓縮圖片
    .pipe(gulp.dest('dist/imgs')) //輸出
})

除了對 CSS、JS 和 圖片處理以外，你還可以對 html 進行處理，還可以對版本號 的問題進行處理， 還可以啟動一個實時刷新的靜態(tài)服務(wù)器，然后通過 gulp.watch 監(jiān)聽指定目錄、指定文件的變化，從而控制瀏覽器自動刷新， 為調(diào)試帶來極大的便利性，尤其 CSS 這個大坑。

以上這些都是寫在 gulpfile.js 文件中的，然后在命令行這樣即可開動 gulp：

  gulp

如下圖所示：

在當(dāng)前項目目錄下執(zhí)行 gulp 時，gulp 會在當(dāng)前目錄下尋找 gulpfile.js 文件，然后執(zhí)行里面所有的 task，這是gulp 默認(rèn)行為。

另外，可以傳入第二個可選參數(shù)，來指定依賴關(guān)系，這樣當(dāng) gulp build 時，會先執(zhí)行 css js img 三個任務(wù)，之后才執(zhí)行build任務(wù)，但由于沒有第三個參數(shù)，也就是沒有回調(diào)函數(shù)，因此就結(jié)束了， 但我們實現(xiàn)了通過 gulp build 來個性化的執(zhí)行我們指定的任務(wù)，而不是 gulp 一股腦的全部執(zhí)行，當(dāng)然你也可以直接 gulp css，指定執(zhí)行 css ：

gulp.task('build', [ 'css', 'js', 'img']) // 或者把 build 改為 default

你也可以修改 gulp 的默認(rèn)行為，將上面的 build 換為 default，當(dāng)執(zhí)行gulp 時，實際上就干了上面 gulp build 干的事情。

總之，單獨執(zhí)行 gulp ，會先查找文件里 有沒有叫做 default 的任務(wù)名，他會默認(rèn)執(zhí)行default：

• 有，則按你 default 中要求的來(也可以gulp default 執(zhí)行)
• 如果沒有 default 的話，會報錯：

[21:53:15] Task 'default' is not in your gulpfile
[21:53:15] Please check the documentation for proper gulpfile formatting

而 gulp xxx：gulp + 任務(wù)名 的形式，則執(zhí)行指定任務(wù)。

最后，為什么直接 gulp 或者 gulp xxx 就可以工作了呢？

還記得最開始全局安裝的gulp-cli嗎？

# 安裝 gulp-cli 命令行工具
npm install gulp-cli -g

其實由于我們在本地安裝了gulp：

npm install gulp -D

即使不用安裝 gulp-cli 工具，我們也能執(zhí)行，只是很麻煩，
命令行里輸入路徑，找到 gulp 或者 gulp.cmd，自會執(zhí)行：

bash終端

但這樣有些反人類，還是走尋常路吧，畢竟 直接 gulp 來得更快。

結(jié)束語

以上就是對 gulp 的簡單使用指南，更多的請訪問官網(wǎng)查看文檔。

另外在學(xué)這些工具的時候千萬不要忘了我們的終極目的是什么：
是為了得到處理好的最終文件，因此現(xiàn)在的包括 gulp 等打包壓縮處理的工具在內(nèi)， 都是中間過程。