w3ctech

Grunt VS Gulp

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
w3ctech微信

扫码关注w3ctech微信公众号

共收到3条回复

  • 很棒!赞一个!

    回复此楼
  • 赞一个。

    回复此楼
  • 就为了快几秒 我还是不换了 又不是线上

    回复此楼