程序员的工作效率往往高于平均值，究其原因，程序员的「懒惰」帮了大忙，哪怕是简单的重复性工作，他们也要用程序实践。「程序员的利器」系列文章巡礼那些能提高开发/工作效率的工具，帮你在职场/生活中节约时间。

在工作中，我们经常会遇到工作流（workflow）的概念，比如当我们写完前端代码时，总希望它们能被编译压缩，在测试项目时，总希望浏览器能刷新。Gulp 可以帮助我们自动完成这些流式的工作。

当然 Gulp 能做的远不止于此，当我在写这篇文章时，我的工作路径是按照月份和周划分，但是我们文章最后要被放入指定目录上传到 GitHub（是的，LeetCode 用 GitHub 进行内容创作和整理），为了避免每次都要手动复制和出现内容调整时两份文件不统一的情况，我使用 Gulp 监指定目录下所有的 Markdown 文件，一旦出现变化，将当前变化同步至 GitHub 仓库目录。

Gulp 的安装

Gulp 基于 Node.js，如果你还没安装，请在 Node 官网 下载。安装完成后在终端输入 node -v，如果出现版本号，证明安装成功。

要安装 Gulp 首先要进行全局安装，在终端输入 npm install --global gulp 即可，--global 属性表示在全局范围进行安装，也可用 -g 缩写。

如果要在指定的项目或目录下使用 Gulp 还需进入该路径，在终端输入 npm install --save-dev gulp 安装。如果没有初始化 node，要先输入 node -init 进行初始化。

在项目根目录下创建 gulpfile.js 文件，该文件就是 Gulp 的主文件。以下的内容都基于该文件。

创建 Gulp 任务

首先要引入 Gulp 模块（这里基于 CommonJS ）：

使用gulp.task方法添加任务：

在命令行输入 gulp hello 测试。

Gulp 内置的方法屈指可数，最常用的包括 gulp.task(name[, deps], fn)，用来创建任务。第一个参数是一个字符串，用来指定任务的名字，如上例中的 hello，第二个参数用于指定任务的依赖，用数组存储其他的任务的名字，当前的任务会在依赖项都执行完成之后执行。第三个参数是一个函数，制定当前任务要做的事情。

在任务函数内，我们一般要先选取指定的单个或多个文件，然后构建流。比如：

通过 gulp.src(globs[, options]) 获取指定文件，在这里是所有当前目录下 images 目录下的 jpg 图像。这里 src 的第一个参数使用了 node-glob 语法（一个类似于正则的语法规则，可以快速选定多个文件），你可以查看这个链接了解更多。

在 gulp.src() 方法中可以传入一个数组，数组内包含多个 globs，如 gulp.src(['images/*', 'json/*.json'])，在 glob 前加一个 ! ，表示排除特定文件。

之后通过 .pipe() 方法构建工作流。.pipe() 的意思可以理解成要要把当前取得的结果放到一个管道里，在一个接一个的管道里进行一系列操作。

上例中 gulp.dest(path[, options]) 用于复制文件到指定路径。

有时候我们需要监听文件，在文件发生改动时候做一些事情。这时 gulp.watch(glob [, opts], tasks) 就能派上用场。例如：

让 gulp 监听 scss 目录下所有的 .scss 文件，一旦发生变动（如更改，添加），自动执行这个叫sass的任务。

Gulp 插件

Gulp 内置的功能很少，为了扩展功能满足需求，我们经常会使用到插件，你可以在此查找你想要的插件。

插件的安装和使用方式都比较类似，这里以编译 Less 的插件 gulp-less 为例：

1. 安装：命令行 -> 进入项目所在目录 -> sudo npm install gulp-less --save-dev

2. 在 gulpfile.js 中引入 gulp-less 插件

3. 创建任务，将 stylesheets 文件夹下所有 less 文件通过插件编译，在复制到 statics/css 目录下：

其他常用的插件包括：

创建本地服务器的 gulp-connect合并文件的 gulp-concat最小化 JS 文件的 gulp-uglify重命名文件的 gulp-name优化图像大小的 gulp-imagemin...

总结

Gulp 能实现的功能很多，通过插件也能做很多 DIY，比如在文章开篇提到的同步文章的工具，其代码如下：

其中 gulp-flatten 是一个清除目录结构，只保留文件本身的插件。

当你的工作和生活中出现重复性劳动时，不妨想想 Gulp 能不能解决这个问题。