前端构建工具 Gulp.js 上手实例

在软件开发中使用自动化构建工具的好处是显而易见的。经过工具自动化运行大量单调乏味、重复性的任务，好比图像压缩、文件合并、代码压缩、单元测试等等，能够为开发者节约大量的时间，使咱们可以专一于真正重要的、有意义的工做，好比设计业务逻辑，编写代码等等。

对不少前端开发人员而言，Grunt 无疑是这方面的首选。基本上，若是你会用 JavaScript ，那么在一个名为 Gruntfile.js （或者 Gruntfile）的文件中用 Javascript 语言定义自动化任务是很是简单的过程，同时大量的 第三方插件 例如 JSHint, Sass 以及 Uglify 也使得 Grunt 具备了良好的可扩展性。

大多数状况下，Grunt 一直是前端构建工具的首选。可是最近一个名为 Gulp.js 的新工具正在吸引愈来愈多的人的关注。相比 Grunt, 它具备可读性更强、更利于理解的配置文件，更简单地配置过程。

接下来咱们就一块儿来看看如何安装 Gulp, 并经过一个简单的案例让你感觉一下这个新的构建工具。

---

安装 Gulp.js

Gulp.js 是基于 Node 的构建工具，相似 Grunt, 要使用它，你的机器上须要装有 Node.js。有关如何安装 Node, 这里就再也不赘述，能够参考官网的指导。若是你以前彻底不了解 Node.js, 能够参考一下 Nettuts+ 上面的系列教程。 有了 Node.js, 安装 Gulp.js 就很是容易了，只须要经过 npm (Node 包管理工具) 来安装便可。在命令行模式下执行：

npm install -g gulp

这样就能够将 gulp 以全局方式安装到你的电脑上，之后能够随时经过命令行的 gulp 命令来调用。

---

在前端项目中配置 Gulp.js

要在你的项目中使用 Gulp, 有几个关键的步骤须要完成：

• 安装两个依赖包
• 安装你须要的任意插件
• 建立 gulpfile.js 文件，在其中定义你要运行的任务

这些步骤须要在你的项目根目录下完成。

首先，要安装依赖项：

npm install --save-dev gulp gulp-util

接下来，安装咱们须要使用到的 Gulp 插件，这些插件一样也都是 Node 模块，咱们一样使用 npm 命令来安装它们：

npm install --save-dev gulp-uglify gulp-concat

在上面的例子中，安装了两个插件 gulp-uglify 和 gulp-concat, 经过它们能够对 Javascript 文件进行合并和压缩。

注意这里使用了 --save-dev 参数来安装 Gulp 依赖和插件，加上这个参数之后，在安装这些包的同时，也会把它们添加到咱们的包配置文件 package.json:

{
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-concat": "^2.2.0",
    "gulp-uglify": "^0.2.1",
    "gulp-util": "^2.2.14"
  }
}

这样能够确保项目所需的依赖包能够便捷地经过 npm 来进行安装。 若是你的项目没有 package.json 文件，能够在命令行经过 npm init 来建立， 也能够经过文本编辑器建立。这是 npm 相关的知识，这里就不细说了。

在前面的例子中，只安装了两个插件，Gulp 提供了超过 200 个插件, 涵盖了前端开发流程中的不少工做，包括但不限于：

• LiveReload (gulp-livereload)
• JSHint (gulp-jshint)
• Sass (gulp-sass)
• CoffeeScript file compilation (gulp-coffee)

还有不少，能够到 Gult plugins 进行搜索。

---

Gulpfile.js 文件

与 Grunt 同样， Gulp 也有一个同名配置文件，叫作 gulpfile.js, 在这个文件里定义须要用到什么插件，执行什么任务，如何执行等等。 这个文件应该存放在你的项目根目录下。

到目前为止，一切看起来都和 Grunt 没什么区别，那么为何要介绍 Gulp 呢？接下来就是它的优点所在了。 gulpfile.js 的语法很是简单直接，具备很是好的可读性，便于理解。看一下例子：

var gulp=require('gulp'),
    gutil=require('gulp-util'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');

这就是一条很是简单的 Javascript 变量定义语句，它告诉 Gulp 咱们须要哪些插件来完成下面的任务定义。

接下来，咱们要定义须要 Gulp 去运行的任务。在这个例子中，须要 Gulp 去完成两件事：

• 压缩 Javascript 文件
• 合并 Javascript 文件

在 Gulp 中，定义任务很是直接，就是调用 Javascript 的方法。咱们经过 Gulp 提供的 task() 方法来定义任务：

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

看一下上面的代码，gulp.task(name, callback) 方法须要两个参数，第一个是任务名称，第二个是回调函数。这个一看就明白了，没什么要解释的。看一下回调函数里面的代码：

gulp.src('./js/*.js')

src() 方法用来指定要处理的 js 文件的位置，它会获取匹配到的全部 js 文件的路径，并将它们转换为能够传递给插件进行处理的“流”。这是 Node.js 的 Streams API 的组成部分，也是 Gulp 可以实现如此简洁的 API 语法的缘由。

.pipe(uglify())

pipe() 方法获取刚才经过 src() 方法得到并传递过来的“流”，并将其传递给指定的插件。本例中是 uglify 插件。

.pipe(concat('all.js'))

与 uglify 同样，concat 插件经过 pipe() 方法接收通过上一个方法处理以后返回的“流”，并把他们该“流”中的全部 Javascript 文件合并为一个名为 "all.js" 的文件。

.pipe(gulp.dest('./js'));

最后，经过 Gulp 的 dest() 方法， "all.js" 被写入到咱们指定的目录。整个过程很是直观，易于理解。能够想象一下 jQuery 的链式调用，也能够想象一下 *nix 系统下的 grep, awk 这些命令。

咱们要作的最后一件事，是指定 Gulp 的默认任务，让它执行咱们刚才定义的 "js" 任务。

gulp.task('default', ['js']);

完整的 gulpfile.js:

// 定义依赖项和插件
var gulp=require('gulp'),
    gutil=require('gulp-util'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');

// 定义名为 "js" 的任务
gulp.task('js', function(){
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

// 定义默认任务
gulp.task('default', ['js']);

回到命令行（项目根目录），输入 gulp, 回车。 Gulp 找到 gulpfile.js 文件，加载依赖的插件，启动默认任务，而后执行咱们的 "js" 任务, 你能够看到最终结果

Gulp 还提供了一个名为 watch() 的方法，能够自动检查指定的资源（文件）的变化。这样就能够在文件发生变化时自动执行特定的任务，没必要每次修改了文件就要回到命令行手动执行 gulp.

gulp.watch('./js/*.js', ['js']);

这行代码执行时， Gulp 会持续监控 ./js/ 目录下全部的 js 文件，一旦文件发生变化，就会自动从新执行 "js" 任务来合并和压缩文件。固然，这行代码一般也要放到某个任务中去运行。

---

转到 Gulp.js

在我开始使用 Grunt 以前的几年里，一直是使用 涛哥 开发的 CssGaga 来作前端构建工具。这是当时咱们工做标准流程的一部分，它很是强大。

后来从 isux 转岗到 TGideas, 工做流程发生了巨大的变化，同时我在 Windows / Linux / Mac 不一样平台下工做的时间也愈来愈多，因而转向了 Grunt. 与 CssGaga 相比， Grunt 须要本身去寻找须要的插件，在每一个项目中进行适当的配置来完成构建工做，可是它跨平台、按需组合功能的特性较好地知足了个人须要。以后又据说过、尝试过一些前端构建工具，但都没有让我放弃 Grunt.

第一次看到 Gulp 的介绍时，就被它的配置语法所吸引。由于对于任何一个接触过 Node.js 的人来讲，这语法是在是太舒服了。一看就懂，看一遍就会，不是吗？暂时来讲，它的插件数量尚未 Grunt 那么多那么全面，不过平常的前端任务，仍是都涵盖了，并且有一些实现得比 Grunt 平台上的更棒。并且它的插件库也不断在增加，尤为是如今有这么多开发者对它有兴趣，相信它会获得快速的发展。

若是你尚未尝试过，不妨尝试一下。