草依山的Javascript世界

一个Javascript程序猿的学习纪录剩地,不仅仅是JS,还有Linux、Mac、nodeJs、吃、玩!

通过例子对比grunt和gulp

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

文章地址: 通过例子对比grunt和gulp
欢迎关注我的微博与我交流:@草依山
Github上也有一些东西:[Github]
所有文章坚决抵制jb51.net的转载!
2014-03-11

相关文章

2016-09-29 [翻译]bash的各种文件载入执行顺序
2016-05-31 phantomjs在linux下截图中文字体问题
2016-04-24 Promise的错误处理
2016-02-23 URL里的+
2016-02-11 N个数中第K大的数

文章修改纪录

加载中...
Copyright © 2013. Create By 草依山, Fork