精益 React 學習指南 （Lean React）- 2.3 gulp

書籍完整目錄

2.3 Gulp

在前端工程化中最重要的就是流程管理，借用 gulp 能夠很方便的基於流的方式定義流程任務，並將任務串聯起來，本節中將詳細介紹 gulp ，包括：

• gulp 介紹

  • gulp 是什麼

  • gulp 可以解決哪些問題

  • gulp 核心思想和特色

• gulp 安裝

• gulp 配置和 API 使用

• gulp 增量 build

2.3.1 Gulp 介紹

The streaming build system , Automate and enhance your workflow

Gulp 是一個基於 Node.js 的開源前端工做流構建工具，目前最新的版本爲 3.9.1 ，最新的維護分支已經到了 4.0，更具體一下 Gulp 是：

• 自動化工具：Gulp 幫助解決開發過程當中的流程任務自動化問題

• 平臺無關工具：Gulp 被集成進了大多數的 IDE 中，能夠在 PHP, .NET, Node.js, Java 和其餘的一些平臺上使用 Gulp

• 構建生態系統：Gulp 擁有完整的插件生態，到目前爲止，在 npm.js 上能夠搜索到 13589 results for ‘gulp-’ ，基於這些插件幾乎能夠完整全部的前端構建任務。

咱們將使用最新的版本 4.0 來配置 React 的前端工程中。

Gulp 核心思想和特色

• 流： Gulp 的設計核心是基於流的方式，將文件轉化爲抽象的流，而後經過管道的方式將任何串聯起來，基於流的方式讓任務處理都保存在內存當中，沒有臨時文件，可以提高構建的性能。

• 基於代碼的任務配置： 在 Gulp 以前，咱們熟悉的任務構建工具是 Grunt，在 Grunt 的中，全部的任務都是基於配置的方式，而後 Gulp 的方式並不是配置，而是經過提供極簡的 API ，以代碼的方式定義任務，這樣在靈活性上極大的提高。

• 簡潔的 API： Gulp 在 API 的設計上極其簡潔，極大的下降學習成本，同時在使用上會很是方便。

• 簡單語義化的任務模塊： Gulp 的任務以插件的方式完成，插件的任務功能單一，而且語義化，讓工做流的定義更加直觀，易讀。

• 效率： 在 Gulp 中任務會盡量的併發執行

Gulp 可以解決哪些問題

一般的一個前端構建流程包括：

1. 文件清理 (gulp-clean)

2. 文件拷貝 (gulp-copy)

3. 文件轉換 （gulp-webpack）

4. 文件合併 （gulp-concat)

5. 文件壓縮 （gulp-minify)

6. 文件服務 （gulp-connect)

7. 文件監控 （gulp-watch)

8. css 相關

   • less，sass 轉換 (gulp-less ，gulp-sass)

   • css 自動添加前綴 (gulp-autoprefixer)

9. js 相關

   • jslint (gulo-eslint)

10. html 轉換

    • html 模板 (gulp-jade，gulp-ejs)

    • html prettify

    • html validator

    • html minifier

這些構建任務在 Gulp 中均可以利用插件很容易的配置出來

一個 Gulp 配置示例

Gulp 經過定義 gulpfile.js 配置文件的方式定義流程，gulp.js 會經過調用 Node.js 來執行

一個簡單的流程定義文件爲：

var gulp = require('gulp');
var less = require('gulp-less');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
var del = require('del');

var paths = {
  styles: {
    src: 'src/styles/**/*.less',
    dest: 'assets/styles/'
  },
  scripts: {
    src: 'src/scripts/**/*.js',
    dest: 'assets/scripts/'
  }
};

/**
 * 並不是全部的任務都是基於流，例如刪除文件
 * 一個 gulpfile 只是一個 Node 程序，在 gulpfile 中可使用任何 npm 中的模塊或者其餘 Node.js 程序
 */
function clean() {
  // del 也能夠和 `gulp.src` 同樣能夠基於模式匹配的文件路徑定義方式 
  return del([ 'assets' ]);
}

/*
 * 經過 Javascript 函數的方式定義任務
 */
function styles() {
  return gulp.src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    // 傳遞一些配置選項到 stream 中
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.styles.dest));
}

/**
 * 編譯 coffee 文件，而後壓縮代碼，而後合併到 all.min.js
 * 並生成 coffee 源碼的 sourcemap
 */
function scripts() {
  return gulp.src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}

/**
 * 監控文件，當文件改變事後作對應的任務
 * @return {[type]} [description]
 */
function watch() {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
}

/*
 * 使用 CommonJS `exports` 模塊的方式定義任務
 */
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;

/*
 * 肯定任務是以並行仍是串行的方式定義任務
 */
var build = gulp.series(clean, gulp.parallel(styles, scripts));

/*
 * 除了 export 的方式，也可使用 gulp.task 的方式定義任務
 */
gulp.task('build', build);

/*
 * 定義默認任務，默認任務能夠直接經過 gulp 的方式調用
 */
gulp.task('default', build);

2.3.2 Gulp 安裝

$ cd your-project

// 安裝最新版本的 gulp-cli
$ npm install gulpjs/gulp-cli -g

// 安裝最新版本的 gulp 4.0
$ npm install gulpjs/gulp.git#4.0 --save-dev

// 檢查 gulp 版本
$ gulp -v

---
[10:48:35] CLI version 1.2.1
[10:48:35] Local version 4.0.0-alpha.2

2.3.3 Gulp 配置與 API

任務定義

定義任務有兩種方法

第一種方法爲 Node.js 模塊 exports 的方式:

function someTask() {
   ...
}
exports.someTask = SomeTask

第二種方法爲調用 gulp.task API 的方式

function someTask() {
   ...
}

// api 定義方式 1
gulp.task('someTask', someTask)

// ap1 定義方式 2
gulp.task(function someTask() {
    ...
});

// 獲取
var someTask = gulp.task('someTask')

任務內容

一般一個任務會以以下方式定義

function someTask() {
    return  gulp.src(...)            // 流的輸入
                .pipe(someplugin())  // 插件處理流
                .pipe(someplugin2()) // 插件處理流
                .dest(...)           // 輸出流
 }

任務的異步

task 的執行時異步的，能夠基於回調函數 或 promise 或 stream 等方式

回調函數

var del = require('del');
// 傳入 done  回調函數
gulp.task('clean', function(done) {
  del(['.build/'], done);
});

返回流

gulp.task('somename', function() {
  return gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
});

返回 Promise

var Promise = require('promise');
var del = require('del');

gulp.task('clean', function() {
  return new Promise(function (resolve, reject) {
    del(['.build/'], function(err) {
      if (err) {
        reject(err);
      } else {
        resolve();
      }
    });
  });
});

返回子進程

gulp.task('clean', function() {
  return spawn('rm', ['-rf', path.join(__dirname, 'build')]);
});

返回 RxJS observable

var Observable = require('rx').Observable;

gulp.task('sometask', function() {
  return Observable.return(42);
});

流的入口 gulp.src

/**
 * @param globs [String | Array]
 * @param options [Object {
 *          // 默認: process.cwd()
 *          // 描述: 工做目錄
 *          cwd: String,   
 *          
 *          // 默認：在模式匹配以前的路徑 a/b/ ** / *.js 路徑爲 a/b/
 *          // 描述：gulp.dest 目錄會添加 base 目錄
 *          base: String | Number,
 *          ...
 * }]
 */
gulp.src(globs[, options])

gulp.src 方法是流的入口，方法的方法返回的結果爲一個 Vinyl files 的 node stream ，能夠被 piped 到別的插件中。

gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/minified_templates'));

匹配模式

gulp.src 的參數 globs 中的 glob 是一種匹配模式，可使用 **，* 這些通配符來匹配文件，globs 參數能夠爲一個 glob 匹配字符串，也能夠是 glob 匹配字符串數組

假定咱們的項目目錄結構以下：

.
└── src
    ├── d1
    │   ├── d1-1
    │   │   └── f1-1-1.js
    │   └── f1-1.js
    ├── f1.js
    ├── f2.js
    └── f3.js

下面是一些匹配的示例：

src/*.js

匹配結果：

src/f1.js src/f2.js src/f3.js

匹配策略：

匹配 src 一級目錄下面的全部 js 文件，同

$ ls src/*.js

* 表示匹配文件名稱中的 0 個或者多個字符，* 不匹配 . 開頭的文件

src/**/*.js

匹配結果：

src/d1/d1-1/f1-1-1.js src/d1/f1-1.js        src/f1.js             src/f2.js             src/f3.js

匹配策略：

匹配 src 下面的全部 js 文件，同

$ ls src/**/*.js

** 表示匹配全部子目錄和當前目錄，不包括 symlinked 的目錄 (若是要包含須要 options 中傳入 follow: true)

src/{d1/*.js,*.js}

匹配結果：

src/d1/f1-1.js src/f1.js      src/f2.js      src/f3.js

匹配策略：

匹配 src/d1 一級目錄下面的 js 和 src 一級目錄下面的 js，同：

$ ls src/{d1/*.js,*.js}

{} 內添加 , 能夠分割多個匹配

其餘匹配模式

• [...]: 同正則表達式中的中括號，匹配其中的任意字符，若是字符的開頭包好爲 !或^ 表示不匹配其中的任何字符

• !(pattern|pattern|pattern): 匹配任意不知足其中的文件

• ?(pattern|pattern|pattern): 匹配 0 個或者 1 個

• +(pattern|pattern|pattern): 匹配 1 個或者多個

• *(pattern|pattern|pattern): 匹配 0 個或者多個

• @(pattern|pattern|pattern): 匹配 1 個

gulp 的匹配使用了 node-glob 更多匹配模式可參考 https://github.com/isaacs/node-glob , gulp.src 還能夠經過傳遞 options 配置 glob 的匹配參數，

流的出口 gulp.dest

/**
 * @param path [String]
 * @param options [Object {
 *          // 默認: process.cwd()
 *          // 描述: 若是提過的 output 目錄是相對路徑，會將 cwd 做爲 output 目錄
 *          cwd: String,   
 *          
 *          // 默認：file.stat.mode
 *          // 描述：文件的八進制權限碼如 "0744", 若是沒有回默認進程權限
 *          mode: String | Number,
 *          
 *          // 默認：process.mode
 *          // 描述：目錄的八進制權限碼
 *          dirMode: String | Number,
 *
 *          // 默認：true
 *          // 描述：相同路徑若是存在文件是否要被覆蓋
 *          overwrite： Boolean
 *          ....
 * }]
 */
gulp.dest(globs[, options])

gulp.dest 能夠理解爲流的出口，會基於傳入的 path 參數和流的 base 路徑導出文件。

// 匹配 'client/js/somedir/somefile.js'   

// base 爲 client/js
// 導出 爲 'build/somedir/somefile.js'
gulp.src('client/js/**/*.js')
  .pipe(minify())
  .pipe(gulp.dest('build'));  

// base 爲 client
// 導出 爲 'build/js/somedir/somefile.js'
gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 'build/js/somedir/somefile.js'

任務的並行與串行

在工做流管理中，有些任務須要串行執行，有些任務可能須要並行執行，Gulp 提供了兩個 API 來解決此問題：

1. gulp.parallel : 並行執行

2. gulp.series: 串行執行

eg:

gulp.task('one', function(done) {
  // do stuff
  done();
});

gulp.task('two', function(done) {
  // do stuff
  done();
});

// 並行任務，任務執行完成能夠添加回調函數
gulp.task('parallelTask', gulp.parallel('one', 'two', function(done) {
  done();
}));

// 串行任務
gulp.task('seriesTask', gulp.series('one', 'two', function(done) {
  done();
}));

文件監控

gulp 提供的文件監控 API： gulp.watch

/**
 * @param globs [String | Array] 須要監控的文件 globs 
 * @param opts [Object]  https://github.com/paulmillr/chokidar 的配置參數，
 */
gulp.watch(globs[, opts][, fn])

使用示例:

var watcher = gulp.watch('js/**/*.js', gulp.parallel('concat', 'uglify'));
watcher.on('change', function(path, stats) {
  console.log('File ' + path + ' was changed');
});

watcher.on('unlink', function(path) {
  console.log('File ' + path + ' was removed');
});

2.3.4 gulp 增量 build

每次執行構建任務的時候，爲了減小構建時間，能夠採用增量構建的方式，在 Gulp 中，能夠利用一些插件過濾 stream，找出其中修改過的文件。

• gulp-changed

• gulp-newer

以 gulp-newer 爲例:

function images() {
  var dest = 'build/img';
  return gulp.src(paths.images)
    .pipe(newer(dest))  // 找出新增長的圖像
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest(dest));
}

在某些狀況過濾掉 stream 事後還須要還原原來的 stream ，好比文件 transform 事後還須要文件合併，這種時候能夠利用一下這兩個插件：

• gulp-cached

• gulp-remember

function scripts() {
  return gulp.src(scriptsGlob)
    .pipe(cache('scripts'))         // 和 newer 相似，過濾出改變了的 scripts
    .pipe(header('(function () {')) // 文件添加 header
    .pipe(footer('})();'))          // 文件添加 footer
    .pipe(remember('scripts'))      // 找出全部的 scripts
    .pipe(concat('app.js'))         // 將全部文件合併
    .pipe(gulp.dest('public/'))
}