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

﹏ヽ暗。殇╰゛Y 2022-06-06 04:54 457阅读 0赞

### 1、安装gulp ###

[gulp官网][gulp]

[gulp的安装][gulp 1]

核心点是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的写法（对象）（选填）：

[官方文档][Link 1]

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后的连写那样）；

先给一个简单的示例吧：

### 4、对这个文件流做点啥 ###

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

> through2模块，用于处理文件流

这个模块干嘛用的，有兴趣的可以看看[npm里的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做点什么）：

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

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

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

[gulp]: http://www.gulpjs.com.cn/
[gulp 1]: http://www.gulpjs.com.cn/docs/getting-started/
[Link 1]: http://www.gulpjs.com.cn/docs/api/
[npm_through2]: https://www.zhihu.com/question/39391770