Grunt VS Gulp

前期准备

• windows7
• node
• ruby
• sass+compass

grunt篇

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

  mkdir grunt_demo
  cd grunt_demo
  compass init

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

npm install -g grunt-cli

注意，安装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

  

安装好之后的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！

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，并且学习成本不高，在这非常感谢刘剑辛的分享！

运行结果

 

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

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