精益 React 學習指南（Lean React）- 2.3 gulp 詳情 - leanreact,react,前端工程化,前端,gulp 陳學家_6174 博客

書籍完整目錄

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 能夠解決哪些問題

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

文件清理 (gulp-clean)
文件拷貝 (gulp-copy)
文件轉換（gulp-webpack）
文件合併（gulp-concat)
文件壓縮（gulp-minify)
文件服務（gulp-connect)
文件監控（gulp-watch)
css 相關
- less，sass 轉換 (gulp-less ，gulp-sass)
- css 自動添加前綴 (gulp-autoprefixer)
js 相關
- jslint (gulo-eslint)
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 來解決此問題：

gulp.parallel : 並行執行
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/'))
}

陳學家_6174 博客

陳學家_6174 博客

博客 / 詳情