gulp尝鲜

gulp 简介

“gulp是一种基于流的，代码优于配置的新一代构建工具。”

“gulp和grunt类似，但是相比较grunt的频繁io操作，gulp流操作，能更快的完成构建”

目前gulp在github上的start数量已经超过grunt，gulp给我最直接的感觉只有一个，简单

gulp 三分钟上手

经常使用的gulp插件有: gulp-uglify, gulp-clean, gulp-rename等等，这里举一个uglify的简单例子

新建文件夹gulpDemo
初始化

cd demo
npm init
npm i gulp --save-dev
npm i gulp-uglify --save-dev
touch gulpfile.js

编写gulpfile.js文件

var gulp = require('gulp')
var uglify = require('gulp-uglify');

gulp.task('uglify', function() {
  gulp.src('src/js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js'));
});

运行

1	gulp uglify

该操作会将src/js/所用的.js文件压缩，然后放到dist/js文件夹下

gulp流何为流

“gulp是基于流进行操作的，整个插件都是通过pipe()函数来赋予。gulp插件每次读取和返回都是一个object mode流，

使用gulp.src()读取文件时，就会转换成viny File的格式。

插件读入viny File objects，然后在输出viny File objects。一般我们叫它transform stream。”

vinyl File Content

* vinyl通常有三种形式来展现内容：Stream，Buffer，Empty。
* 一般的插件都支持Buffer，当然最好是两者都支持。但是由于某些操作，例如js压缩等，用stream对content进行操作很困难，因为这个需要对全局的content有个掌握才能进行压缩，不然会出问题的。所以当进行的操作需要对全局有所掌握才能进行的，最好使用Buffer。

vinyl File是怎么样的

var File = require('vinyl');

var coffeeFile = new File({
  cwd: "/",
  base: "/test/",
  path: "/test/file.coffee",
  contents: new Buffer("test = 123")
});

每个File都有个cwd、base、path、contents属性。当插件进行操作时就是封装成一个transform stream。

through2

through2这个库实现了对node stream的简单封装，对于生成一个双工的stream很方便。因为gulp采用的是object mode，所以直接调用through.obj()就ok了。

gulp 自定义插件

pipe()操作看起来非常的show，了解了一下vinyl原理之后，自己尝试着写了个一个“插件”

接着上面三分钟上手的内容

安装依赖

* through2 用于生成一个双工的stream
* gulp-util Utility functions for gulp plugins

1 2	npm i through2 --save-dev npm i gulp-util --save-dev

新建plugin.js

编写plugin.js

var through = require('through2');
var gutil = require('gulp-util');
var fs = require('fs');
var path = require('path');
var PluginError = gutil.PluginError;
var templates = {};
const PLUGIN_NAME = 'gulp-rename-demo';

function gulprename() {
  return through.obj(function(file, enc, cb) {
    if(file.isNull()) {
      cb(null, file);
    }
    if(file.isBuffer()) {
      var extname = path.extname(file.path);
      file.path = gutil.replaceExtension(file.path, '.demo' + extname);
    }
    if(file.isStream()) {
      return cb(new gutil.PluginError(PLUGIN_NAME,
        'Streaming not supported'));
    }
    cb(null, file);
  });
}
module.exports = gulprename;

代码参考了gulp-hbs,感兴趣的同学可以看下[gulp-hbs](https://github.com/philmander/gulp-hbs)源码

理解上面代码只需要理解一下几点：
    1. through.obj() 用于生成一个双工的stream
    2. pipe操作会传递三个参数：`file`  `enc`  `cb`
         file   file.path 记录了文件的绝对路径 file.content 文件buffer
         enc    编码，一般都是'utf-8'
         cb     function(err, chunk)，正确处理完成后cb(null, file), 出现错误cb(err)

使用

var gulp = require('gulp');
var renameDemo = require('./gulpPluginDemo');
gulp.task('rename', function() {
  gulp.src('src/js/*.js').pipe(renameDemo()).pipe(gulp.dest('dist/js'));
});

运行

1	gulp rename

该操作将`src/js`目录下所有的js文件rename为.min.js放到`dist/js`目录下

参考牛博

gulp流为何流
 gulp recipes(一份很好的教程，都配有demo，在我看来就是关于gulp常见操作的最佳实践)
gulp documentation