gulp詳細入門教程

時間 2019-11-07

原文原文鏈接

1、gulp簡介

1.gulp是什麼？javascript

gulp是前端開發過程當中一種基於流的代碼構建工具，是自動化項目的構建利器；它不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用它，不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。css

gulp是基於Nodejs的自動任務運行器，它能自動化地完成 javascript、coffee、sass、less、html/image、css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。經過本文，咱們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。html

gulp 和 grunt 很是相似，但相比於 grunt 的頻繁 IO 操做，gulp 的流操做，能更快地更便捷地完成構建工做。前端

2.核心概念：流java

流，簡單來講就是創建在面向對象基礎上的一種抽象的處理數據的工具。在流中，定義了一些處理數據的基本操做，如讀取數據，寫入數據等，程序員是對流進行全部操做的，而不用關心流的另外一頭數據的真正流向。流不但能夠處理文件，還能夠處理動態內存、網絡數據等多種數據形式。node

而gulp正是經過流和代碼優於配置的策略來儘可能簡化任務編寫的工做。這看起來有點「像jQuery」的方法，把動做串起來建立構建任務。早在Unix的初期，流就已經存在了。流在Node.js生態系統中也扮演了重要的角色，相似於*nix將幾乎全部設備抽象爲文件同樣，Node將幾乎全部IO操做都抽象成了stream的操做。所以用gulp編寫任務也可看做是用Node.js編寫任務。當使用流時，gulp去除了中間文件，只將最後的輸出寫入磁盤，整個過程所以變得更快。jquery

3.特色 程序員

易於使用正則表達式

　　經過代碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理。npm

構建快速

　　利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做。

易於學習

　　經過最少的 API，掌握 gulp 絕不費力，構建工做盡在掌握：如同一系列流管道。

插件高質

　　 gulp 嚴格的插件指南確保插件如你指望的那樣簡潔高質得工做。

4.安裝

首先確保你已經正確安裝了nodejs環境。而後以全局方式安裝gulp：

npm install -g gulp

全局安裝gulp後，還須要在每一個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中，而後在命令行中執行：

npm install gulp

若是想在安裝的時候把gulp寫進項目package.json文件的依賴中，則能夠加上--save-dev：

npm install --save-dev gulp

這樣就完成了gulp的安裝，接下來就能夠在項目中應用gulp了。

5.gulp的使用

一、創建gulpfile.js文件

gulp也須要一個文件做爲它的主文件，在gulp中這個文件叫作gulpfile.js。新建一個文件名爲gulpfile.js的文件，而後放到你的項目目錄中。以後要作的事情就是在gulpfile.js文件中定義咱們的任務了。下面是一個最簡單的gulpfile.js文件內容示例，它定義了一個默認的任務。

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

此時咱們的目錄結構是這樣子的：

2 運行gulp任務

要運行gulp任務，只需切換到存放gulpfile.js文件的目錄(windows平臺請使用cmd或者Power Shell等工具)，而後在命令行中執行gulp命令就好了，gulp後面能夠加上要執行的任務名，例如gulp task1，若是沒有指定任務名，則會執行任務名爲default的默認任務。

2、 gulp api

1.工做方式

在介紹gulp API以前，咱們首先來講一下gulp.js工做方式。在gulp中，使用的是Nodejs中的stream(流)，首先獲取到須要的stream，而後能夠經過stream的pipe()方法把流導入到你想要的地方，好比gulp的插件中，通過插件處理後的流又能夠繼續導入到其餘插件中，固然也能夠把流寫入到文件中。因此gulp是以stream爲媒介的，它不須要頻繁的生成臨時文件，這也是咱們應用gulp的一個緣由。

　　gulp的使用流程通常是：首先經過gulp.src()方法獲取到想要處理的文件流，而後把文件流經過pipe方法導入到gulp的插件中，最後把通過插件處理後的流再經過pipe方法導入到gulp.dest()中，gulp.dest()方法則把流中的內容寫入到文件中。例如：

var gulp = require('gulp');
gulp.src('script/jquery.js')         // 獲取流的api
    .pipe(gulp.dest('dist/foo.js')); // 寫放文件的api

2.globs的匹配規則

咱們重點說說gulp用到的globs的匹配規則以及一些文件匹配技巧，咱們將會在後面用到這些規則。

　　gulp內部使用了node-glob模塊來實現其文件匹配功能。咱們可使用下面這些特殊的字符來匹配咱們想要的文件：

匹配符	說明
*	匹配文件路徑中的0個或多個字符，但不會匹配路徑分隔符，除非路徑分隔符出如今末尾
**	匹配路徑中的0個或多個目錄及其子目錄,須要單獨出現，即它左右不能有其餘東西了。若是出如今末尾，也能匹配文件。
?	匹配文件路徑中的一個字符(不會匹配路徑分隔符)
[...]	匹配方括號中出現的字符中的任意一個，當方括號中第一個字符爲^或!時，則表示不匹配方括號中出現的其餘字符中的任意一個，相似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,x.y,abc,abc/,但不能匹配a/b.js

*.* 能匹配 a.js,style.css,a.b,x.y

*/*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js

** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用來匹配全部的目錄和文件

**/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.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

3.src：獲取流

gulp.src()方法正是用來獲取流的，但要注意這個流裏的內容不是原始的文件流，而是一個虛擬文件對象流(Vinyl files)，這個虛擬文件對象中存儲着原始文件的路徑、文件名、內容等信息。其語法爲：

gulp.src(globs[, options]);

globs參數是文件匹配模式(相似正則表達式)，用來匹配文件路徑(包括文件名)，固然這裏也能夠直接指定某個具體的文件路徑。當有多個匹配模式時，該參數能夠爲一個數組;類型爲String或 Array。當有多種匹配模式時可使用數組

//使用數組的方式來匹配多種文件
gulp.src(['js/*.js','css/*.css','*.html'])

options爲可選參數。如下爲options的選項參數:

options.buffer

類型： Boolean 默認值： true

　　若是該項被設置爲 false，那麼將會以 stream 方式返回 file.contents 而不是文件 buffer 的形式。這在處理一些大文件的時候將會頗有用。

注意：插件可能並不會實現對 stream 的支持。

options.read

類型： Boolean 默認值： true

若是該項被設置爲 false，那麼 file.contents 會返回空值（null），也就是並不會去讀取文件。

options.base

類型： String ，設置輸出路徑以某個路徑的某個組成部分爲基礎向後拼接。

如, 請想像一下在一個路徑爲 client/js/somedir 的目錄中，有一個文件叫 somefile.js ：

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 如今 `base` 的值爲 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 寫入 'build/somedir/somefile.js' 將`client/js/`替換爲build
 
gulp.src('client/js/**/*.js', { base: 'client' }) // base 的值爲 'client'
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 寫入 'build/js/somedir/somefile.js' 將`client`替換爲build

4.dest：寫文件

gulp.dest()方法是用來寫文件的，其語法爲：

gulp.dest(path[,options])

path爲寫入文件的路徑；

options爲一個可選的參數對象，如下爲選項參數：

options.cwd

類型： String 默認值： process.cwd()

輸出目錄的 cwd 參數，只在所給的輸出目錄是相對路徑時候有效。

options.mode

類型： String 默認值： 0777

八進制權限字符，用以定義全部在輸出目錄中所建立的目錄的權限。

var gulp = require('gulp');
gulp.src('script/jquery.js')　       // 獲取流
    .pipe(gulp.dest('dist/foo.js')); // 寫放文件

下面再說說生成的文件路徑與咱們給gulp.dest()方法傳入的路徑參數之間的關係。　gulp.dest(path)生成的文件路徑是咱們傳入的path參數後面再加上gulp.src()中有通配符開始出現的那部分路徑。例如：

var gulp = reruire('gulp');
//有通配符開始出現的那部分路徑爲 **/*.js
gulp.src('script/**/*.js')
    .pipe(gulp.dest('dist')); //最後生成的文件路徑爲 dist/**/*.js
//若是 **/*.js 匹配到的文件爲 jquery/jquery.js ,則生成的文件路徑爲 dist/jquery/jquery.js

用gulp.dest()把文件流寫入文件後，文件流仍然能夠繼續使用。

5.watch：監聽文件

gulp.watch()用來監視文件的變化，當文件發生變化後，咱們能夠利用它來執行相應的任務，例如文件壓縮等。其語法爲

gulp.watch(glob[, opts], tasks);

glob 爲要監視的文件匹配模式，規則和用法與gulp.src()方法中的glob相同。 opts 爲一個可選的配置對象，一般不須要用到。 tasks 爲文件變化後要執行的任務，爲一個數組。

gulp.task('uglify',function(){
  //do something
});
gulp.task('reload',function(){
  //do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch()還有另一種使用方式：

gulp.watch(glob[, opts, cb]);

glob和opts參數與第一種用法相同;

cb參數爲一個函數。每當監視的文件發生變化時，就會調用這個函數,而且會給它傳入一個對象，該對象包含了文件變化的一些信息，type屬性爲變化的類型，能夠是added,changed,deleted；path屬性爲發生變化的文件的路徑。

gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //變化類型 added爲新增,deleted爲刪除，changed爲改變 
    console.log(event.path); //變化的文件的路徑
});

6.task：定義任務

gulp.task方法用來定義任務，其語法爲：

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

name 爲任務名；

deps 是當前定義的任務須要依賴的其餘任務，爲一個數組。當前定義的任務會在全部依賴的任務執行完畢後纔開始執行。若是沒有依賴，則可省略這個參數；

fn 爲任務函數，咱們把任務要執行的代碼都寫在裏面。該參數也是可選的。

當你定義一個簡單的任務時，須要傳入任務名字和執行函數兩個屬性。

gulp.task('greet', function () {
   console.log('Hello world!');
});

執行gulp greet的結果就是在控制檯上打印出「Hello world」。

　　你也能夠定義一個在gulp開始運行時候默認執行的任務，並將這個任務命名爲「default」：

gulp.task('default', function () {
   // Your default task
});

前面已經介紹了gulp.task的語法，可是當有多個任務時，須要知道怎麼來控制任務的執行順序。

　　能夠經過任務依賴來實現。例如我想要執行one,two,three這三個任務，那咱們就能夠定義一個空的任務，而後把那三個任務當作這個空的任務的依賴就好了：

//只要執行default任務，就至關於把one,two,three這三個任務執行了
gulp.task('default',['one','two','three']);

若是任務相互之間沒有依賴，任務就會按你書寫的順序來執行，若是有依賴的話則會先執行依賴的任務。可是若是某個任務所依賴的任務是異步的，就要注意了，gulp並不會等待那個所依賴的異步任務完成，而是會接着執行後續的任務。例如：

gulp.task('one',function(){
  //one是一個異步執行的任務
  setTimeout(function(){
    console.log('one is done')
  },5000);
});
 
//two任務雖然依賴於one任務,但並不會等到one任務中的異步操做完成後再執行
gulp.task('two',['one'],function(){
  console.log('two is done');
});

上面的例子中咱們執行two任務時，會先執行one任務，但不會去等待one任務中的異步操做完成後再執行two任務，而是緊接着執行two任務。因此two任務會在one任務中的異步操做完成以前就執行了。

　　那若是咱們想等待異步任務中的異步操做完成後再執行後續的任務，該怎麼作呢？

　　有三種方法能夠實現：

　　第一：在異步操做完成後執行一個回調函數來通知gulp這個異步任務已經完成,這個回調函數就是任務函數的第一個參數。

gulp.task('one', function (cb) { //cb爲任務函數提供的回調，用來通知任務已經完成
    //one是一個異步執行的任務
    exec('', function (err) {
        setTimeout(function () {
            if (err) {
                return cb(err);
            }
            console.log('one is finish');
            cb();  //執行回調，表示這個異步任務已經完成
        }, 5000)
    });
});

//這時two任務會在one任務中的異步操做完成後再執行
gulp.task('two', ['one'], function () {
    console.log('two is finish');
});

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

gulp.task('one',function(cb){
  var stream = gulp.src('client/**/*.js')
      .pipe(exec()) //exec()中有某些異步操做
      .pipe(gulp.dest('build'));
    return stream;
});
 
gulp.task('two',['one'],function(){
  console.log('two is done');
});

第三：返回一個promise對象，例如

var Q = require('q');
gulp.task('one', function() {
  var deferred = Q.defer();
 
  // 執行異步的操做
  setTimeout(function() {
    deferred.resolve();
  }, 1);
  return deferred.promise;
});
 
gulp.task('two',['one'],function(){
  console.log('two is done');
});

3、寫本身的gulp任務

1.項目需求

咱們將建立一個本身的gulp，具體的需求是經過gulp把咱們本身所編寫的JS文件合併壓縮、CSS文件進行壓縮後，而且生成新的文件。咱們所須要的插件爲：gulp-minify-css gulp-concat gulp-uglify gulp-rename 以下圖所示，完成後的項目目錄結構：

2.安裝插件

根據咱們項目的需求，安裝所須要的插件，能夠經過"npm install 插件名" 來安裝插件

而後打開gulpfile.js，將咱們所用到的插件引用到咱們項目中，代碼以下:

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),  //CSS壓縮
    concat = require('gulp-concat'),         // 文件合併
    uglify = require('gulp-uglify'),         //js壓縮插件
    rename = require('gulp-rename');         // 重命名

3.編寫任務代碼

1.壓縮css

gulp.task('minifycss', function() {
    return gulp.src('src/css/*.css')         //壓縮的文件
        .pipe(minifycss())                   //執行壓縮
        .pipe(gulp.dest('dist/css'));        //輸出文件夾
});

2.JS 合併壓縮

gulp.task('minifyjs', function() {
    return gulp.src('src/js/*.js')
        .pipe(concat('all.js'))               //合併全部js到main.js
        .pipe(gulp.dest('dist/js'))           //輸出main.js到文件夾
        .pipe(rename({suffix: '.min'}))       //rename壓縮後的文件名
        .pipe(uglify())                       //壓縮
        .pipe(gulp.dest('dist/js'));          //輸出
});

3.將以上兩個任務合併爲一個任務

gulp.task('build', ['minifycss', 'minifyjs']);

4.監視文件的變化，自動執行任務

// 監視文件的變化，當文件有更新時執行build任務
gulp.task('watch', function () {
    gulp.watch(['src/js/*.js', 'src/css/*.css'], ['build']);
});

5.定義默認任務

gulp.task('default', ['build', 'watch']);

4.執行任務

在命令行中先轉到gulp-demo目錄下，就能夠輸入gulp命令來運行本項目了，刷新gulp-demo目錄看看會出現什麼結果呢。運行完成後的目錄以下圖：

運行過程當中的消息以下圖所示：

至此，整個gulp教程結束，同時附上gulp手冊。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。