Gulp 与 Grunt：自动化执行任务

Gulp 与 Grunt 都是可以自动化执行任务的工具。在平时开发的流程里面，一定有一些动作需要手工的重复的去执行，比如把一个文件复制到一个指定的地方，把多个 JS 或者 CSS 文件合并成一个文件，并且最小化一下，去把写好的 Sass 或者 Less 编译成 CSS，最小化处理图像文件，创建一个可以实时刷新的本地服务器等等。

只要你觉得有些动作是要重复去做的，一般你就可以把这些动作创建成一个 Gulp 或者 Grunt 的任务，然后在指定的条件下，比如文件发生变化以后，自动去执行这些任务。

Gulp 与 Grunt 选择哪个？

Gulp 与 Grunt 做的事情都差不多，只不过背后的原理还有方法不同。在项目里用哪个都可以，完全取决于个人喜好。另外也可以根据你的项目用到的其它的东西来决定，比如 Bootstrap 这个前端框架就用到了 Grunt，Semantic UI，AngularJS  用的是 Gulp 。相比，Grunt 比较老牌，根据在 Github 上的星星数，Gulp 更受欢迎。

安装

安装 Gulp 与 Grunt 用的都是 node 的包管理工具 - npm ，所以你需要先在电脑上安装 node ，确定在命令行工具的下面可以使用 npm 这个命令，这样就能去安装 Gulp 与 Grunt 了。

安装 Grunt

在项目里使用 Grunt，你得先在全局范围内去安装一下 Grunt 的命令行工具，然后在项目里面再去安装 Grunt。

Grunt 命令行工具

使用 npm 的 install 去安装  grunt-cli（ Grunt 命令行工具），注意加上一个 -g 的参数，表示在全局范围内去安装，如果你遇到了权限问题，在下面这个命令的前面加上 sudo 。

npm install -g grunt-cli

Grunt

进入到项目的目录下面，然后再去在项目里面安装一下 Grunt ，你可以先为项目创建一个 package.json 文件，这样可以把 Grunt 作为项目的开发依赖，放到这个 package.json 文件里面。使用 npm init 可以去创建  package.json 。

npm install grunt --save-dev

上面的命令会在项目里安装 Grunt ，后面的 --save-dev 意思就是，把 Grunt 作为项目的开发依赖，放到 package.json 这个文件里面。

现在我们就可以使用命令行工具，进入到项目所在的目录，然后使用 grunt 这个命令去执行设计好的 Grunt 任务了。

安装 Gulp

在项目里使用 Gulp，你得先在全局范围内去安装一下 Gulp 的命令行工具，然后在项目里面再去安装 Gulp。

Gulp 命令行工具

使用 npm 的 install 去安装  gulp，注意加上一个 -g 的参数，表示在全局范围内去安装，一般用 npm 安装的时候用一个 -g 的参数就表示，这个安装的东西会作为命令去执行。如果你遇到了权限问题，在下面这个命令的前面加上 sudo 。

npm install -g gulp

Gulp

进入到项目的目录下面，然后再去在项目里面安装一下 Gulp ，你可以先为项目创建一个 package.json 文件，这样可以把 Gulp 作为项目的开发依赖，放到这个 package.json 文件里面。使用 npm init 可以去创建  package.json 。

npm install gulp

上面的命令会在项目里安装 Gulp ，后面的 --save-dev 意思就是，把 Gulp 作为项目的开发依赖，放到 package.json 这个文件里面。

现在我们就可以使用命令行工具，进入到项目所在的目录，然后使用 gulp 这个命令去执行设计好的 Gulp 任务了。

基础

要执行的 Grunt 与 Gulp 任务，都要放到一个特殊的文件里面，Grunt 的任务需要的是 Gruntfile.js ，Gulp 的任务需要的是 gulpfile.js。在这个特殊文件里，你可以创建不同的任务，去做不同的事情，创建的任务可以在命令行下面，使用 grunt 或者 gulp 命令去执行。

Grunt

在项目根目录下面，创建一个叫 Gruntfile.js 的文件，Grunt 的任务放到下面这段代码里：

module.exports = function (grunt) {
  ... // Grunt 任务
};

在上面代码里的匿名函数里面，可以使用 grunt 的 registerTask 去创建要执行的任务。下面创建一个任务可以在控制台上输出 “您好” 这两个字，任务的名字叫 greet 。

module.exports = function (grunt) {
  grunt.registerTask('greet', function () {
    console.log('您好');
  });
};

执行上面这个任务，打开命令行工具，进入到项目所在的目录，输入：

grunt greet

会返回下面这些东西：

Running "greet" task
您好

Done, without errors.

Gulp

Gulp 的任务要放到一个叫 gulpfile.js 的文件里面，先在项目的根目录下面创建一个这样的文件。 然后在这个文件的顶部添加下面这行代码：

var gulp = require('gulp');

这样，gulp 这个变量里面就会拥有 Gulp 的所有的方法了，创建 Gulp 的任务，可以使用 gulp 的 task 方法，同样我们去创建一个叫 greet 的任务，它要做的事就是在控制台上输出 “您好” 这两个字。

gulp.task('greet', function () {
  console.log('您好');
});

执行 Gulp 的任务，打开命令行工具，进入到项目所在的目录，然后输入：

gulp greet

会返回：

[11:48:11] Using gulpfile ~/Desktop/ninghao-gulp/gulpfile.js
[11:48:11] Starting 'greet'...
您好
[11:48:11] Finished 'greet' after 111 μs

总结

我个人更偏好 Gulp 创建任务的方法，因为它更简单，也很容易理解。Grunt 与 Gulp 都有很多插件，使用这些插件可以去做不同的事情，合并文件，最小化文件，编译 Sass 或者 Less 等等，这些都是通过插件完成的。

相关链接

• 《 Grunt 自动化任务 》课程
• 《 Gulp 自动化任务 》课程
• Grunt 官方网站
• Gulp 官方网站