Gulp介绍与入门实践

Gulp，一个基于流的构建工具。

这是自己写的一个构建的demo，只是一个纯演示的示例，并没有完成什么项目工作。下面根据这个demo介绍一下Gulp。

上代码：

gulpfile.js

'use strict';

/**
 *  环境
 */

const env = process.argv.slice(6)[0] || 'development';
process.env.NODE_ENV = env;
const isDev = env == 'development';

/**
 *  依赖
 */
const browserSync = require('browser-sync');
const reload = browserSync.reload;

const watchify = require('watchify');
const browserify = require('browserify');
const babelify = require('babelify');
const envify = require('envify/custom');

const del = require('del');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const gulp = require('gulp');
const $ = require('gulp-load-plugins')();

/**
 * path
 */
const pathConf =  require('./path.js');
const path = pathConf.path;
const filePath = pathConf.filePath;

/**
 * browserify & watchfy
 */
// browserify conf
const customOpts = {
    entries: ['./src/main.js'],
    debug: true
};

// watchfy conf
const opts = Object.assign({}, watchify.args, customOpts);
// init watchfy
const browserify_watch = watchify(browserify(opts));
browserify_watch.transform(babelify, {
    presets: ["es2015", "stage-2"],
    plugins: ["transform-runtime"]
});
browserify_watch.transform(envify({
    NODE_ENV: env
}));

function jsBundler (ids){
    return browserify_watch
        .bundle()
        .on('error', $.util.log)
        .pipe(source("build.js"))
        .pipe(buffer())
        .pipe($.if(isDev, $.sourcemaps.init({loadMaps: true})))
        .pipe($.uglify())
        .pipe($.if(isDev, $.sourcemaps.write(".")))
        .pipe(gulp.dest(path.dist))
}

browserify_watch.on('update', jsBundler);
browserify_watch.on('log', $.util.log);

/**
 * gulp task
 */
gulp.task('cleanAll', () => {
    del([
        path.temp + '**/.{html.js.css}',
        path.dist + '**/.{html.js.css}',
        '!' + path.dist + 'video/**'
    ]);
});

gulp.task('serve', () => {
    browserSync({
        server: {
            // proxy: 'xx.xx.xx.xx',
            baseDir: __dirname
        }
    });
});

gulp.task('jsBundle', jsBundler);

gulp.task('less', () => {
    return gulp.src(filePath.src_less)
        .pipe($.less())
        .on("error", function (error){
            $.util.log(error);
            this.emit("end");
        })
        .pipe(gulp.dest(path.temp + 'css/'));
});

gulp.task('cssBundle', ['less'], () => {
    return gulp.src([filePath.temp_css])
        .pipe($.if(isDev, $.sourcemaps.init({loadMaps: true})))
        .pipe($.concat('build.css'))
        .pipe($.minifyCss())
        .pipe($.if(isDev, $.sourcemaps.write('.')))
        .pipe(gulp.dest(path.dist));
});

gulp.task('watchLess', () => {
    gulp.watch([filePath.src_less], ['cssBundle']);
});

gulp.task('watchDist', () => {
    gulp.watch(['index.html', path.dist + '*.*'], reload);
});

/**
 * cli
 * '$ gulp build' for development
 * '$ npm run dev' for development
 * '$ npm run pro' for production
 */
gulp.task('build', $.sequence(
      'cleanAll'
    , ['jsBundle', 'cssBundle']
    , ['watchLess', 'watchDist']
    , 'serve'
));

package.json

{
  "name": "gulp",
  "description": "gulp",
  "author": "james",
  "scripts": {
    "dev": "gulp build --gulpfile gulpfile.js --env development",
    "pro": "gulp build --gulpfile gulpfile.js --env production"
  },
  "dependencies": {
    "jquery": "^3.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-stage-2": "^6.17.0",
    "babel-preset-stage-3": "^6.17.0",
    "babel-runtime": "^6.11.6",
    "babelify": "^7.3.0",
    "browser-sync": "^2.17.3",
    "browserify": "^13.1.0",
    "del": "^2.2.2",
    "envify": "^3.4.1",
    "gulp": "^3.9.1",
    "gulp-changed": "^1.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-debug": "^2.1.2",
    "gulp-filter": "^4.0.0",
    "gulp-if": "^2.0.1",
    "gulp-inject": "^4.1.0",
    "gulp-jshint": "^2.0.1",
    "gulp-less": "^3.1.0",
    "gulp-load-plugins": "^1.3.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev-all": "^0.9.7",
    "gulp-sequence": "^0.4.6",
    "gulp-sourcemaps": "^2.0.1",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.7",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  }
}

文件结构如下：

结构说明：

main.js 为入口文件

path.js 定义了一些路径变量

src 文件夹存放原始代码

dis 文件夹存放打包后的代码

temp 文件夹存放零食文件

通过browserify转译commjs和es6语法，通过gulp-less转译less语法，把转译后的文件输出到dist文件夹。

下面通过一些主要代码介绍一下Gulp的工作方式：

先看这段代码：

function jsBundler (ids){
    return browserify_watch
        .bundle()
        .on('error', $.util.log)
        .pipe(source("build.js"))
        .pipe(buffer())
        .pipe($.if(isDev, $.sourcemaps.init({loadMaps: true})))
        .pipe($.uglify())
        .pipe($.if(isDev, $.sourcemaps.write(".")))
        .pipe(gulp.dest(path.dist))
}

它主要是在watchify监听到依赖的js文件有变动之后，会自动调用的一个回调函数。函数内部实现步骤为：

1.通过browserify以main.js为入口文件，打包依赖的所有js，并通过browserify的es2015预设插件来转译es6语法。最后将生成的流通过管道传输给vinyl-source-stream这个插件

2.普通流通过vinyl-source-stream处理以后再传输给vinyl-buffer

3.vinyl-buffer处理以后的流再传输给gulp-sourcemaps插件(如果环境条件判断通过的话)，生成原始文件和打包后的文件映射关系(便于调试)

4.再传输给gulp-uglify插件进行压缩和混淆

5.输出soucemap

6.输出打包后的js文件到dist文件夹

看到这个流程不免有些疑问：为啥browserify传输出流不能直接给gulp插件使用呢，要先通过vinyl插件的系列处理才可以？

原因是：browserify处理后输出的流只是普通的node.js流，gulp的插件需要的是经过处理的vinyl流。vinyl可以把普通的node.js的流转换为Vinyl File Object Stream。这样，相当于把普通的流接入到了Gulp的处理体系内。如果需要完整流，可以通过vinyl-buffer插件接收完整个流转成二进制数据以后再进行处理，通常gulp-soucemaps、gulp-uglify这些需要完整文件进行映射或者替换的插件都需要buffer一次。否则在任务运行的时候会报流不支持的错误：

vinyl流的特点是它是Object风格的，除了流的内容content，还有path等属性。记录了文件的内容和文件名、文件路径的信息。

一个很好的例子可以解释为什么需要这样：

gulp.task("css", () => {
    gulp.src("./src/**/*.css")
        .pipe(gulp.dest("./dist/css/"));
});

这个Gulp任务很简单，就是把src文件夹下面所有的css(无论子文件夹层级)都'搬运"到./dist/css/这个路径下。任务执行结果当然表明这是一次成功的搬运。

单仔细看看不难发现一个蹊跷的事情：./src/下的文件夹是不定的，可以是很多层，也可以只有一层，每个css文件可以是任何名字，那么在dest到./dist/css/还能对应上文件夹层级和文件名，这是怎么做到的呢？

其实就是通过vinyl流(对象)的path那些属性来知道文件夹层级和文件名的。普通的node.js流只传输String或Buffer类型，也就是只关注content。

Gulp不只用到了文件的内容，而且还用到了这个文件的相关信息。因此，vinyl流就会有contents、path这样的多个属性了。

但是Gulp本身并不能直接生成vinyl流对象，而是依赖了一个叫做vinyl-fs的node模块，这是一个类似于文件适配器的模块。它提供三个方法：.src()、.dest()和.watch()，其中.src()将生成vinyl流对象，而.dest()将使用vinyl流，进行写入操作。

在Gulp的包中可以看到源码：

var vfs = require('vinyl-fs');

// ...

Gulp.prototype.src = vfs.src;
Gulp.prototype.dest = vfs.dest;

// ...

可以看到gulp的src和dest方法其实就是vinyl-fs的src和dest方法。

深入探究之后可以发现这么一条依赖关系：gulp -> vinyl-fs ->vinyl -> glob-stream -> node-glob

从gulp.src开始到gulp.dest结束这一系列的工作流程大概是这样的：

　　首先通过node-glob来匹配路径和文件，然后glob-stream把匹配到的文件流式读取, 再通过vinyl输出Gulp体系需要用到的vinyl流对象，src完成工作后 流被pipe下去，直到gulp.dest时候，通过先前已知的文件路径和文件名进行写入操作。

如果是从webpack/browserify的普通流开始，会有它们自己的一套文件流失读取方式和输出，只要通过vinyl改造后输出vinyl流对象就能接入进Gulp体系。

值得注意的是：写入是一个异步的操作。任务结束以后，不一定表示文件已经全部写入！

Gulp比起Grunt更具的node.js风格， 而且其依赖的orchestrator的特性就是最大并发的执行任务。在提供了大并发和node.js异步操作特性的同时也带来了不好的一点：链式任务不好控制。

这也是为什么build这个task是通过gulp-sequence来严格按照既定顺序执行的(通过返回流和其他异步处理的方式也可以达到效果)：

gulp.task('build', $.sequence(
      'cleanAll'
    , ['jsBundle', 'cssBundle']
    , ['watchLess', 'watchDist']
    , 'serve'
));

我们一定不会希望这类事情发生：一边写入文件一边又在删除；下一个任务需要上个任务提供必要文件，但在执行的时候文件还没有写入完；等等....

Gulp常被用于和老前辈Grunt相比较，一般都说Gulp的速度快，这其实只是Gulp基于管道流的处理速度相对于Grunt不停地生成临时文件要快。读取和写入(I/O)操作还要看机器自身情况。

Gulp意为"狼吐虎咽"，即拥有基于流的快速与支持高并发的特性。