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

1. Grunt ­ Gulp 早些年提到构建工具，难免会让人联想到历史比较悠久的Make ，Ant ，以及后来为了更方便的构建结构类 似的Java项目而出现的Maven 。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任务运行器。 2. Grunt的特点 Grunt有一个完善的社区，插件丰富 它简单易学，你可以随便安装插件并配置它们 你不需要多先进的理念，也不需要任何经验 完善 – Grunt的插件数据： 根据社区的结果显示，共计3,439个插件，其中49个官方插件。 易用 – Grunt的插件丰富： 许多常见的任务都有现成的Grunt插件，而且有众多第三方插件， 如：CoffeeScript ，Handlebars ，Jade ，JsHint ，Less ，RequireJS ，Sass ，Styles 。而且通过 参考文档进行配置便可以使用。 3. Gulp和Grunt的异同点 易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。 高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。 高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。 易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系 列流管道。 易用 Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。 高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。 高质量 Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复 杂的任务。例如：Grunt的imagemin 插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存 是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。 易学 Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任 务。 4. Yeoman Team Talks Yeoman团队去年12月份时在Github上也专门提过一个issue，讨论是否使用Gulp取代Grunt：他们提到 Gulp是一个新的基于流的管道式构建系统，需要很少的配置并且更快。 5. Gruntfile.js 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 6. Gulpfile.js var gulp = require(gulp); var jshint = require(gulp‐jshint ); va