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

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

　　1、安裝gulp

npm install -g gulp

　　2、進入項目根目錄，建立package.json文件

npm init

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

　　3、在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

　　4、安裝插件：

npm install

　　因爲咱們已經建立了package.json，而且添加了devDependencies配置，因此npm install會默認去下載devDependencies中的插件。不然install後面須要加插件名稱，很麻煩，不推薦這樣作。

　　5、在根目錄下建立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了嗎？剩下的事情就是多任務的組合利用了，注意要提供多種任務入口，開發調試，發佈，檢測等等，本身權衡分配 。

 

參考資料：

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

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

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

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