gulp快速入門

Gulp是基於流的前端自動化構建工具

使用步驟：

1.安裝node和npm

　　訪問國外服務器網速很差時，安裝依賴模塊時會缺乏文件。能夠安裝國內的鏡像，以後使用cnpm命令代替npm命令。

　　npm install cnpm -g --registry=https://registry.npm.taobao.org

2.全局安裝gulp

　　$npm install -g gulp

　　查看gulp的版本：$gulp –v

　　結果：cli version -3.0.2爲全局安裝的，local version-3.0.2 爲本地安裝的。

3.在項目根目錄新建package.json文件

　　$npm ini

　　按提示輸入相關配置信息便可。若是在別的地方再次搭建開發環境時，不須要一個一個模塊安裝，只須要把package.json文件拷貝過去，而後運行$npm istall --save-dev命令便可安裝全部模塊包。

4.本地安裝gulp

　　$npm install gulp  --save-dev

　　$npm install [<@scope>/]<name>@<version>

　　卸載插件：npm uninstall <name> [-g] [--save-dev];(直接刪除文件會報錯)

5. 安裝gulp的相關插件

　　$npm install module-name -save 把模塊和版本號添加到package.json的dependencies部分

　　$npm install gulp-less -save-dve 把模塊和版本號添加到package.json的devdependencies部分

6. 編寫gulpfile.js文件定義執行的任務

　　在項目根目錄下建立gulpfile.js文件，裏面定義須要執行的任務。同時新建一個發佈目錄，和開發目錄分開，專門存放處理好的靜態資源，未來發布時直接將發佈目錄下的全部文件拷到服務器便可。

7.運行gulf任務

　　CLI執行方式，默認執行gulpfile.js這個特定名字的js文件中的任務：$gulp defaultTask

　　若是任務不在項目根目錄的gulpfile.js中定義，須要手動指定gulpfile的路徑，以下所示：

   $gulp  minifyCssTask  --gulpfile  ./child/task.js

　　webstorm開發工具中：右鍵點擊gulpfile.js，選擇」Show Gulp Tasks」

經常使用命令：

$npm install gulp –g

安裝到全局環境裏面，包安裝在Node安裝目錄下的node_modules文件夾中，通常在 \Users\用戶名\AppData\Roaming\ npm\目錄下，可使用npm root -g查看全局安裝的目錄。用戶能夠在命令行中直接運行該模塊包支持的命令。

$npm install gulp --save-dev

包安裝在指定項目的node_modules文件夾下，--save將配置保存到配置文件中，-dev同時把配置寫入devDependencies字段中。

gulp經常使用方法

1. gulp.src(globs[, options])
src方法是按照指定的路徑將源文件轉爲Vinyl fs並輸出至別的插件。gulp借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，相似jQuery的鏈式操做。當前Node項目的根路徑用’./’表示，或者直接從和gulpfile.js平級的目錄開始，’/’表示的是盤符根目錄。

globs：匹配符合特定規則的文件路徑，類型爲字符串或字符串組成的數組。

glob匹配規則：

* 匹配0個或多個字符，但不會匹配路徑分隔符，除非路徑分隔符出如今末尾。*結尾時能夠匹配到路徑分隔符不會被匹配到

   "js/*.js"：獲取js目錄下的全部js文件；

  "js/*"：獲取js目錄下的全部文件，不能匹配子目錄下的文件。

** 能夠匹配路徑分隔符，用於匹配0個或多個子目錄，須要單獨出現。若是出如今末尾，還能匹配任意文件。

　　"js/**/*.js"：匹配 js 目錄及子目錄下全部js文件，如 js/a.js 或 js/a/b/c/d.js。

?  匹配文件路徑中的一個字符，不會匹配到路徑分隔符，也不能匹配空字符

　　"js/a?.js"：能匹配 js/ab.js，不能匹配 js/a.js。

匹配指定範圍內的一個字符，若是指定範圍的首字符是  或 ，則爲匹配不在指定範圍內的一個字符。[...]!^

　　"js/a[0-3].js"：獲取js目錄下以a開頭，第二個字符爲0-3之間的js文件。

　　"js/[^ab].js"：匹配 js/c.js，不匹配 js/cb.js、js/ac.js。

!(pattern|pattern|pattern) 匹配（徹底且精確地匹配，且不可組合）不符合任何模型之一的字符。注意 | 先後不能有空格，下同。

　　"js/!(a|b).js"：匹配 js 目錄下的 aa.js、ab.js、ba.js、c.js 不匹配 a.js、b.js。

　　"!src/a.js" : 不包含src下的a.js文件；

?(pattern|pattern|pattern) 匹配多個 pattern 中 0 或 1 個（精確匹配，不能夠組合）。

　　"js/?(a|b).js"：匹配 js 目錄下的 a.js、b.js，不匹配 ab.js

+(pattern|pattern|pattern) 至少匹配多個 pattern 中的一個。與*(pattern|pattern|pattern) 不用的是，它必須1個及以上，不能爲空。

　　"js/+(a|b)b.js"：匹配 js 目錄下的 ab.js、bb.js、ababab.js，不能匹配 abcd.js（也就是說：只容許匹配出如今範圍內的字符） ，也不能像 js/*(a|b)b.js 那樣匹配 b.js。

*(a|b|c)  匹配括號中多個 pattern 中0或任意多個（pattern可相互組合）。

　　"js/*(a|b|c).js"：匹配 js 目錄下的 a.js、ab.js、abc.js、ba.js，不匹配 abcd.js（也就是說：只容許匹配出如今範圍內的字符）。

@(pattern|pattern|pattern) 匹配多個 pattern 中的任意一個（即不能夠組合，且不能爲空或大於1個）。與 ?(pattern|pattern|pattern) 區別是不可爲空。

　　"js/@(a|b)b.js"：匹配 js 目錄下的 ab.js、bb.js，不匹配 b.js、abb.js、abc.js。

{} 匹配多個屬性

　　src/{a,b}.js匹配a.js和b.js文件，src/*.{jpg,png,gif}匹配src下全部jpg/png/gif文件

! 排除文件，當有多種匹配模式時可使用數組，注意前後順序，後面的規則會覆蓋前面的。

　　gulp.src([*.js,'!b*.js']) //匹配全部js文件，但排除掉以b開頭的js文件

options：控制文件流和輸出路徑，可選配置。

　　options.buffer：是否以buffer形式返回file.content，默認是true。

　　options.read：是否讀取該文件，fals返回的file.content爲null，默認爲true。

　　options.base：用於切除輸入流的路徑，base指定的部分路徑將不做爲dest的輸入路徑，base默認值爲第一個glob規則以前的全部路徑。

gulp.src('client/js/**/*.js') // `**/*.js`爲glob規則，默認的base爲`client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  //輸出'build/somedir/somefile.js'，base部分client/js/被省略
 
gulp.src('client/js/tools/helper.js') // `helper.js`爲glob規則，默認的base爲client/js/tools/
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/helper.js'
//若是要保留以前的目錄結構，使用{base:’.’},輸出build/client/js/tools/helper.js`
 
gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 輸出'build/js/somedir/somefile.js'

2.gulp.dest(path[, options])

dest方法將操做完成後的文件流輸出到指定目錄。能夠pipe到多個文件夾，若是某個文件夾不存在，會自動建立它。只能指定路徑，不能指定文件名。文件名採用源文件的名字。

文件被輸出的路徑是以dest()所給的目標路徑根據src()相對路徑計算而來，src()的base參數會改變輸出路徑。

path：指定文件的輸出路徑，參數類型爲字符串或函數。當前項目根目錄以’./’表示。

3.gulp.task(name[, deps], fn)

task定義一個gulp任務

name： 指定任務的名稱，參數類型爲String，名字中不要有空格，未來能夠直接運行；

deps： 該任務依賴的任務（被依賴的任務須要return當前任務的事件流），[String]

fn： 執行該任務的具體操做，若是省略，則只完成依賴的任務。fn一般爲調用對應插件的方法，不必定在全部依賴的任務完成後才執行，格式以下：

gulp.task('buildStuff', [‘taskOne’,’taskTwo’],function() {
  // Do something that "builds stuff"
  var stream = gulp.src(/*some source path*/)
  .pipe(somePlugin())
  .pipe(someOtherPlugin())
  .pipe(gulp.dest(/*some destination*/));
  return stream;      //返回才能讓後面的任務按順序依賴當前任務，不然爲並行執行    
　　//taskOne/taskTwo的fn方法中須要返回流對象/Promise對象或使用cb，並在deps中聲明，才能保證當前的操做在依賴的任務完成後執行
  });

deps爲多個任務時，默認的gulp會一次性同時運行全部的task而且不作任何等待，執行的順序沒有保證。若是須要嚴格按照順序執行，須要特別處理（如上所述，前一個任務返回特定對象而且當前任務須要聲明依賴前一個任務）。

4.gulp.watch(glob [, opts], tasks)或gulp.watch(glob [, opts, cb])

watch方法是用於監聽指定文件的變化，文件一修改就會執行指定的任務或回調函數
glob：須要處理的源文件通配符路徑。

opts：類型(可選)：Object 具體參看https://github.com/shama/gaze；

tasks：須要執行的任務的名稱數組；

cb(event)：文件變化時執行的回調函數，event對象描述了所監控到的變更

event.type：發生的變更的類型：added, changed 或者 deleted。

event.path：觸發了該事件的文件的路徑。

gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch('js/**/*.js', function(event) {

  console.log('File ' + event.path + ' was ' + event.type);

});

Node的stream有4種，Readable（只讀）、Writable（只寫）、Duplex（雙向）、Transform（操做被寫入數據，而後讀出結果）。可是Node的stream只處理內容，沒有辦法處理目錄相關的操做。因此gulp使用的是Vinyl File Object Stream，Vinyl主要用路徑（path）和內容（contents）兩個屬性來描述文件。

能夠用vinyl-source-stream把普通的Node Stream轉換爲Vinyl File Object Stream，在gulp內使用。

//引入工具包
var gulp = require('gulp'); //加載本地gulp
var jshint = require("gulp-jshint");    //js代碼檢查
var less = require("gulp-less");    //編譯less文件生成css文件
var cssMinify = require('gulp-clean-css');  //壓縮css文件
var concat = require("gulp-concat");//將多個js文件合併爲一個
var uglify = require("gulp-uglify");//將js文件壓縮，若是js有語法錯誤，任務會終止
var rename = require("gulp-rename");//將文件重命名，參數爲String/fn，能夠在文件名前配置輸出路徑
var del = require("del");   //刪除文件，原生的Node模塊，也須要install
//在編譯文件以前刪除上次一些沒必要要的文件，如上次build的temp文件等
gulp.task('clean:mobile', function (cb) {   //cb是gulp傳入的回調函數
  del([
    './src/mobile/**/*',    // 刪除`mobile`目錄中的全部文件及目錄；若以文件後綴結尾，目錄會保存
    '!./src/mobile/deploy.json'  // 不但願刪掉的這個文件
  ], cb);
});
//編譯less，壓縮css
gulp.task('less', function () {
    gulp.src("./src/less/**/*.less")   
        .pipe(less())   //調用less模塊，將less文件編譯爲css文件，文件名不變
        .pipe(cssMinify(
              {
　　　　　　　　　　compatibility: 'ie9,-properties.ieFilters', //兼容ie9以上，不保留濾鏡
                 debug:true
               },
               function (detail){
               　　console.log(details.name + ': ' + details.stats.originalSize);
                  console.log(details.name + ': ' + details.stats.minifiedSize);
　　　　　　　　 }
　　　　　　))  //將css文件壓縮
        .pipe(gulp.dest("./build/css"));    //輸出目錄
});
//檢查腳本語法
gulp.task('jshint', function () {
    return gulp.src('./src/js/**/*.js')
            .pipe(jshint())     //檢查js語法
            .pipe(jshint.reporter('default'));  //對錯誤進行提示
});
//合併js，並壓縮
gulp.task('scripts',['jshint'], function () {
    gulp.src('./src/js/**/*.js')
        .pipe(concat('all.js'))     //合併後的文件名字
        .pipe(gulp.dest('./dest'))  //合併後的輸出目錄
        .pipe(rename("all.min.js"))     //將文件重命名
        .pipe(uglify().on('error', function(e){console.log(e);}))           //壓縮文件。添加error事件，若是報錯，能夠縮小查找範圍
        .pipe(gulp.dest("./build"))
});
//default執行所有依賴的任務
gulp.task('default',['clean:mobile','less','scripts']);