Grunt VS Gulp

前言

2014年12月20日下午,参加fequan的走进名企之YY前端技术分享专场,刘剑辛&刘达慰分享了【基于Gulp的前端自动化】,其实gulp早有耳闻,只是当初一开始就选择grunt,感觉这种自动化工具够用就行,所以也没去试用gulp,在茶歇的时候,跟剑辛童鞋交流了一下grunt和gulp的优缺点之后,回来立马投入gulp的研究,并与grunt做了一些对比,如有错误之处,欢迎指正。

前期准备

• windows7
• node
• ruby
• sass+compass

grunt篇

新建一个grunt_demo 目录,用compass 创建一个项目

 mkdir grunt_demo
 cd grunt_demo
 compass init

stepOne 打开CMD,安装grunt-cli到全局环境

npm install -g grunt-cli

stepTwo

注意,安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。

在根目录下新建一份Gruntfile.js和package.json 接着安装grunt和grunt插件,这个demo主要目标是做一个编译compass并自动刷新浏览器的demo,需要用到组件 :

• grunt
• grunt-contrib-compass
• grunt-contrib-watch

• grunt-browser-sync

  安装命令:

  npm install grunt grunt-contrib-compass grunt-contrib-watch grunt-browser-sync --save-dev
  

  stepThree

安装好之后的package.json是这样的:

{
 "name": "grunt_demo",
 "version": "1.0.0",
 "description": "grunt demo",
 "main": "index.html",
 "repository": {
 "type": "git",
 "url": "https://github.com/Janking/blog"
 },
 "author": "Janking",
 "license": "ISC",
 "bugs": {
 "url": "https://github.com/Janking/blog/issues"
 },
 "homepage": "https://github.com/Janking/blog",
 "devDependencies": {
 "grunt": "^0.4.5",
 "grunt-browser-sync": "^1.5.3",
 "grunt-contrib-compass": "^1.0.1",
 "grunt-contrib-watch": "^0.6.1"
 }
}

接着就是关键的Gruntfile.js文件

module.exports = function(grunt) {
 // 1. 所有的配置将在这里进行
 grunt.initConfig({
 compass: {
 dist: {
 options: {
 config: 'config.rb'
 }
 }
 },
 watch: {
 compass: {
 files: 'sass/{,*/}*.scss',
 tasks: ["compass:dist"]
 }
 },
 browserSync: {
 dev: {
 bsFiles: {
 src: ['stylesheets/{,*/}*.css','*.html','js/{,*/}*.js'] //监听改变的文件,可以是js,html,css等等
 },
 options: {
 watchTask: true, // < VERY important
 server:{
 baseDir: "./"
 }
 }
 }
 }
 })
 // 2. 我们在这里告诉grunt我们将使用插件
 grunt.loadNpmTasks('grunt-contrib-compass');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.loadNpmTasks('grunt-browser-sync');
 // 3. 执行
 grunt.registerTask('default', ["browserSync", "watch"]); //当在命令行中敲入 grunt,默认执行default
 //你还可以自定义命令,如
 //grunt.registerTask('compass', ["compass"]); 
 //命令行: grunt compass
}

详细的Gruntfile配置教程可以参考这里:http://www.gruntjs.net/

grunt的工作流程:读文件、修改文件、写文件、读文件、修改文件、写文件.....如果compass还要合并雪碧图的话,grunt的耗时就更长了,我试过最长需要2s,接下来我们试试gulp!

compare

gulp篇

新建一个gulp_demo 目录,用compass 创建一个项目

 mkdir gulp_demo
 cd gulp_demo
 compass init

打开CMD,安装gulp到全局环境

npm install gulp -g

创建package.json ,命令行中输入npm init,按照提示敲完即可 再将gulp和需要用到的组件安装在本地项目中

npm install gulp-compass browser-sync --save-dev

安装完毕,package.json文件如下所示:

{
 "name": "gulp_demo",
 "version": "1.0.0",
 "description": "gulp demo",
 "main": "index.html",
 "repository": {
 "type": "git",
 "url": "https://github.com/Janking/blog"
 },
 "author": "Janking",
 "license": "ISC",
 "bugs": {
 "url": "https://github.com/Janking/blog/issues"
 },
 "homepage": "https://github.com/Janking/blog",
 "devDependencies": {
 "browser-sync": "^1.8.1",
 "gulp-compass": "^2.0.3"
 }
}

gulp所需要的组件比grunt要少一个 :)

然后在根目录上新建gulpfile.js文件,配置如下:

var gulp = require('gulp'); 
var compass = require( 'gulp-compass' );
var browserSync = require("browser-sync");
var reload = browserSync.reload;
gulp.task('compass', function() {
 gulp.src('sass/*.scss').pipe(compass({
 config_file: './config.rb',
 css: 'css',
 sass: 'sass'
 })).pipe(reload({stream:true}));
});
gulp.task('browser-sync', function() {
 browserSync({
 server: {
 baseDir: "./"
 }
 });
});
gulp.task('normal', function() {
 gulp.src(['*.html']).pipe(reload({stream:true}));
});
// 在命令行中运行 gulp,默认执行 default,你也可以自定义其他命令
gulp.task('default', ['compass', 'browser-sync','normal'], function () {
 gulp.watch(['./sass/{,*/}*.scss'], ['compass']);
 gulp.watch(['./*.html','./css/{,*/}*.css','./js/{,*/}*.js','./images/{,*/}*.{png,jpg}'],['normal']);
});

gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使用的是流操作,一直是在内存中处理,直到输出结果。 因此gulp在效率上确实远胜grunt,并且学习成本不高,在这非常感谢刘剑辛的分享!

运行结果

resultresult

顺便做个推广:首届前端开发者年度大会 2015年01月17日 广州华南农业大学举办,有兴趣的童鞋快来看看http://www.fequan.com/feday

demo:https://github.com/Janking/blog 如果要运行demo,先执行下面这些命令

npm install
#如果你未安装grunt-cli或gulp,请先全局安装#
npm install -g grunt-cli
npm install -g gulp