gulp 简介

“gulp是一种基于流的,代码优于配置的新一代构建工具。”
“gulp和grunt类似,但是相比较grunt的频繁io操作,gulp流操作,能更快的完成构建”
目前gulp在github上的start数量已经超过grunt,gulp给我最直接的感觉只有一个,简单
gulp 三分钟上手
经常使用的gulp插件有: gulp-uglify, gulp-clean, gulp-rename等等,这里举一个uglify的简单例子
新建文件夹gulpDemo
初始化
1 | cd demo |
- 编写gulpfile.js文件
1 | var gulp = require('gulp') |
- 运行
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是怎么样的
1 | var File = require('vinyl'); |
每个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 | npm i through2 --save-dev |
- 新建plugin.js
- 编写plugin.js
1 | var through = require('through2'); |
代码参考了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)
- 使用
1 | var gulp = require('gulp'); |
- 运行
1 | gulp rename |
该操作将`src/js`目录下所有的js文件rename为.min.js放到`dist/js`目录下
参考牛博
gulp流为何流
gulp recipes(一份很好的教程,都配有demo,在我看来就是关于gulp常见操作的最佳实践)
gulp documentation