Grunt出来之后，nodejs里的构建工具宝座长久以来就是它的，随着新星Gulp的出现，Grunt的地位明显被削弱了。因为打算换换口味，决定对比一下它们。
相应的代码在这里，不想看文章的可以自己clone一下代码，然后对比一下。
定一下我们的任务
用两个工具分别实现一些常见的任务，对比性能、代码
- 分别实现合并代码，压缩代码、压缩图片
- 性能对比，代码对比
目录结构
.
├── Gruntfile.js
├── dist
├── grunt.md
├── gulp.md
├── gulpfile.js
├── node_modules
├── package.json
├── readme.md
└── src
├── images
│ └── test.jpg
└── js
├── jquery-1.11.0.js
└── underscore.js
使用Grunt
首先安装grunt
npm install --save-dev grunt
安装我们需要的grunt的插件
- 校验代码 jshint
- 移动代码 copy
- 合并代码 concat
- 压缩代码 uglify
- 压缩图片 imagemin
- 时间分析的插件 time-grunt
npm install --save-dev grunt-contrib-jshint
npm install --save-dev grunt-contrib-uglify
npm install --save-dev grunt-contrib-imagemin
npm install --save-dev grunt-contrib-concat
npm install --save-dev grunt-contrib-copy
结果
然后我们来写代码，详细内容还是看Gruntfile.js，下面是一张运行完后的截图
可以看出grunt运行时间为3.6s，相应的信息输出很详细
使用Glup
全局安装gulp
npm install -g --save-dev gulp
安装相关的gulp插件
npm install --save-dev gulp-concat gulp-uglify gulp-imagemin gulp-jshint
结果
按照开始教程里的内容创建一个gulpfile.js
运行结果，如图：
可以看到gulp代码更短，输出更简洁
总结
可能由于项目比较小的原因，Gulp在性能上并没有领先,但是在代码清晰度和可维护性上Gulp绝对是完胜，还是推荐Gulp