gulp思考
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)操作还要看机器自身情况。
npm原生的那种类似于unix的管道符构建方式也是不错的选择。
