Grunt vs Gulp

Gulp 已经出来很久了，Gulp 的具体用法可以参考园子的这篇文章。本文要讲述有是它与 Grunt 有什么异同。

API

Grunt 基于配置来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如 option、src、dest 等等。而且不同的插件可能会有自己扩展字段，导致认知成本的提高，运用的时候要搞懂各种插件的配置规则。 Gulp 基于代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了 gulp.src、gulp.pipe、gulp.dest、gulp.watch 接口，使用相当简单。经尝试，使用 Gulp 的代码量能比 grunt 少很多。

Task

Grunt 中每个任务（Task）对应一个最外层配置的 key, 大任务可以包含小任务，以一种树形结构存在。 Gulp 中没有子任务的概念，只能通过注册多个任务来完成。

运行方式

Grunt 采用串行方式执行任务，比如我们注册了这样一个任务：

grunt.register('default', ['concat', 'uglify', 'release'])

Grunt 是按书写的顺序首先执行 concat，然后是 uglify，最后才是 release。 Gulp 采用并行方式执行任务，通过一个 pipe 方法，以数据流的方式处理打包任务，我们来看这段代码：

gulp.task('jsmin', () => {
  gulp.src(['build/js/**/*.js'])
    // 此处应该是 concat方法，但服务器不支持
    .pipe(contact('app.min.js')) 
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'));
});

程序首先将 build/js 下的 JavaScript 文件压缩为 app.min.js, 再进行 uglify 操作，最后发布在 dist/JavaScript 下。这一系列工作就在一个 Task 中完成，中间没有产生任何临时文件。

注意：相比之下，Grunt 运行效率会比 Gulp 低，但使用 grunt-concurrent 插件是可以实现并行执行任务，让这种差距减少。

使用插件

一般情况下，Grunt 有的插件也能找到相对应的 Gulp 插件。复杂应用很少是单页面应用（SPA），一般是多页面的。Grunt 使用插件合并、最小化、更名 CSS 和 JavaScript 后，要在相应的入口页面替换原来的 CSS、JavaScript 资源资源路径不太容易。一个好办法就是使用 grunt-usemin 来解决这一问题。该插件通过在页面注解的方式自动替换静态资源 url 的配置，可大大减轻多页面需要手动配置的工作量。结合使用 Grunt 动态构建文件对象进行配置，可做到少修改配置。