前端構建工具Gulp的學習和使用

時間  2019-11-21
標籤 前端 構建 工具 gulp 學習 使用 欄目 JavaScript 简体版
原文   原文鏈接

　　前幾天剛鼓搗了Grunt的使用，結果文檔還沒捂熱，老大說咱們仍是用gulp吧，搞得我又得來整gulp，眼淚流成河了，真是不曉得底層人民的辛苦啊。不過通過對gulp的學習，發現很好用，比grunt舒服！css

　　gulp是一個前端自動化構建工具，與grunt相似，但相對grunt而言gulp更好用。好處是無需寫一大堆繁雜的配置參數，API也相對簡單不少，學習起來很比grunt容易不少，並且gulp使用Nodejs中流(stream)來讀取和操做數據，其速度更快,減小頻繁的 IO 操做。html

　　下面是學習過程當中的一些總結：前端

1. gulp的安裝

　　gulp的安裝依賴於nodejs，因此安裝gulp以前必須確保已經正確安裝了nodejs環境。而後再開始安裝gulp：

　　npm install gulp　　//這條命令是將gulp安裝在項目根目錄內，安裝過程當中會自建一個package-lock.json文件和一個node_modules文件夾，裏面有gulp的安裝文件

 　 若是想在安裝gulp時把gulp寫進項目的package.json文件依賴中，則須要本身在項目的根目錄中新建一個package.json文件，而且在命令中加上--save-dev：   **提倡這種方式**
　  安裝結果如圖所示：

　　　　

　　npm install --save-dev gulp  //將gulp安裝在項目根目錄內，同時將gulp依賴寫進package.json文件內的devDependencies中

　　安裝結果及 devDependencies 依賴信息如圖所示：

　　

　　這樣就完成了gulp的安裝。

2、gulp的使用

  2.1 創建gulpfile.js文件

　　在完成對gulp的安裝之後，則開始使用gulp，跟grunt須要一個gruntfile.js文件同樣，gulp也須要一個文件做爲它的主文件，在gulp中該文件叫gulpfile.js。在根目錄新建一個名爲gulpfile.js的文件。新建好gulpfile.js文件以後就能夠定義任務(此處的任務跟grunt的任務，目標配置是同一個概念)了。

　　下面以一個簡單的gulpfile.js文件做爲示例說明，定義一個默認的任務。

　　var gulp = require('gulp');    //導入咱們須要的gulp插件信息,與grunt的pkg: grunt.file.readJSON('package.json'),是同一個做用
　　gulp.task('default',function(){  //定義一個任務（task）, default是任務名，function():定義任務所要執行的一系列操做.一般來講，它會是這種形式：gulp.src().pipe(someplugin())。這是測試實例，沒按這個來
    　　console.log('hello world!');    // 作具體的事
　　});

  2.2運行gulp任務

　　 gulpfile.js完成之後，項目目錄結構以下：其中gulp在node_modules內

　　

　　gulpfile.js文件編寫完成後，與gruntfile.js同樣，要執行這些gulp任務，那麼就須要執行這個文件。這時只需在存放gulpfile.js文件的目錄上的路徑框內輸入cmd 回車就行，以下圖所示：

　　

　　固然你也能夠在「開始」內執行cmd，而後一步步經過路徑找到存放gulpfile.js文件的地方，固然這個更麻煩 (windows平臺請使用cmd或者Power Shell等工具)，而後在命令行中鍵入gulp，而後回車執行便可。Gulp和grunt同樣，能夠在gulp後面加上要執行的任務名，如gulp task，固然若是沒有指定任務名，也和grunt同樣則會執行任務名爲default的默認任務，而且是按照默認任務的前後順序依次執行，所以當任務較多時通常不指定具體任務名。

3、gulp經常使用API

　　上面簡單編寫了一個gulpfile.js文件，可是沒什麼功能。要讓文件中的各個任務(task)執行不一樣的功能，則須要知道怎麼去組織和編寫功能代碼，這個時候就須要學習怎麼使用gulp的API接口了。辛好gulp夠簡單，只需知道如下4個API便可玩轉大部分gulp功能了：gulp.src()，gulp.dest(), gulp.task(), gulp.watch()。因此很容易就能理解，但要玩轉gulp，則有些地方需理解透徹才行。固然官方文檔是最好的教程，能夠好好看看和理解。

　　在開始對Gulp的API說明以前，首先說明一下Gulp.js和Grunt.js二者在工做方式和流程上的區別。Grunt主要是以文件爲媒介來執行它的工做流程的，即Grunt執行流程是基於一個個不一樣的臨時文件基礎上的。Grunt中執行完一項任務後，將結果寫入到一個臨時文件中，而後在這個臨時文件基礎上再執行其它任務，執行完成後又將結果寫入到另外的臨時文件或本臨時文件中，而後又以這個新的臨時文件爲基礎繼續執行其它任務..如此循環往復。而Gulp中，使用的是Nodejs中的 流(stream)，因此首先獲取到須要的stream，而後經過stream的pipe()方法把數據流導入須要操做的地方，如Gulp的各類插件中，通過插件處理後的流又能夠繼續導入到其餘插件中，固然也能夠把流寫入到文件中。因此Gulp是以stream爲媒介的，它不須要頻繁的生成臨時文件，減小頻繁的 IO 操做，故而Gulp的速度要比Grunt快不少。

pipe()

require()

　　

　　/***
 　　* 接口介紹部門抄了大部分，本身寫了一部分，加入了一些本身的理解
 　　*/

  3.1 gulp.src()

　　在理解了gulp的工做流程後，開始對gulp的API接口介紹。

　　首先是gulp.src()方法，語法格式爲：gulp.src(globs[, options])，

　　該方法是用來獲取須要操做的文件,即查找須要，但注意返回的」流」裏的內容不是原始的文件流，而是一個虛擬文件(Vinyl files)對象流，這個虛擬文件對象流中存儲着原始文件的路徑、文件名、內容等全部信息。

　　參數說明：globs參數是文件匹配模式(相似正則表達式)，用來匹配文件路徑(包括文件名)，固然這裏也能夠直接指定某個具體的文件路徑。當有多個匹配模式時，該參數能夠是一個數組。
      　　options爲可選參數。一般狀況下不須要用到，要看的話官網有介紹 http://www.gulpjs.com.cn/docs/api/。

　　gulp.src()最重要是globs的匹配規則以及一些文件匹配技巧。
　　Gulp內部使用了node-glob模塊來實現文件匹配功能。下面這些特殊的字符能夠幫咱們匹配出任務須要的文件：

　　　　*  匹配任意數量的字符，但不會匹配路徑分隔符(「\」)，除非路徑分隔符出如今末尾(「script\」)

　　　　** 匹配路徑中任意數量的多個目錄及其子目錄, 包括路徑分隔符(「\」)，須要單獨出現，即它左右不能有其餘東西了(「/**/*.js」)。若是出如今末尾，也能匹配文件。

　　　　? 匹配文件路徑中的單個字符(但不匹配路徑分隔符(「\」))；

　　　　[...] 匹配方括號中出現的字符中的任意一個。當方括號中第一個字符爲^或!時，則表示不匹配方括號中出現的其餘字符中的任意一個，相似js正則表達式中的用法。

　　　　　　如：foo/*.js將匹配位於foo/目錄下的全部的.js結尾的文件；而foo/**/*js將匹配foo/目錄以及其子目錄中全部以.js結尾的文件。

　　　　!(pattern|pattern|pattern) 匹配」任何與括號中給定的任一模式都不匹配的」

　　　　?(pattern|pattern|pattern) 匹配」括號中給定的任一模式0次或1次，相似於js正則中的(pattern|pattern|pattern)?」

　　　　+(pattern|pattern|pattern) 匹配」括號中給定的任一模式至少1次，相似於js正則中的(pattern|pattern|pattern)+」

　　　　*(pattern|pattern|pattern) 匹配」括號中給定的任一模式0次或屢次，相似於js正則中的(pattern|pattern|pattern)*」

　　　　@(pattern|pattern|pattern) 匹配」括號中給定的任一模式1次，相似於js正則中的(pattern|pattern|pattern)」

　　下面舉例說明，固然這些例子我也是抄來的，底子不足啊！

　　　　* 能匹配 a.js，b.css，abc，abc/，但不能匹配a/b.js

　　　　*.* 能匹配 a.js，b.css，a.b，x.y

　　　　*/*/*.js 能匹配 a/b/c.js，x/y/z.css，但不能匹配a/b.js，a/b/c/d.css

　　　　** 能匹配 abc，a/b.js，a/b/c.js，x/y/z，x/y/z.css，能用來匹配全部的目錄及其子目錄內的文件。

　　　　**/*.js 能匹配 foo.js，a/foo.js，a/b/foo.js，a/b/c/foo.js             」src/**/*.js」 能夠通殺src文件夾下全部js文件！

　　　　a/**/z 能匹配 a/z，a/b/z，a/b/c/z，a/d/g/h/j/k/z

　　　　a/**b/z 能匹配 a/b/z，a/sb/z,但不能匹配a/x/sb/z,由於只有**單獨出現才能匹配多級目錄

　　　　?.js 能匹配 a.js，b.js，c.js

　　　　a?? 能匹配 a.b，abc,但不能匹配ab/，?不會匹配路徑分隔符

　　　　[xyz].js 只能匹配 x.js，y.js，z.js,不會匹配xy.js，xyz.js等,整個中括號只表明一個字符

　　　　[^xyz].js 能匹配 a.js，b.js，c.js等,但不能匹配x.js,y.js,z.js，即不匹配含x,y,z的

　　固然上面這些都是單一匹配模式，當有多種匹配模式時可使用數組。

　　　　//使用數組的方式來匹配多種文件

　　　　gulp.src(['js/*.js','css/*.css','*.html'])

　　數組的處理方式還有一個好處就是能夠很方便的使用排除模式。在數組中的單個匹配模式前加上」!」,即排除模式，它會在匹配的結果中排除這個匹配，固然不能在數組中的第一個元素中使用排除模式，不然排除無效。    以下所示：

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

　　gulp.src(['!b*.js',*.js]) 　　 //不會排除任何文件，由於排除模式不能出如今數組的第一個元素中

　　此外，還可使用展開模式。展開模式以花括號做爲定界符，根據它裏面的內容，會展開爲多個模式，最後匹配的結果爲全部展開的模式相加起來獲得的結果，有點像數學裏面的分配率。以下：

  • a{b,c}d 會展開爲 abd,acd
  • a{b,}c 會展開爲 abc,ac
  • a{0..3}d 會展開爲 a0d,a1d,a2d,a3d
  • a{b,c{d,e}f}g 會展開爲 abg,acdfg,acefg
  • a{b,c}d{e,f}g 會展開爲 abdeg,acdeg,abdeg,abdfg

  3.2 gulp.dest()

　　在介紹gulp.dest()接口以前，先介紹下gulp的工做流程：首先經過gulp.src()方法獲取到須要處理的文件流，而後把該文件流經過pipe()方法導入到各類gulp的插件中進行處理，最後把通過插件處理後的流再經過pipe()方法導入到gulp.dest()中寫入文件，加以保存！

　　gulp.dest()方法就是用來寫文件，而且從新輸出（emits）全部數據，所以能夠將它 pipe() 到多個文件夾。若是某文件夾不存在，將會自動建立它。

　　其語法爲：gulp.dest(path[,options])

　　path：爲文件將被寫入的路徑（輸出目錄）。也能夠傳入一個函數，在函數中返回相應路徑，這個函數也能夠由 vinyl 文件實例 來提供。
　　options：爲一個可選的參數對象，一般不須要用到。

　　gulp.dest()這個接口很重要，若要將此接口使用好，就必須理解給它傳入的「路徑參數」與「最終生成的文件」之間的關係。給gulp.dest()傳入的路徑參數，只能用來指定最後生成文件的目錄，而不是指定生成文件的文件名，生成文件的文件名仍是導入到它的文件流自身的文件名，因此生成文件的文件名是由導入到它的文件流決定的，即便給它傳入一個帶有文件名的路徑參數，然而gulp.dest()也會把這個文件名當作是目錄名，如：

    var gulp = require('gulp'); 　　 gulp.src('script/zTree.js') 　　.pipe(gulp.dest('dist/zTree.min.js'));  //最終生成的文件路徑爲 dist/zTree.min.js/zTree.js,而不是dist/zTree.min.js

　　若是真想改變文件名，可使用插件gulp-rename，後文對該插件的加載和使用有介紹，此處不作說明！

　　下面以一些具體例子說明「文件路徑」與給gulp.dest()方法傳入的「路徑參數」之間的關係。
　　gulp.dest(path)生成的文件路徑是在傳入的path參數後面再加上gulp.src()中通配符(「**」，」*.js」，」/**/*.js」)開始出現後的那部分路徑。例如：

    var gulp = reruire('gulp'); 　　 gulp.src('script/**/*.js')   //通配符開始出現的那部分路徑爲 **/*.js
    　　.pipe(gulp.dest('dist'));   //傳入的路勁參數是「dist」，最後生成的文件路徑爲：dist/**，文件名仍是「.js」；文件全路徑則爲:「dist/**/.js」
　　　　//假設**/*.js 匹配到的文件爲 zTree/zTree.js ,則生成的文件路徑及文件名爲 dist/zTree/zTree.js

　

    //但若是不是經過通配符匹配的文件，如
　　 gulp.src('script/zTree/zTree.js')    //不是經過通配符匹配的文件
    .pipe(gulp.dest('dist'));  //最後生成的文件路徑則爲 dist/zTree.js，即gulp.dest()「路徑參數/」加文件名 //有通配符出現的那部分路徑爲 **/zTree.js
    gulp.src('script/**/zTree.js')      //假設匹配到的文件爲script/zTree/zTree.js
    .pipe(gulp.dest('dist'));        //則最後生成的文件路徑爲 dist/zTree/zTree.js //有通配符出現的那部分路徑爲 *.js
    gulp.src('script/*.js')    //假設匹配到的文件爲script/zTree.js 
    .pipe(gulp.dest('dist'));        //則最後生成的文件路徑爲 dist/zTree.js　

　　經過指定gulp.src()方法配置參數中的base屬性，能夠更靈活的改變gulp.dest()生成的文件路徑。若是在gulp.src()方法中沒有配置base屬性時，base的默認值爲「通配符開始出現以前」那部分路徑。

　　　　例如：gulp.src('src/modules/**/*.css')          //此時base的值爲 src/modules

　　其實gulp.dest()生成文件路徑的規則，其實也能夠理解成，用給gulp.dest()傳入的「路徑參數」替換gulp.src()中的base路徑，最終獲得生成文件的路徑。

　　　　gulp.src(' src/modules/**/*.js ')  　　 //此時base的值爲src/modules,即base路徑爲src/modules

     　　//假設該模式下匹配到的文件 src/modules/zTree /zTree.js

    　　.pipe(gulp.dest('dist'))  　　//用dist替換掉base路徑，即用dist替換掉src/modules/，最終獲得 dist/zTree/zTree.js

　　因此改變base路徑後，gulp.dest()生成的文件路徑也會跟着改變，從而變得更靈活！ 

    gulp.src(script/zTree/*.js, {base:'script'}) //配置了base參數，此時base路徑爲script 
　　　　//假設匹配到的文件爲script/zTree/zTree.min.js 　　.pipe(gulp.dest('build')) //此時生成的文件路徑爲 build/zTree/zTree.min.js

　　gulp.dest()把文件流寫入文件後，其在nodejs中流轉的文件流仍然能夠繼續使用，並被寫成多個文件！

  3.3 gulp.task()

　　gulp.task()方法：定義一個使用 Orchestrator 實現的任務（task），即該方法內部使用的是Orchestrator。

　　語法結構爲：gulp.task(name[, deps], fn)

　　name 爲任務名，注：若是須要在命令行中運行具體任務，則名字中不能出現空格
　　deps 是一個包含任務列表的數組，這些任務會在你當前任務運行以前完成。即deps是當前任務的依賴任務，只有等這些依賴任務執行完畢後，纔會執行當前任務。若是沒有依賴，則可省略這個參數

　　　　注意： 你的任務是否在這些前置依賴的任務完成以前就運行了？請必定要確保所依賴的任務列表中的任務都使用了正確的異步執行方式：使用一個 callback，或者返回一個 stream或 promise 。
　　fn 爲任務函數，定義任務所要執行的一些操做，執行代碼都寫在裏面。該參數也是可選的。一般格式：gulp.src().pipe(someplugin())

    //定義一個有依賴的任務，下面的['task0', 'task1', 'task2']就是task的依賴
    gulp.task('task', ['task0', 'task1', 'task2'], function() { // Do something
    });

　　gulp.task()這個API很簡單，但須要知道執行多個任務時怎麼來控制任務執行的順序。
　　gulp中執行多個任務，能夠經過任務依賴來實現。如想執行task0, task1, task2這三個任務，則能夠定義一個空任務，而後把這三個任務當作這個空的任務的依賴就能夠了：

    //執行default任務，就會把task0, task1, task2這三個任務都執行了
    gulp.task('default', ['task0', 'task1', 'task2']), function(){ // Do something
    };

　　若是任務相互之間沒有依賴，則會按照書寫的順序來依次執行；如有依賴則會先執行依賴任務。

　　若是某個任務所依賴的任務是異步的，就必須注意，gulp不會等待那個依賴任務的異步任務完成，而是會接着執行後續的任務。如：

    // task是一個異步執行的任務
 gulp.task(‘task’,function(){ setTimeout(function(){ console.log('Hello,Today!'); },5000); }); //task1任務依賴於task任務,但並不會等到task任務中的異步操做完成後再執行
    gulp.task('task1',['task'],function(){ console.log(''Very good!');
    });

　　上面例子中執行task1任務時，會先執行task任務，但不會等待task任務中的異步操做完成後再執行task1任務，而是緊接着直接執行task1任務。因此task1任務會在task任務異步操做完成以前就執行了。也就失去了二者的依賴關係，這樣的依賴沒有實際意義！

　　

　　因此既要在異步任務中異步操做完成後,再執行後續的任務（即,在依賴的異步任務異步執行完成後，再執行後續的任務），根據接口文檔的敘述，能夠理解爲有如下三種方式：
　　第一：接受一個 callback。在異步操做完成後執行一個回調函數來通知gulp這個異步任務已經完成, 回調函數做爲一個參數傳入任務函數，而且是第一個參數。

    //task是一個異步執行的任務,而test是用於通知異步任務已經完成的回調函數，做爲參數傳入任務函數
    gulp.task('task',function(test){ setTimeout(function(){ console.log('Hello,Today!'); test(); //執行回調，表示這個異步任務已經完成
      },5000); }); //這就可讓task1任務在task任務中的異步操做完成後再執行，從而避免了異步問題
    gulp.task('task1',['task'],function(){ console.log(' Very good!'); });

　　第二：返回一個 stream。在定義任務時返回一個流對象。對於自己就是操做gulp.src獲取到的流的狀況。

    gulp.task('somename', function() { var stream = gulp.src('client/**/*.js') .pipe(doSomething ()) //doSomething()中有某些異步操做 
    .pipe(gulp.dest('build')); return stream; }); gulp.task('task2',[ 'somename'],function(){ console.log(' Do Something!'); });

　　第三：返回一個promise對象。如

    var Q = require('q');   //一個很好的異步處理的庫 https://github.com/kriskowal/q
    gulp.task('somename', function() { var deferred = Q.defer(); setTimeout(function() { // 執行異步的操做
 deferred.resolve(); }, 5000); return deferred.promise; }); gulp.task(' task2',[ 'somename'],function(){ console.log(' Do Something!'); });

　　注意： 默認的，task 將以最大的併發數執行，也就是說，gulp 會一次性運行全部的 task 而且不作任何等待。若是想要建立一個序列化的 task 隊列，並以特定的順序執行，就須要作兩件事：

    • 給出一個提示，來告知 task 何時執行完畢，
    • 再給出一個提示，來告知一個 task 依賴的另外一個 task 何時完成。

　　gulp.task()就這些了，主要是要知道當依賴是異步任務時該怎麼處理。下面接下來是gulp.watch();

  3.4 gulp.watch() 

　　gulp.watch()用來監視文件的變化，當文件發生變化後，能夠用它執行相應的任務，如自動文件壓縮等。其語法爲：gulp.watch(glob[, opts], tasks)

　　glob 爲要監視的文件匹配模式，規則和用法與gulp.src()方法中的glob相同。
　　opts 爲一個可選的配置對象，一般不須要用到
　　tasks 爲須要在文件變更後執行的一個或者多個經過 gulp.task() 定義的 task，

　　//定義了一些任務,再定義一個gulp.watch()
 　　gulp.task('uglify',function(){ 　　//do something 　　}); 　　gulp.task(‘miniJs’,function(){ 　　//do something 　　}); 　　gulp.watch('/src/modules/**/*.js', ['uglify', miniJs’]);

　　gulp.watch()還有第二種使用方式：gulp.watch(glob[, opts, cb])

　　glob和opts參數與第一種用法相同
　　cb參數爲一個函數，每次變更須要執行的 callback。每當監視的文件發生變化時，就會調用這個函數,而且會給它傳入一個名爲 event 的對象，該對象描述了所監控到的文件的變更，type屬性爲變化的類型，能夠是added, changed 或者 deleted；path屬性爲發生變化的文件的路徑(即觸發了該事件的文件的路徑)

　　gulp.watch('src/modules/**/*.js ', function(event) { 　　console.log('文件路徑' + event.path + ' ,文件變化類型 ' + event.type); 　　}); 　　//也能夠分開寫
　　gulp.watch('src/modules/**/*.js ', function(event){ 　　console.log(event.type); //變化的類型 added爲新增, changed爲改變，deleted爲刪除，
    　　console.log(event.path); //發生變化的文件的路徑
　　});

4、gulp經常使用插件

　　最後就是插件了，gulp的插件數量雖然沒有grunt那麼多，但也能夠說是應有盡有了(grunt之全部插件比gulp多根本緣由仍是在工做方式和流程上的區別，grunt是基於文件的工做方式，那麼就須要大量處理臨時文件的插件，反觀gulp則不須要)，下面是一些經常使用的插件。

  4.1 自動加載插件 gulp-load-plugins

　　安裝命令：npm install --save-dev gulp-load-plugins
　   功能：要使用gulp的插件，首先用require()把插件加載進來，若是要使用的插件很是多，那在gulpfile.js文件開頭就要寫不少的require()：

    gulp = require('gulp'); runSequence = require('run-sequence'); del = require('del'); uglify = require('gulp-uglify'); concat = require('gulp-concat'); minifyCss = require('gulp-minify-css'); browserSync = require('browser-sync').create();

　　更多的插件...  這裏只是列舉一些經常使用的，至於特別功能須要更多的，則再加。

　　雖然這沒什麼問題，但會使gulpfile.js文件變得很冗長，看上去很嚇人，咋這麼多！gulp-load-plugins插件正是用來解決這個問題。這個插件能自動加載package.json文件裏的gulp插件。假設package.json文件裏devDependencies依賴是這樣的:

 { "devDependencies": { "gulp": "^3.9.1", "gulp-concat": "^2.6.1", "gulp-minify-css": "^1.2.4", "gulp-uglify": "^3.0.0" } }
　這麼多插件一一用require()太麻煩了，那麼就能夠在gulpfile.js中使用gulp-load-plugins來加載插件：和grunt的pkg：grunt.file.readJSON('package.json')相似，可是加載方式又有所區別。
 首先須要將gulp加載進來 　　　　var gulp = require('gulp'); 　　 而後，加載gulp-load-plugins插件，並運行它 　　　　var plugins = require('gulp-load-plugins')(); 　　　　//或者： 
　　　　var gulpLoadPlugins = require('gulp-load-plugins')； 　　　　var plugins = gulpLoadPlugins();
　而後當接下來要使用gulp-concat和gulp-uglify這兩個插件的時候，就能夠用plugins. concat和plugins. uglify來代替，即將原始插件名去掉gulp-前綴便可。實質是gulp-load-plugins是作了以下的轉換： 
　　plugins. concat = require('gulp- concat);
　　plugins. uglify = require('gulp- uglify ');

　　固然若是是gulp-minify-css這種的話，則採用駝峯命名方式，即

　　plugins. minifyCss = require(「gulp-minify-css」);

　　gulp-load-plugins有一個好處，就是並不會在一開始就加載package.json裏面全部的gulp插件，而是工程項目中須要用到某個插件的時候，纔去加載那個插件，能夠節約一丟丟的內存和縮短一小戳時間，嘎嘎!。既然這些都基於package.json文件來玩的，那麼package.json就頗有必要存在了。因此，在開始安裝gulp的時候建議在命令行中加入 –save-dev 的效果就體現出來了喲。

  4.2 文件合併　　gulp-concat

　　安裝命令：npm install --save-dev gulp-concat
       功能：用於將多個文件合併爲一個文件。經常使用來將多個JS文件或多個CSS文件合併爲一個JS文件或一個CSS文件等，從而減少加載網頁時下載文件的http請求數量，下降對帶寬的佔用；同時減小對瀏覽器內存的佔用。

    //加載方式：
    var gulp = require('gulp'), var concat = require("gulp-concat"); //或者：
    plugins. concat       // plugins是var plugins = require('gulp- load-plugins')(); 　　
　　
　　//文件合併任務建立
    gulp.task('concat', function () { 　　gulp.src('/src/modules/Suspension/scripts/*.js')      //要合併的文件
    　　.pipe(concat('all.js'))   //合併到一個名爲"all.js"的新JS文件
    　　.pipe(gulp.dest('dist/ modules/Suspension/scripts')); 　　//將合併成的新JS文件存放到dist/ modules/Suspension/scripts路徑下
　　});

  4.3 JS文件壓縮　　gulp-uglify

　　安裝命令：npm install --save-dev gulp-uglify
　   功能：用於JS文件的壓縮，使用的是uglify引擎。既然文件合併完成了，那就開始壓縮！

    //加載方式：
    var gulp = require('gulp'), uglify = require("gulp-uglify"); //或者：
 plugins. uglify //JS文件壓縮任務建立
    gulp.task('miniJs', function () { 　　gulp.src(' dist/ modules/Suspension/scripts /*.js') // 要壓縮的js文件
    　　.pipe(uglify())  //使用uglify進行JS文件壓縮,更多配置請參考：
    　　.pipe(gulp.dest(' dist/ modules/Suspension/scripts ')); //壓縮後的文件路徑(此處壓縮的是all.js源文件)
　　});

  4.4 CSS文件壓縮　　gulp-minify-css

　　安裝命令：npm install --save-dev gulp-minify-css
　   功能：用於CSS文件的壓縮。既然壓縮了JS文件,那麼接下來就輪到CSS文件了。

    //加載方式：
    var gulp = require('gulp'), var minifyCss = require("gulp-minify-css"); //或者：
    plugins. minifyCss     //駝峯命名方式 // CSS文件壓縮任務建立
    gulp.task('miniCss', function () { 　　gulp.src(' dist/ modules/Suspension/ style /*.css')  //要壓縮的css文件
    　　.pipe(minifyCss()) //壓縮CSS文件
    　　.pipe(gulp.dest(' dist/ modules/Suspension/ style ')); //壓縮後的文件路徑(此處壓縮的是all.css源文件)
　　});

  4.5 圖片壓縮　　gulp-imagemin

　　安裝命令：npm install --save-dev gulp-imagemin

　   功能：用於壓縮jpg、png、gif等圖片。過了JS，CSS文件，輪到image了！

    //加載方式：
    var gulp = require('gulp'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant');     //png圖片壓縮插件 // 圖片文件壓縮任務建立
    gulp.task('imageMin', function () { 　　return gulp.src('src/images/*') 　　.pipe(imagemin({ 　　optimizationLevel: 5, //類型：Number 默認：3 取值範圍：0-7（優化等級）
            　　progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
            　　interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
            　　multipass: true //類型：Boolean 默認：false 屢次優化svg直到徹底優化
            　　use: [pngquant()]  //使用pngquant來壓縮png圖片
 　　})) .pipe(gulp.dest('dist')); });

　　建議只壓縮修改的圖片，壓縮圖片比較耗時。通常圖片修改比較小或者一次作好之後就不多修改，所以沒有必要常常壓縮圖片，能夠另外使用」gulp-cache」只壓縮修改過的圖片，沒有修改的圖片直接從緩存文件讀取。 gulp-imagemin的使用複雜一點，它自己也有不少插件要詳細理解，就只能去看它的文檔了！

  4.6 Html文件壓縮　　gulp-minify-html

　　安裝命令：npm install --save-dev gulp-minify-html
　   功能：用於壓縮html文件。

    //加載方式：
    var gulp = require('gulp'), minifyHtml = require("gulp-minify-html"); //或者：
    plugins. minifyHtml     //駝峯命名方式 // Html文件壓縮任務建立
    gulp.task('minifyHtml', function () { gulp.src('client/*.html') // 要壓縮的html文件
        .pipe(minifyHtml()) //壓縮Html文件
        .pipe(gulp.dest('dist/client')); });

　　固然html壓縮也就壓縮一些空格而已，實際意義並非很大！

  4.7 JS代碼檢查　　gulp-jshint

　　安裝命令：npm install --save-dev gulp-jshint
　   功能：用來檢查JS代碼是否有變化。

    //加載方式：
    var gulp = require('gulp'), jshint = require("gulp-jshint"); //或者：
 plugins. jshint //jshint文件壓縮任務建立
    gulp.task('jshint', function () { gulp.src('/src/modules/Suspension/scripts/*.js ') .pipe(jshint()) .pipe(jshint.reporter()); // 對代碼進行報錯提示
 }); //能夠定義一個自定義錯誤（引入map-stream模塊）提示：
    var mapstream = require( 'map-stream' ); /* file.jshint.success = true; // or false 代碼檢查是否成功 file.jshint.errorCount = 0; // 錯誤的數量 file.jshint.results = []; // 錯誤的結果集 file.jshint.data = []; // JSHint返回關於隱含的全局變量、圈複雜度等的詳細信息 file.jshint.opt = {}; //將選擇的選項傳遞給JSHint */
    var myReporter = map(function (file, cb) { if (!file.jshint.success) { console.log('[ '+file.jshint.errorCount+' errors in ]'+file.path); file.jshint.results.forEach(function (err) { /* err.line 錯誤所在的行號 err.col 錯誤所在的列號 err.message/err.reason 錯誤信息 */
                if (err) { console.log(' '+file.path + ': line ' + err.line + ', col ' + err.character + ', code ' + err.code + ', ' + err.reason); } }); } cb(null, file); }); gulp.task('jshint', function() { return gulp.src('dist/ modules/Suspension/scripts /*.js')  // 指定目錄下全部的js文件
            .pipe(jshint())     // js代碼檢查
            .pipe(myReporter);  // 如有錯誤，則調用myReporter進行提示
 });
　　也能夠定一個執行函數，在代碼檢查完畢後，自動執行合併和壓縮。

  4.8 重命名　　gulp-rename

　　安裝命令：npm install --save-dev gulp-rename
　   功能：用於重命名文件流中的文件。在用gulp.dest()方法寫入文件時，完成後的文件名是原文件名，若是要改變gulp.dest()後的文件名，就能夠在以前用gulp-rename插件來改變文件流中的文件名。

    //加載方式：
    var gulp = require('gulp'), rename = require('gulp-rename'), uglify = require("gulp-uglify"); //或者：
 plugins. rename plugins. uglify // rename插件使用任務
    gulp.task('rename', function () { gulp.src('dist/ modules/Suspension/scripts/all.js') .pipe(uglify()) //JS文件壓縮
        .pipe(rename(‘all.min.js’)) //將all.js重命名爲all.min.js，便於本身識別
        .pipe(gulp.dest('dist/ modules/Suspension/scripts')); });

　　這個頗有用，便於修改壓縮後的文件名，讓工程文件和開發文件更容易區分。

  4.9 自動刷新　　gulp-livereload

　　安裝命令:npm install --save-dev gulp-livereload。
　   功能：當代碼發生變化時，gulp-livereload能夠自動刷新頁面。該插件最好配合谷歌瀏覽器使用，且要安裝livereload chrome extension擴展插件,不能下載的請跨過那道牆。

    //加載方式：
    var gulp = require('gulp'), less = require('gulp-less'), livereload = require('gulp-livereload'); //或者：
 plugins. less plugins. livereload //自動刷新任務定義
    gulp.task('less', function() { gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('css')) .pipe(livereload()); }); gulp.task('watch', function() { livereload.listen(); //要在這裏調用listen()方法
      gulp.watch('less/*.less', ['less']); });
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程