node入門（二）——gulpfile.js初探

　　本文關於gulpfile.js怎么寫，利於完成個性化需求。本文開發環境默認已安裝node，詳情參考《node入門（一）——安裝》。

　　一、安裝gulp

npm install -g gulp

　　二、進入項目根目錄，創建package.json文件

npm init

　　現在項目目錄下新增了package.json文件，內容如下：

　　三、在package.json里增加devDependencies配置項，告訴node在install時要下載哪些插件模塊，例如下面是要加載gulp-less插件：

　　gulp-less后面的^3.0.5是限定該插件的版本>=3.0.5且<4.0.0，避免項目后期出現不可預料的相關問題。插件的版本號這樣查看：

npm list

　　^開頭的版本號解釋如下：

^1.2.x := >=1.2.0 <2.0.0
^0.0.x := >=0.0.0 <0.1.0
^0.0 := >=0.0.0 <0.1.0

　　四、安裝插件：

npm install

　　由於我們已經創建了package.json，並且添加了devDependencies配置，所以npm install會默認去下載devDependencies中的插件。否則install后面需要加插件名稱，很麻煩，不推薦這樣做。

　　五、在根目錄下創建gulpfile.js文件。

　　插件已經安裝好了，現在是利用它做一些事情的時候。

var gulp = require('gulp'); //requires the core Gulp library
var g = require('gulp-load-plugins')(); //read the dependencies in the package.json file and inject each of them for us.
gulp.task('default',function(){
    //運行gulp，會執行這里的代碼
})；

　　任務名稱是default的任務會在運行gulp時默認執行，當然我們可以建立其他任務，比如前面我們安裝了gulp-less插件，我們現在就可以利用它來創建一個任務。

　　首先去npm官網查詢插件說明，比如gulp-less:

　　然后我們知道了該插件的作用和用法，官網說明第一步是安裝該插件，我們已經通過上面的步驟做了，所以不必重復，然后是用法，選擇合適自己的用法即可，比如我選擇了編譯less並壓縮編譯后的css：

　　發現壓縮css還需要gulp-minify-css插件，自行添加到package.json的配置項中，然后再次運行npm install。然后在gulpfile中新增名為less的task：

var gulp = require('gulp');
var g = require('gulp-load-plugins')();

//compress less & minify css
gulp.task('less', function () {
    return gulp.src(paths.app.less)
        .pipe(g.less())
        .pipe(g.minifyCss())
        .pipe(gulp.dest(paths.dist.css));
});

　　解釋一下上面的代碼：require加載gulp和gulp-load-plugins模塊后，通過下面的代碼創建名為less的task:

gulp.task('less', function () {
    //your code here
});

　　gulp.src(paths.app.less)//找到路徑為paths.app.less的所有的文件。

　　pipe理解為管道，上一步處理完的數據會進來繼續處理，處理完畢流到下一個管道。所以這里先pipe(g.less())是用less()函數處理上一步匹配到的數據。

　　pipe(g.minifyCss())用minifyCss函數處理上一步流過來的數據。

　　pipi(gulp.dest(paths.app.css))繼續處理流過來的數據，通過dest方法把他們輸出到paths.app.css目錄。我這里的目錄是用json配置的，不配置的話直接寫目錄就好，比如這樣子：./app/css

　　任務寫好之后，我們這樣執行特定任務，比如執行剛寫好的less任務：

gulp less

　　那么現在你會寫gulpfile了嗎？剩下的事情就是多任務的組合利用了，注意要提供多種任務入口，開發調試，發布，檢測等等，自己權衡分配 。

 

參考資料：

1、gulp中文網（gulp基礎知識） http://www.gulpjs.com.cn/docs/getting-started/

2、smashingmagazine（gulp博文） https://www.smashingmagazine.com/2014/06/building-with-gulp/

3、npm官方文檔（版本號說明） https://docs.npmjs.com/misc/semver

4、npm官方文檔（package說明） https://www.npmjs.com/