最近更新
阅读排行
关注本站
gulp与Grunt的区别
阅读：5227 次 编辑日期：2017-06-19
目录：
概述：
因为node的出现，自动化构建越来越流行，要说到前端自动化构建，那必须会想到Grunt和gulp，恰巧最近这两个我都用过，那么咱们说说这两个的区别。
简单来说，glup相对于Grunt：简单易学，使用简单 ，效率更高，插件功能更简单明了。下面我们具体说说。
今天咱们不讨论怎么用，如果你还是小白，请去官网学习：
Grunt:http://www.gruntjs.net/
易用性：
下面我们看两个实例，不需要仔细看内容，仅仅用来感受。我们先看一个Grunt官网给的 Gruntfile 实例：
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// 加载包含 "uglify" 任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify']);
};
我们再看gulp一个官网给的 gulpfile.js 实例：
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
我不去看具体做了什么，单单从直观感受来讲 ，gulp更符合程序员的编程习惯 ，而Grunt更像是在“配置”。
学习曲线：
Grunt官网给出了9个常用API：:grunt.config，grunt.event，grunt.fail，grunt.file，grunt.log，grunt.option，grunt.task，grunt.template，grunt.util
gulp官网给出了4个常用API：:gulp.src，gulp.dest，gulp.task，gulp.watch
总的来看gulp的学习曲线相对较低。
高效率：
使用Grunt的执行的过程中会产生一些临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，只会产生内存。
高质量：
我们在编写代码的时候要写高质量的代码，减少重复或者没有用的代码，在这个对比中也是很重的一环，Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。
