grunt vs gulp

原创 2016年08月31日 11:03:25


github Grunt vs Gulp https://github.com/fwon/blog/issues/16
Gulp相对于Grunt的优势 http://blog.jobbole.com/81007/
W3C tech Grunt VS Gulp  http://www.w3ctech.com/topic/673

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

2. 任务划分
grunt 中每个任务对应一个最外层配置的key, 大任务可以包含小任务,以一种树形结构存在。举个栗子:
uglify: {
    one: {
        src: 'src/a.js',
        dest: 'dest/a.min.js'
    },
    two: {
        src: 'tmp/b.js',
        dest: 'dist/b.min.js'
    }
}
将uglify划分子任务的好处是,我们在封装不同的task时可以分别对'uglify:one'或'uglify:two'进行调用,这对于某些需要在不同时间点调用到uglify的task相当有用。
gulp 中没有子任务的概念,对于上面的需求,只能通过注册两个task来完成
gulp.task('uglify:one', function(){
    gulp.src('src/a.js')
        .pipe(uglify())
        .dest('dest/a.min.js')
});
gulp.task('uglify:two', function(){
    gulp.src('tmp/b.js')
        .pipe(uglify())
        .dest('dist/b.min.js')
});
当然这种需求往往可以通过调整打包策略来优化,并不需要分解子task,特殊情况下可以用这种方法解决。

gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处:
  1. 插件很难遵守单一责任原则。因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的事情。比如说要对处理后的文件进行更名操作,你可能使用的是 uglify 插件,也有可能使用的是 concat 插件(取决于工作流的最后一个环节是谁)。
我的看法:这或许是个问题,对很多人来说 Grunt 插件多少存在“职责不明”和“越俎代庖”的情况。在我看来,这也是 Grunt 一个设计思想:把对文件的操作抽象为一个独立的组件(Files),任何插件都以相同的规则来使用它。遗憾在于,使用它的过程发生在每个插件的独立配置对象里,所以总给人一种“把不该这个插件做的事情丢给它来做”的别扭感觉。
  2. 用插件做一些本来不需要插件来做的事情。因为 Grunt 提供了统一的 CLI 入口,子任务由插件定义,由 CLI 命令来调用执行,因此哪怕是很简单的外部命令(比如说运行 karma start)都得有一个插件来负责封装它,然后再变成 Grunt CLI 命令的参数来运行,多此一举。
­
  1. 试图用配置文件完成所有事,结果就是混乱不堪。规模较大,构建/分发/部署流程较为复杂的项目,其 Gruntfile有多庞杂相信有经历的人都有所体会。而 gulp.js 奉行的是“写程序而不是写配置”,它走的是一种 node way。
我的看法:对于 node.js 开发者来说这是好事,符合他们的一贯作风;不过对于那些纯前端工程师来说(数量不小),这似乎没有什么显著的改善。况且近来 Grunt 社区涌现了不少插件来帮助开发者组织/管理/简化臃肿的 Gruntfile,效果都还不错。所以关于这一点,就见仁见智吧。
  2. 落后的流程控制产生了让人头痛的临时文件/文件夹所导致的性能滞后。这是 gulp.js 下刀子的重点,也是本标题里“流式构建”所解决的根本问题。流式构建改变了底层的流程控制,大大提高了构建工作的效率和性能,给用户的直观感觉就是:更快。
我的看法:关于流式构建,短短几句话无法讲清它的来龙去脉,但是在 node.js 的世界里,streaming 确实是至关重要的。我推荐一份阅读材料:Stream Handbook,读过之后相信心里就有数了。
作为对比和总结,作者列出了 gulp.js 的五大特点:
  1. 使用 gulp.js,你的构建脚本是代码,而不是配置文件;
  2. 使用标准库(node.js standard library)来编写脚本;
  3. 插件都很简单,只负责完成一件事-基本上都是 20 行左右的函数;
  4. 任务都以最大的并发数来执行;
  5. 输入/输出(I/O)是基于“流式”的。


gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使用的是流操作,一直是在内存中处理,直到输出结果。 因此gulp在效率上确实远胜grunt,并且学习成本不高.
[图片]


个人更喜欢gulp

版权声明:本文为博主原创文章,未经博主允许不得转载。

前端工程的构建工具对比 Gulp vs Grunt

1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven。Node催生了一批自动化工...
  • vuturn
  • vuturn
  • 2016年08月05日 09:31
  • 352

Gulp vs Grunt 前端工程的构建工具对比

原文地址:  http://www.benben.cc/blog/?p=407 Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp ...

grunt vs gulp

虽然gulp已经出来很久了,但是一直没有去使用过。得益于最近项目需要,就尝试了一下,以下从几个要点讲一下grunt和gulp使用的区别,侧重讲一下在使用gulp过程中发现的问题。而两种工具孰优孰劣由读...

gulp/grunt 安装/案例实战实战 JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp

安装nodejs 参考材料 http://www.gruntjs.net/docs/getting-started/ 1.安装grunt-cli npm install -g grun...

你真的需要Grunt和Gulp吗

前些天看到一篇不错的文章 http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/作者的观点是前端程序员不应该使用Grunt和Gulp...

我为何放弃Gulp与Grunt,转投npm scripts(中)

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part2Cory Hou...

解决"gulp" 或者 "grunt" 在npm运行时报错:“不是内部或者外部命令”

1、首先,电脑没有全局安装过gulp,当开始项目时,结合package.json通过 npm install 安装了react、gulp等配置项   下面是我项目的package.json文件 {...

前端项目工程化(yo+grunt/gulp+bower)

所谓工程化,就是将无序的,繁杂的操作组织起来,利用工具来简化、规范流程,从而实现项目构建、开发、维护的一体化过程。 就前端而言,现在比较流行的项目构建工具有yoeman,grunt,gulp,bow...

Gulp挑战Grunt,背后的哲学

http://www.jianshu.com/p/3779f708f5d7/ [按:网上介绍Gulp和Grunt安装使用的文章很多,甚少比较二者的思路,连官方文档都语焉不详。我在此做一个粗陋...

Gulp的目标是取代Grunt

Fractal公司积极参与了数个流行Node.js模块的开发,它最近发布了一个新的构建系统gulp,希望能够取代Grunt,成为最流行的JavaScript任务运行器。 根据gulp的文档,它努...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:grunt vs gulp
举报原因:
原因补充:

(最多只允许输入30个字)