就算萌新也能看得懂的gulp教程（1）：①读文件②修改③写到新文件

1、安装gulp

gulp官网

gulp的安装

核心点是gulp文件的文件名一定是：gulpfile.js。

task就是一个任务（要做的一系列事）

运行通过gulp来执行默认的task或者通过gulp task名来执行指定的task（因为一个gulp文件里可能有多个互相独立的task

2、读取文件

gulp.src(files[, options])

效果：

读取文件，产生数据流。

files的写法（字符串或数组）（必填）：

1. js/app.js：指定确切的文件名；
2. js/*.js：某个目录所有后缀名为js的文件；
3. js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件；
4. !js/app.js：除了js/app.js以外的所有文件。
5. *.+(js css)：匹配项目根目录下，所有后缀名为js或css的文件。

files的写法（对象）（选填）：

官方文档

1、options.buffer

默认是true，以buffer的形式读取（即一次读取整个文件），而改为false的时候则为stream（流）的方式读取。

流模式适合读取大文件，但是一般的html、css、js之类的，可以用buffer读取（但推荐用流）。

假如你需要读取完整个文件，然后对整个文件正则匹配，那么只能用buffer的形式。

2、options.read

默认true，设为false则file.contents返回值为null（不会读取文件）

还有 options.base 以及 node-glob 和 glob-stream 所支持的参数，但是这里略过。

示例：

var gulp = require('gulp');
gulp.task('default', function () {
    gulp.src('a.js')
});

就是这么简单，读取了一个文件

3、拿来一个流，做点事，再把他返回

stream.pipe(fn)

简单来说，通过gulp.src()，我们已经读取了一个文件流，然而我们需要对这个文件流做点事，那么就是pipe的作用了。

1、获取文件流：pipe函数用于处理文件流（来源于上下文），即调用pipe方法的这个对象；

2、处理文件流：pipe接受一个参数，这个参数用于处理这个文件流；

3、返回文件流：这个处理文件流的参数，最后要返回处理后的这个流；

4、连写pipe：因为拿来和最后返回的是同一个东西，因此是可以连写的（就像jQuery选择器选择到DOM后的连写那样）；

先给一个简单的示例吧：

var gulp = require('gulp');
var through = require('through2');
gulp.task('default', function () {
    gulp.src('a.js')
        .pipe(through.obj(function (file, encode, cb) {
            console.log('第一次处理')
            this.push(file)
            cb()
        }))
        .pipe(through.obj(function (file, encode, cb) {
            console.log('第二次处理')
            this.push(file)
            cb()
        }))
});

// 输出
第一次处理
第二次处理

4、对这个文件流做点啥

上面只是简述了pipe干嘛用的，那么现在我们实际用文件流的形式做点什么。

through2模块，用于处理文件流

这个模块干嘛用的，有兴趣的可以看看npm里的through2这个模块，知乎的回答

用这个模块，基本套路很简单：

1、引入 through2 模块；

2、调用他的obj方法，并传一个函数作为参数（这个函数是我们的处理函数）；.pipe(through.obj(callback))

3、写这个callback处理函数；

4、这个callback有三个参数，分别是：file，encode（文件编码，比如'utf8'），cb（继续执行，类似 express 里路由的 next）；

5、我们先对 file 干点啥，然后通过 this.push(file)（这里的file是修改后file）才能继续下面的 pipe，最后执行 cb() 继续下一个 pipe。

基本示例（不对file做点什么）：

var gulp = require('gulp');
var through = require('through2');

gulp.task('default', function () {
    gulp.src('a.js')
        .pipe(through.obj(function (file, encode, cb) {
            console.log(arguments)
            this.push(file)
            cb()
        }))
});

// 输出结果
{ '0': <File "a.js" <Buffer 61 62 63 64 65 66>>,
  '1': 'utf8',
  '2': [Function] }

再给一个在原文件内容后拼接了一个字符串的DEMO：

var gulp = require('gulp');
var through = require('through2');

gulp.task('default', function () {
    gulp.src('a.js')
        .pipe(through.obj(function (file, encode, cb) {
            // 显示当前的文本内容
            console.log(file.contents.toString())
            // 文本内容转为字符串
            var result = file.contents.toString()
            // 添加了一点东西
            result += ' => I add some words here'
            // 再次转为Buffer对象，并赋值给文件内容
            file.contents = new Buffer(result)
            // 以下是例行公事
            this.push(file)
            cb()
        }))
        .pipe(through.obj(function (file, encode, cb) {
            // 显示当前的文本内容（这次显示的是修改后的）
            console.log(file.contents.toString())
            this.push(file)
            cb()
        }))
        // 把文件写到一个新的文件夹里（不影响原有的），目录是modified-files
        .pipe(gulp.dest('modified-files'));
});

// 输出
abcdef
abcdef => I add some words here
并且modified-files/a.js文件里的内容是修改后的内容

讲道理说，懂以上方法，已经可以解决很多问题了。

无非就是读取文件，转为字符串，改改改，变为Buffer对象赋值回去，写到一个新的文件夹里（原文件名不变）