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