Grunt-vs-Gulp

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

一、API

Grunt基于配置来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段,导致认知成本的提高,运用的时候要搞懂各种插件的配置规则。

Gulp基于代码方式来写打包脚本,并且代码采用流式的写法,只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch 接口,运用相当简单。经尝试,使用Gulp的代码量能比grunt少很多。

二、Task

Grunt中每个任务对应一个最外层配置的key, 大任务可以包含小任务,以一种树形结构存在。

Gulp中没有子任务的概念,只能通过注册多个Task来完成。

三、运行方式

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

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

Grunt是按书写的顺序首先执行cancat,然后是uglify,最后才是release。

Gulp采用并行方式执行任务,通过一个pipe方法,以数据流的方式处理打包任务,我们来看这段代码:

gulp.task('jsmin', function() {
  gulp.src(['build/js/**/*.js'])
    .pipe(concat('app.min.js'))
    .pipe(uglify()
    .pipe(gulp.dest('dist/js/'));
});

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

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

四、使用插件

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

其实使用Gulp结合gulp-revgulp-rev-replace来完成类似的任务,具体用法可以参考我在mlab data api项目中所使用的Gulp配置

最近使用Yeoman的generator-angular生成器来创建angular脚手架工程,发现Yeoman官方推荐使用Gulp而不是Grunt来构建工程了。Grunt也基本上停止更新了,结果你懂得的:)

发表评论

电子邮件地址不会被公开。 必填项已用*标注