YuMo's Blog

gulp和grunt对比

Grunt前世今生

常用的构建工具有make, scrons, ant, maven, gradle, sbt等, 在不同的编程语言领域, 上述几个构建工具都很流行. Node催生了一批自动化工具,像Bower,Yeoman,Grunt等。而如今前端提到构建工具会自然想起Grunt。Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理。

在JavaScript的世界里,Grunt.js是基于Node.js的自动化任务运行器。2013年02月18日,Grunt v0.4.0 发布。Fractal公司积极参与了数个流行Node.js模块的开发,它去年发布了一个新的构建系统Gulp,希望能够取其精华,并取代Grunt,成为最流行的JavaScript任务运行器。

Grunt的特点

Grunt有一个完善的社区,插件丰富. 它简单易学,你可以随便安装插件并配置它们. 你不需要多先进的理念,也不需要任何经验.

  • 插件完善: 根据社区的结果显示,共计3,439个插件,其中49个官方插件。
  • 插件丰富: 许多常见的任务都有现成的Grunt插件,而且有众多第三方插件,如:CoffeeScript,Handlebars,Jade,JsHint,Less,RequireJS,Sass,Styles。而且通过参考文档进行配置便可以使用。

Gulp的特点

Grunt的缺点

  1. 插件很难遵守单一责任原则。因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的事情。比如说要对处理后的文件进行更名操作,你可能使用的是 uglify 插件,也有可能使用的是 concat 插件(取决于工作流的最后一个环节是谁)。 对很多人来说 Grunt 插件多少存在“职责不明”和“越俎代庖”的情况。在我看来,这也是 Grunt 一个设计思想:把对文件的操作抽象为一个独立的组件(Files),任何插件都以相同的规则来使用它。遗憾在于,使用它的过程发生在每个插件的独立配置对象里,所以总给人一种“把不该这个插件做的事情丢给它来做”的别扭感觉。

  2. 用插件做一些本来不需要插件来做的事情。因为 Grunt 提供了统一的 CLI 入口,子任务由插件定义,由 CLI 命令来调用执行,因此哪怕是很简单的外部命令(比如说运行 karma start)都得有一个插件来负责封装它,然后再变成 Grunt CLI 命令的参数来运行,多此一举。

  3. 试图用配置文件完成所有事,结果就是混乱不堪。规模较大,构建/分发/部署流程较为复杂的项目,其 Gruntfile有多庞杂相信有经历的人都有所体会。而 gulp.js 奉行的是“写程序而不是写配置”,它走的是一种 node way。 对于 node.js 开发者来说这是好事,符合他们的一贯作风;不过对于那些纯前端工程师来说(数量不小),这似乎没有什么显著的改善。况且近来 Grunt 社区涌现了不少插件来帮助开发者组织/管理/简化臃肿的 Gruntfile,效果都还不错。所以关于这一点,就见仁见智吧。

  4. 落后的流程控制产生了让人头痛的临时文件/文件夹所导致的性能滞后。这是 gulp.js 下刀子的重点,也是本标题里“流式构建”所解决的根本问题。流式构建改变了底层的流程控制,大大提高了构建工作的效率和性能,给用户的直观感觉就是:更快。

Gulp相对于Grunt的优点

作为对比和总结, 给出Gulp的五大优点:

  1. 使用gulp.js,你的构建脚本是代码,而不是配置文件;
  2. 使用标准库(node.js standard library)来编写脚本;
  3. 插件都很简单,只负责完成一件事-基本上都是 20 行左右的函数;
  4. 任务都以最大的并发数来执行;
  5. 输入/输出(I/O)是基于“流式”的。

Gulp及插件安装

globally

$ npm install --global gulp-cli

as project devDependencies

$ npm install --save-dev gulp
所有的Gulp插件需要先安装才能使用, 标准命令如下:
$ npm install <PLUGIN_NAME> --save-dev

代码对比

Gruntfile.js范例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
module.exports = function(grunt) {
grunt.initConfig({
concat: {
'dist/all.js': ['src/*.js']
},
uglify: {
'dist/all.min.js': ['dist/all.js']
},
jshint: {
files: ['gruntfile.js', 'src/*.js']
},
watch: {
files: ['gruntfile.js', 'src/*.js'],
tasks: ['jshint', 'concat', 'uglify']
}
});
// Load Our Plugins
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Register Default Task
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};

Gulpfile.js范例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 语法检查
gulp.task('jshint', function () {
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合并文件之后压缩代码
gulp.task('minify', function (){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('dist'));
});
// 监视文件的变化
gulp.task('watch', function () {
gulp.watch('src/*.js', ['jshint', 'minify']);
});
// 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);

总结

前端的构建工具和框架多如牛毛, 作为时间精力有限的新时代码农,要懂得取舍, 这种玩意直接拿来用就行了, 不要问为什么, 实在不值得浪费过多时间去深入学习.

一个天生残疾的js, 被抽象到这种程度, 也是醉了. 如果不是项目必需, 千万不要碰前端的各种附加玩意, 有时间多看一些算法, 多提升内功, 这种货色多看一秒都是浪费.

附录

  1. Gulp插件库: http://gulpjs.com/plugins
  2. Gulp API: http://www.gulpjs.com.cn/docs/api