Gulp 学习笔记

参考：http://www.cnblogs.com/tugenhua0707/p/4069769.html

Gulp实现web服务器

阅读目录

• 一：gulp实现web服务器配置：
• 二：添加实时刷新（livereload）支持

回到顶部

一：gulp实现web服务器配置：

    对于前端开发而言，需要在本地搭建一个服务器作为开发使用，虽然有时候也可以直接打开页面进行预览效果，但是有时候页面需要在服务器运行，以前的做法是下载一个php，直接安装下即可，或者使用nodeJS作为web服务器，今天我门可以来学习下使用gulp的一个插件 gulp－connect来配置作为本地服务器来使用；当然该插件也是居于nodeJS环境中的。

一：gulp实现web服务器配置：

初始化安装

首先，使用下面的命令来安装connect插件。

sudo  npm  install --save-dev gulp-connect

因此package.son内容代码变为如下：

{
  "name": "tongbanke",
  "version": "1.0.0",
  "description": "tobanke'",
  "main": "main.js",
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "gulp"
  },
  "keywords": [
    "gulp",
    "test"
  ],
  "author": "kongzhi",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-connect": "^2.0.5"
  }
}

gulpfile.js代码如下

var gulp = require('gulp'),
    connect = require('gulp-connect');

gulp.task('webserver', function() {
    connect.server();
});

gulp.task('default', ['webserver']);

如上是package.son代码和gulpfile.js代码；我们可以直接复制下来，新建package.son和gulp file.js两个文件，然后进入项目的目录下 npm install 即可把所有的依赖包加载出来。如下图：

这样就好了，然后我们在终端命令下运行gulp命令即可；如下所示：

然后我们在浏览器中打开 localhost:8080/index.html 就可以看到内容了，gulpfile.js文件是在网站的根目录下，服务器将一直运行，监听localhost:8080，如果我们想要停止服务器的话，可以回到中断命令下按ctrl＋c键即可。这个demo我也放到了github上了，如下：

https://github.com/tugenhua0707/basic 

我们可以直接使用git把它克隆下来放在本地目录下，然后进入该目录下，使用终端命令 

npm install 即可，把所有的依赖包就能提取出来。再运行gulp命令后，在浏览器下运行

http://localhost:8080/即可看到index.html页面了。

回到顶部

二：添加实时刷新（livereload）支持

     上面我们已经完成了使用 gulp-connect 实现服务器了，现在我们需要实现实时刷新，这样的话，每当我更改一个文件的时候，我就不需要重新运行命令，直接保存代码即可生效，因此我们现在需要做两件事情：

1. 让web服务器带实时刷新支持启动。

2. 告诉组建什么时候应该自动刷新。

第一步的实现很简单：只要给connect.server()方法传入一个参数即可：

｛livereload: true｝即可，如下图所示：

对于第二步，我们这里简单的实现以下使用gulpfile.js 来监听less文件，自动把less文件编译成css文件，并将其注入到浏览器中，为了编译LESS文件，我门需要使用到gulp-less 插件，我门可以运行如下命令：

sudo npm install --save-dev gulp-less 来安装gulp-less，并且在gulpfile.js文件中添加这个依赖项，现在我门可以看下 package.json代码变为如下：

// package.son
{
  "name": "tongbanke",
  "version": "1.0.0",
  "description": "tobanke'",
  "main": "main.js",
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "gulp"
  },
  "keywords": [
    "gulp",
    "test"
  ],
  "author": "kongzhi",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-connect": "^2.0.5",
    "gulp-less": "^1.2.3",
    "gulp-coffee": "^1.4.2",
    "gulp-watch": "^0.6.2"
  }
}

gulpfile.js代码变为如下：

// gulpfile.js

// 定义依赖项
var gulp = require('gulp'),
    connect = require('gulp-connect'),
    less = require('gulp-less');
 
// 定义 webserver 任务
gulp.task('webserver', function() {
    connect.server({
      livereload: true
    });
});
 
// 定义 less 任务
gulp.task('less', function() {
    gulp.src('styles/main.less')
        .pipe(less())
        .pipe(gulp.dest('styles'))
        .pipe(connect.reload());
});
 
// 定义 watch 任务
gulp.task('watch', function() {
    gulp.watch('styles/*.less', ['less']);
})
 
// 定义默认任务
gulp.task('default', ['less', 'webserver', 'watch']);

我门再来看看我门现在的目录结构如下：

如上gulpfile.js文件，我门使用watch这个任务去监听LESS文件，每当该文件发生改变的时候，我门都会对less这个任务进行编译，然后把编译的文件写入到目标文件中，因此当我门回到终端命令下运行gulp命令后，每当我门的css文件有更改的话，都可以实时监听到，对于第二点监听到话，gulp有gulp-watch这个插件了，其实可以做的更好的；同样，为了大家有源代码的话，也把项目放入git里面去，大家也可以把它git 克隆下来，自行运行即可：如下：

https://github.com/tugenhua0707/livereload

想学习gulp的watch插件和压缩及合并代码的话，可以看如下文章即可：

http://www.cnblogs.com/tugenhua0707/p/4069769.html

 

 Grunt一直是前端构建工具，然而他也不是毫无缺陷的，gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处：

1. 插件很难遵守单一职责。因为 Grunt 的 API 设计缺憾，使得许多插件不得不负责一些和其主要任务无关的事情。比如说要对处理后的文件进行更名操作，你可能使用的是 uglify 插件，也有可能使用的是 concat 插件（取决于工作流的最后一个环节是谁）。
2. 用插件做一些本来不需要插件来做的事情。因为 Grunt 提供了统一的 CLI 入口，子任务由插件定义，由 CLI 命令来调用执行，因此哪怕是很简单的外部命令（比如说运行 karma start）都得有一个插件来负责封装它，然后再变成 Grunt CLI 命令的参数来运行，多此一举。
3. 试图用配置文件完成所有事，结果就是混乱不堪。规模较大，构建／分发／部署流程较为复杂的项目，其Gruntfile 有多庞杂相信有经历的人都有所体会。而 gulp.js 奉行的是“写程序而不是写配置”，它走的是一种 node way。
4. 落后的流程控制产生了让人头痛的临时文件／文件夹所导致的性能滞后。这是 gulp.js 下刀子的重点，也是本标题里“流式构建”所解决的根本问题。流式构建改变了底层的流程控制，大大提高了构建工作的效率和性能，给用户的直观感觉就是：更快。

 Gulp相对于Grunt有五大优势：

      1. 使用 gulp.js，你的构建脚本是代码，而不是配置文件；

      2. 使用标准库（node.js standard library）来编写脚本；

      3. 插件都很简单，只负责完成一件事.

      4. 任务都以最大的并发数来执行；

      5. 输入／输出（I/O）是基于“流式”的。

 下面我们先来看看在项目中如何使用Gulp来构建项目的吧！在构建之前，我们先来安装下Gulp。

一：Gulp安装-命令行工具。全局安装gulp  命令：npm install -g gulp 如下：

 

 如上，说明gulp已经安装完成！

 二：项目demo演示

    1. 进入项目gulp的根目录下，如下所示：

    

如上，是我项目gulp文件。

       1. 在项目的根目录下看有没有package.json,如果没有的话，我们需要运行下命令 npm init,  如下所示：

       

      之后在项目跟路径下生产package.json文件.

      2. 在项目文件gulp下安装为开发的依赖组件，运行命令：npm install --save-dev  gulp  如下所示：

      

      运行完成后，在根目录下生产node_modules文件，如下所示：

     

    3. 在项目的跟路径下新建Gulpfile.js,如下所示：

     

    我们可以给Gulpfile.js的初始内容为：

  var gulp = require('gulp');

  gulp.task('default', function () {});

4. 运行gulp命令，如下所示：

   
上面是最基本的运行操作，下面我们来看一个具体的demo吧，还是如上的项目gulp文件，我们现在的需求是想把gulp项目文件下的src所有js文件合并到dist目录下的build.js,压缩后的文件为build-min.js。
在这之前，我们需要安装如下插件：
 1. 语法检查(gulp-jshint).
 2. 合并文件(gulp-concat).
 3. 压缩代码(gulp-uglify).

一：语法检查 运行命令：npm install gulp-jshint --save-dev 如下图所示：

二：合并文件 运行命令：npm install gulp-concat  --save-dev  如下图所示：

三：压缩代码 运行命令：npm install gulp-uglify --save-dev 如下图所示：

插件装完成后，我们可以看看根目录下多了几个插件，如下所示：

其中gulp-rename我们去掉，不要的。

四：在项目的根目录下创建Gulpfile.js文件，内容如下：

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// 语法检查
gulp.task('jshint', function () {
    return gulp.src('src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 合并文件之后压缩代码
gulp.task('minify', function (){
     return gulp.src('src/*.js')
        .pipe(concat('build.js'))
        .pipe(gulp.dest('dist'))
        .pipe(uglify())
        .pipe(rename('build.min.js'))
        .pipe(gulp.dest('dist'));
});

// 监视文件的变化
gulp.task('watch', function () {
    gulp.watch('src/*.js', ['jshint', 'minify']);
});

// 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);

最后在命令行下，运行gulp命令即可。如下所示：

现在我们回到目录下，可以看到如下所示：

如上Gulpfile.js，我们可以看到，基本上所有的任务都是这个模式。

 gulp.task(“任务名称”，function(){

      return gulp.src(“文件”)

      .pie(…)

     .pie(….)

 })

获取要处理的文件，传递给下一个环节处理，然后把返回的结果继续传给下一个环节，直到所有环节结束，pipe就是stream模块里负责传递流数据的方法而已。

下面我们来看看gulp简单的API，如下：

   1. gulp.task(name[,deps],fn) 注册任务。

name: 是任务名称，deps是可选的数组，列出需要在本任务运行要执行的任务，fn是任务体，这是gulp.js的核心，比如下面是非常简单的任务函数：

     gulp.task(“test”,function(){console.log(“111”)});

task方法还可以指定按顺序运行的一组任务，如下：

    gulp.task(“build”,[‘css’,’js’,’java’]);

上面的代码先指定build任务，它按次序有css,js,java三个任务组成，注意：每个任务都是异步调用，所以没有办法保证是那个任务先执行完。

如果希望要按照严格的顺序执行完，可以如下写代码：

gulp.task(‘css’,[‘js’],function(){});

如上代码表明：css的任务依赖于js，所以css一定会在js运行完成后在执行。

如果一个任务名字为default，它表示默认任务，在命令行中直接运行gulp即可。

    gulp.task(‘default’,function(){});

   2.gulp.src(globs[,options])：指明源文件的路径，options是可选的。

   有以下几种形式：

   1.js/app.js 指明确切的文件名。

   2.js/*.js 某个目录所有后缀名为js的文件。

   3.js/**/*.js 某个目录及其所有子目录中的所有后缀名为js的文件。

   4.!js/app.js 除了js/app.js以外的所有文件

   5. *.+(js|css) 匹配项目的根目录下，所有后缀名为js或css的文件。

  Src方法的参数还可以是一个数组，用来指定多个成员，如下：

    gulp.src([‘js/**/*.js’，！js/app.js]).

  3. gulp.dest(path) 指明任务处理后的目标输出路径。

  4.gulp.watch(globs[,options],task)/gulp.watch(globs[,options,cb])，监听文件的变化并运行相应的任务。

如上gulpfile.js代码，我监听了jshint及minify代码，只要语法错误就会在命令行给出提示：如下所示：

官网有更多的关于gulp插件（http://gratimax.net/search-gulp-plugins/） 我们可以根据自己的需求，来需要某个模块，注册任务和执行还是上面一样的。

 

 

npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev

　　gulp配置文件如下：

//在你的项目根目录下创建gulpfile.js，代码如下：
 
// 引入 gulp
var gulp = require('gulp');
 
// 引入组件
var htmlmin = require('gulp-htmlmin'), //html压缩
    imagemin = require('gulp-imagemin'),//图片压缩
    pngcrush = require('imagemin-pngcrush'),
    minifycss = require('gulp-minify-css'),//css压缩
    jshint = require('gulp-jshint'),//js检测
    uglify = require('gulp-uglify'),//js压缩
    concat = require('gulp-concat'),//文件合并
    rename = require('gulp-rename'),//文件更名
    notify = require('gulp-notify');//提示信息
 
// 压缩html
gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./dest'))
    .pipe(notify({ message: 'html task ok' }));
 
});
 
// 压缩图片
gulp.task('img', function() {
  return gulp.src('src/images/*')
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest('./dest/images/'))
    .pipe(notify({ message: 'img task ok' }));
});
 
// 合并、压缩、重命名css
gulp.task('css', function() {
  return gulp.src('src/css/*.css')
    .pipe(concat('main.css'))
    .pipe(gulp.dest('dest/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dest/css'))
    .pipe(notify({ message: 'css task ok' }));
});
 
// 检查js
gulp.task('lint', function() {
  return gulp.src('src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(notify({ message: 'lint task ok' }));
});
 
// 合并、压缩js文件
gulp.task('js', function() {
  return gulp.src('src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dest/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dest/js'))
    .pipe(notify({ message: 'js task ok' }));
});
 
// 默认任务
gulp.task('default', function(){
  gulp.run('img', 'css', 'lint', 'js', 'html');
 
  // 监听html文件变化
  gulp.watch('src/*.html', function(){
    gulp.run('html');
  });
 
  // Watch .css files
  gulp.watch('src/css/*.css', ['css']);
 
  // Watch .js files
  gulp.watch('src/js/*.js', ['lint', 'js']);
 
  // Watch image files
  gulp.watch('src/images/*', ['img']);
});

　　

Gulp 学习总结

　Gulp 自动化工具开发非常方便，便于上手，值得使用。　

一、Gulp安装

　　gulp是基于NodeJS运行的，所以需要想安装NodeJS.  http://nodejs.org/download/

　　安装gulp

# 安装全局环境
npm install gulp -g
#安装本地环境
npm install gulp --save-dev

 

二、Gulp插件安装

npm install browser-sync gulp-compass gulp-sass gulp-rename gulp-jshint gulp-uglify gulp-concat gulp-imagemin gulp-cache gulp-connect gulp-minify-css gulp-sourcemaps gulp-notify gulp-livereload gulp-clean gulp-load-plugins gulp-rev-append gulp-make-css-url-version --save-dev

　　插件可根据自己的需求安装，分别代表：

1、编译Sass,生成雪碧图(gulp-compass);

2、编译sass(gulp-sass);

3、sass浏览器地图(gulp-sourcemaps);

4、重命名文件(gulp-rename);

5、JS语法检测(gulp-jshint);

6、JS丑化(gulp-uglify);

7、JS文件合并(gulp-concat);

8、图片压缩(gulp-imagemin);

9、缓存通知(gulp-cache);

10、web服务(gulp-connect);

11、压缩CSS(gulp-minify-css);

12、css文件引用URL图片加版本号(gulp-make-css-url-version);

13、清空文件夹(gulp-clean);

14、更新通知(gulp-notify);

15、html文件引用加版本号(gulp-rev-append);

16、web服务浏览器同步浏览(browser-sync);　　 // 推荐使用这个作为web服务

三、创建配置文件gulpfile.js

1、引入插件

var gulp = require('gulp'),　　　　　　　　　　　　　
    compass = require('gulp-compass'),          // compass编译Sass, 生成雪碧图
    sass = require('gulp-sass'),                // sass编译
    sourcemaps = require('gulp-sourcemaps'),    // sass地图
    rename = require('gulp-rename'),            // 重命名文件
    jshint = require('gulp-jshint'),            // JS语法检测
    uglify = require('gulp-uglify'),            // JS丑化
    concat = require('gulp-concat'),            // JS拼接
    imagemin = require('gulp-imagemin'),        // 图片压缩
    cache = require('gulp-cache'),              // 缓存通知
    connect = require('gulp-connect'),          // web服务
    minifycss = require('gulp-minify-css'),     // 压缩CSS
    cssver = require('gulp-make-css-url-version'),    // css文件引用URL加版本号
    clean = require('gulp-clean'),              // 清空文件夹
    notify = require('gulp-notify'),            // 更新通知
    rev = require('gulp-rev-append'),           // html添加版本号
    browserSync = require('browser-sync'),      // 浏览器同步
    reload = browserSync.reload;                // 自动刷新

2、配置开发路径，结构为：

/*****项目结构*****
* project(项目名称)
*    |–node_modules 组件目录
*    |–dist 发布环境
*        |–css 样式文件(压缩)
*        |–images 图片文件(压缩图片)
*        |–js js文件(压缩)
*        |–index.html 静态文件(压缩html)
*    |–dev 生产环境
*        |–sass sass文件
*        |–images 图片文件
*        |–js js文件
*        |–index.html 静态文件
*    |–config.rb Compass配置文件
*    |–package.json 项目信息
*    |–gulpfile.js gulp任务文件
**/

gulpfile.js配置文件中的路径为：

// 路径变量
var path = {
    // 开发环境
    dev: {
        html: './dev',
        js: './dev/js',
        sass: './dev/sass',
        css: './dev/css',
        image: './dev/images' 
    },
    // 发布环境
    dist: {
        html: './dist',
        js: './dist/js',
        css: './dist/css',
        image: './dist/images' 
    }
};

3、构建gulp执行任务

// 定义web服务模块，增加浏览器同步浏览
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: '.'
        }
    });
});

// 创建Compass任务，编译Sass生成雪碧图
gulp.task('compass', function() {
    gulp.src(path.dev.sass+'/*.scss')
        .pipe(compass({
            config_file: './config.rb',    // 配置文件
            css: path.dev.css,             // 编译路径
            sass: path.dev.sass         　 // sass路径
            //image: path.dev.image        // 图片路径，用于生成雪碧图
        }))
        .pipe(cssver())                    // CSS文件引用URl加版本号
        .pipe(minifycss())                 // 压缩CSS
        .pipe(gulp.dest(path.dist.css))    // 发布到线上版本
        .pipe(reload({stream: true}));
});

// 压缩HTML
gulp.task('html', function() {
    gulp.src(path.dev.html+"/*.html")
        .pipe(rev())                    // html 引用文件添加版本号
        .pipe(gulp.dest(path.dist.html))
        .pipe(reload({stream: true}));
});

//检查脚本
gulp.task('lint', function() {
    gulp.src(path.dev.js+'/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});// 图片压缩
gulp.task('image', function() {
    gulp.src(path.dev.image+'/*.*')
        .pipe(cache(imagemin()))
        .pipe(reload({stream: true}))
        .pipe(gulp.dest(path.dist.image));
        //.pipe(notify({ message: '图片压缩'}));
});

// 合并压缩JS文件
gulp.task('script', function() {
    gulp.src(path.dev.js+'/*.js')
        //.pipe(concat('all.js'))            // 合并
        //.pipe(gulp.dest(path.dist.js))
        //.pipe(rename('all.min.js'))        // 重命名
        .pipe(uglify())                    // 压缩
        .pipe(gulp.dest(path.dist.js))
        //.pipe(notify({ message: 'JS合并压缩' }))
        .pipe(reload({stream: true}));
});

// 清空文件夹
gulp.task('clean', function() {
    gulp.src([path.dist.css, path.dist.js, path.dist.image], {read: false})
        .pipe(clean());
});

// 默认任务
gulp.task("default", function() {
    gulp.run('browser-sync', 'lint', 'compass', 'script', 'image');

    // 检测文件发送变化 - 分开监听为了执行对应的命令
    gulp.watch(path.dev.html+'/*.*', ['html']);
    gulp.watch(path.dev.sass+'/*.scss', ['compass']);
    gulp.watch(path.dev.image+'/**', ['image']);
    gulp.watch(path.dev.js+'/*.js', ['lint', 'script']);

});

注意：html文件引用增加版本号时，需要在html文件引用路径中增加 ?rev=@@hash 方可在编译时，自动添加版本号

<link rel="stylesheet" type="text/css" href="./css/main.css?rev=@@hash">

4、配置浏览器自动刷新问题

使用gulp的browser-sync插件可以实现浏览器自动刷新，同步浏览的功能，创建实现自动刷新，需要启动自动刷新的插件，在引入插件处

var browserSync = require('browser-sync'),        // 浏览器同步
    reload = browserSync.reload;                　// 自动刷新

之后，创建browser-sync的task任务，并在gulp的启用。

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: '.'
        }
    });
});

baseDir 为默认的服务访问路径，默认访问为 http://localhost:3000, 配置信息为 http://localhost:3001

然后在发生变化要刷新的任务处，添加如下语句即可。详情参考: BrowserSync + Gulp.js

.pipe(reload({stream: true}));

gulpfile.js完整文件如下：

/**
* *****组件安装*****
* npm install gulp browser-sync gulp-compass gulp-sass gulp-rename gulp-jshint gulp-uglify gulp-concat gulp-imagemin gulp-cache gulp-connect gulp-minify-css gulp-sourcemaps gulp-notify gulp-livereload gulp-clean gulp-load-plugins gulp-rev-append gulp-make-css-url-version --save-dev
* 
* *****项目结构*****
* project(项目名称)
*    |–.svn 通过svn管理项目会生成这个文件夹
*    |–node_modules 组件目录
*    |–dist 发布环境
*        |–css 样式文件(style.css style.min.css)
*        |–images 图片文件(压缩图片)
*        |–js js文件(main.js main.min.js)
*        |–index.html 静态文件(压缩html)
*    |–dev 生产环境
*        |–sass sass文件
*        |–images 图片文件
*        |–js js文件
*        |–index.html 静态文件
*    |–config.rb Compass配置文件
*    |-package.json 项目信息
*    |–gulpfile.js gulp任务文件
**/

// 引入 Gulp插件
var gulp = require('gulp'),
    compass = require('gulp-compass'),            // compass编译Sass, 生成雪碧图
    sass = require('gulp-sass'),                // sass编译
    sourcemaps = require('gulp-sourcemaps'),    // sass地图
    rename = require('gulp-rename'),            // 重命名文件
    jshint = require('gulp-jshint'),            // JS语法检测
    uglify = require('gulp-uglify'),            // JS丑化
    concat = require('gulp-concat'),            // JS拼接
    imagemin = require('gulp-imagemin'),        // 图片压缩
    cache = require('gulp-cache'),                // 缓存通知
    connect = require('gulp-connect'),            // web服务
    minifycss = require('gulp-minify-css'),        // 压缩CSS
    cssver = require('gulp-make-css-url-version'),    // css文件引用URL加版本号
    clean = require('gulp-clean'),                // 清空文件夹
    notify = require('gulp-notify'),            // 更新通知
    rev = require('gulp-rev-append'),            // html添加版本号
    browserSync = require('browser-sync'),        // 浏览器同步
    reload = browserSync.reload;                // 自动刷新

// 路径变量
var path = {
    // 开发环境
    dev: {
        html: './dev',
        js: './dev/js',
        sass: './dev/sass',
        css: './dev/css',
        image: './dev/images' 
    },
    // 发布环境
    dist: {
        html: './dist',
        js: './dist/js',
        css: './dist/css',
        image: './dist/images' 
    }
};

// 定义web服务模块
gulp.task('webserver', function() {
    connect.server({
        livereload: true,
        port: 8888
    });
});

// 定义web服务模块，增加浏览器同步浏览
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: '.'
        }
    });
});

// 创建Compass任务，编译Sass生成雪碧图
gulp.task('compass', function() {
    gulp.src(path.dev.sass+'/*.scss')
        .pipe(compass({
            config_file: './config.rb',    // 配置文件
            css: path.dev.css,             // 编译路径
            sass: path.dev.sass         // sass路径
            //image: path.dev.image         // 图片路径，用于生成雪碧图
        }))
        .pipe(cssver())                    // CSS文件引用URl加版本号
        .pipe(minifycss())                // 压缩CSS
        .pipe(gulp.dest(path.dist.css))    // 发布到线上版本
        .pipe(reload({stream: true}));
});

// 压缩HTML
gulp.task('html', function() {
    gulp.src(path.dev.html+"/*.html")
        .pipe(rev())                    // html 引用文件添加版本号
        .pipe(gulp.dest(path.dist.html))
        .pipe(reload({stream: true}));
});

//检查脚本
gulp.task('lint', function() {
    gulp.src(path.dev.js+'/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
// 图片压缩
gulp.task('image', function() {
    gulp.src(path.dev.image+'/*.*')
        .pipe(cache(imagemin()))
        .pipe(reload({stream: true}))
        .pipe(gulp.dest(path.dist.image));
        //.pipe(notify({ message: '图片压缩'}));
});

// 合并压缩JS文件
gulp.task('script', function() {
    gulp.src(path.dev.js+'/*.js')
        //.pipe(concat('all.js'))            // 合并
        //.pipe(gulp.dest(path.dist.js))
        //.pipe(rename('all.min.js'))        // 重命名
        .pipe(uglify())                    // 压缩
        .pipe(gulp.dest(path.dist.js))
        //.pipe(notify({ message: 'JS合并压缩' }))
        .pipe(reload({stream: true}));
});

// 清空文件夹
gulp.task('clean', function() {
    gulp.src([path.dist.css, path.dist.js, path.dist.image], {read: false})
        .pipe(clean());
});

// 默认任务
gulp.task("default", function() {
    gulp.run('browser-sync', 'lint', 'compass', 'script', 'image');

    // 检测文件发送变化 - 分开监听为了执行对应的命令
    gulp.watch(path.dev.html+'/*.*', ['html']);
    gulp.watch(path.dev.sass+'/*.scss', ['compass']);
    gulp.watch(path.dev.image+'/**', ['image']);
    gulp.watch(path.dev.js+'/*.js', ['lint', 'script']);

});

 gulp-compass 合并雪碧图使用的 config.rb 配置文件，内容如下：

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "./dev/css"
sass_dir = "./dev/sass"
images_dir = "./dev/images"
javascripts_dir = "./dev/js"

# You can select your preferred output style here (can be overridden via the command line):
# 合并雪碧图的方式
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# 相对路径
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

四、运行gulp

在项目目录下执行 gulp 命令就会运行 default 任务，并且启动监听，之所以分开设置监听任务，是为了执行对应命令，如果合并在一起执行，会增加编译时间。

五、gulpfile.js配置文件参数说明

1、gulp.task()

gulp模块的task方法，用于定义具体的任务，第一个参数为任务名，第二个参数为任务函数，如image任务，调用直接运行 gulp image

gulp.task('image', function() {
    console.log('图片任务执行');
});

task方法也可以知道一组任务，如：

gulp.task('default',['html', 'sass', 'js']);

2、gulp.src()

gulp模块的src方法，用于产生数据流，表示要处理的文件，一般有以下几种格式：

• js/app.js：指定确切的文件名。
• js/*.js：某个目录所有后缀名为js的文件。
• js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件。
• !js/app.js：除了js/app.js以外的所有文件。
• *.+(js|css)：匹配项目根目录下，所有后缀名为js或css的文件。

src方法的参数可以是一个数组，如：

gulp.src(['./js/*.js', './sass/*.scss']);

3、gulp.watch()

gulp模块的watch方法，用于指点需要监视的文件，一旦文件发生变动，就运行指点任务。

gulp.watch('./js/*.js', ['lint', 'script']);

4、pipe

.pipe为每个任务的连接，执行完一个任务之后，再次连接执行下一个任务，如：

.pipe(minifycss())                // 压缩CSS
.pipe(gulp.dest(path.dist.css));  // 发布到线上版本

先执行压缩，再发布到线上版本

六、gulp学习资料参考

1、Gulp.js：比 Grunt 更简单的自动化的项目构建利器

2、Gulp使用指南

3、Gulp：任务自动管理工具

4、Gulp安装及配合组件构建前端开发一体化

5、gulp详细入门教程

6、BrowserSync + Gulp.js

7、Gulp.js-LiveReload 自動刷新頁面

8、https://www.npmjs.com/package/gulp

9、Getting Started with Gulp

10、gulp plugins 插件介绍

11、前端构建工具gulpjs的使用介绍及技巧

混淆JavaScript代码的gulp插件：gulp-obfuscate

gulp-obfuscate是一个混淆JavaScript代码的gulp插件。

Install

$ npm install --save-dev gulp-obfuscate

用法

var gulp = require('gulp');var obfuscate = require('gulp-obfuscate');

gulp.task('default', function () {
    return gulp.src('test.js')
        .pipe(obfuscate());
});

　　

demo：

package.json
 

{
  "name": "tongbanke",
  "version": "1.0.0",
  "description": "tobanke'",
  "main": "main.js",
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "gulp"
  },
  "keywords": [
    "gulp",
    "test"
  ],
  "author": "kongzhi",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-coffee": "^1.4.2",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^2.3.1",
    "gulp-jshint": "^2.0.1",
    "gulp-less": "^3.1.0",
    "gulp-obfuscate": "^0.2.9",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^0.6.2",
    "jshint": "^2.9.3"
  }
}

　　

gulpfile：

var gulp = require('gulp');

var concat = require('gulp-concat'); //文件合并
var uglify = require('gulp-uglify'); //文件压缩
var rename = require('gulp-rename'); //文件重命名

var obfuscate = require('gulp-obfuscate'); //代码混淆
 
// 语法检查

gulp.task('lint', function() {
	console.log('111');
	return gulp.src('src/*.js')
		.pipe(jshint())
		.pipe(jshint.reporter('default'));
});

// 合并文件之后压缩代码
gulp.task('minify', function() {
	console.log('压缩合并');
	return gulp.src('src/*.js')
		.pipe(concat('main.js'))
		.pipe(gulp.dest('min.js'))
		.pipe(uglify())
		.pipe(rename('main.min.js'))
		.pipe(gulp.dest('min.js'));

});

// 监视文件的变化
gulp.task('watch', function() {
	console.log('文件有变换');
	gulp.watch('src/*.js', ['minify']);
});

// 注册缺省任务
gulp.task('default', ['minify', 'watch'], function() {
	console.log('IS OK!');
	return gulp.src('main.min.js')
		.pipe(obfuscate());    //压缩完代码混淆
});

　　

原创翻译，有不当的地方欢迎指出。转载请指明出处。谢谢！

---

对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。

Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。通过本文，我们将知道如何使用Gulp来改变开发流程，从而使开发更加快速高效。

What Is Gulp?

Gulp是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript（或者CoffeeScript）里。前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS、解析模板以及在文件变动时编译LESS文件（当然这些只是一小部分例子）。

Gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。例如，有些插件可以用来执行JSHint、编译CoffeeScript，执行Mocha测试，甚至更新版本号。

对比其他构建工具，比如Grunt，以及最近流行的Broccoli，我相信Gulp会更胜一筹（请看后面的”Why Gulp?”部分），同时我汇总了一个使用Javascript编写的构建工具清单，可供大家参考。

Gulp是一个可以在GitHub上找到的开源项目。

Installing Gulp

安装Gulp的过程十分简单。首先，需要在全局安装Gulp包：

npm install -g gulp

然后，在项目里面安装Gulp：

npm install --save-dev gulp

Using Gulp

现在我们创建一个Gulp任务来压缩JavaScript文件。首先创建一个名为gulpfile.js的文件，这是定义Gulp任务的地方，它可以通过gulp命令来运行，接着把下面的代码放到gulpfile.js文件里面。

var gulp = require('gulp'),
   uglify = require('gulp-uglify');

gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});

然后在npm里面运行npm install -–save-dev gulp-uglify来安装gulp-uglify，最后通过运行gulp minify来执行任务。假设js目录下有个app.js文件，那么一个新的app.js将被创建在编译目录下，它包含了js/app.js的压缩内容。想一想，到底发生了什么？

我们只在gulpfile.js里做了一点事情。首先，我们加载gulp和gulp-uglify模块：

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

然后，我们定义了一个叫minify的任务，它执行时会调用函数，这个函数会作为第二个参数：

gulp.task('minify', function () {

});

最后，也是难点所在，我们需要定义任务应该做什么：

gulp.src('js/app.js')
   .pipe(uglify())
   .pipe(gulp.dest('build'))

如果你对数据流非常熟悉（其实大多数前端开发人员并不熟悉），上面所提供的代码对你来说就没有太大意义了。

STREAMS

数据流能够通过一系列的小函数来传递数据，这些函数会对数据进行修改，然后把修改后的数据传递给下一个函数。

在上面的例子中，gulp.src()函数用字符串匹配一个文件或者文件的编号（被称为“glob”）,然后创建一个对象流来代表这些文件，接着传递给uglify()函数，它接受文件对象之后返回有新压缩源文件的文件对象，最后那些输出的文件被输入gulp.dest()函数，并保存下来。

整个数据流动过程如下图所示： 

当只有一个任务的时候，函数并不会起太大的作用。然而，仔细思考下面的代码：

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

在运行这段程序之前，你需要先安装gulp,gulp-jshint,gulp-uglify和gulp-concat。

这个任务会让所有的文件匹配js/*.js（比如js目录下的所有JavaScript文件），并且执行JSHint，然后打印输出结果，取消文件缩进，最后把他们合并起来，保存为build/app.js，整个过程如下图所示： 

如果你对Grunt 足够熟悉，就会注意到，Gulp和Grunt的工作方式很不一样。Grunt不使用数据流，而是使用文件，对文件执行单个任务然后保存到新的文件中，每个任务都会重复执行所有进程，文件系统频繁的处理任务会导致Grunt的运行速度比Gulp慢。

如果想要获取更加全面的数据流知识，请查看“Stream Handbook”.

GULP.SRC()

gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组，然后返回一个可以传递给插件的数据流。

Gulp使用node-glob来从你指定的glob里面获取文件，这里列举下面的例子来阐述，方便大家理解：

• js/app.js 精确匹配文件
• js/*.js 仅匹配js目录下的所有后缀为.js的文件
• js/*/.js 匹配js目录及其子目录下所有后缀为.js的文件
• !js/app.js 从匹配结果中排除js/app.js，这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用
• *.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件

此外，Gulp也有很多其他的特征，但并不常用。如果你想了解更多的特征，请查看Minimatch文档。

js目录下包含了压缩和未压缩的JavaScript文件，现在我们想要创建一个任务来压缩还没有被压缩的文件，我们需要先匹配目录下所有的JavaScript文件，然后排除后缀为.min.js的文件:

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

DEFINING TASKS

gulp.task()函数通常会被用来定义任务。当你定义一个简单的任务时，需要传入任务名字和执行函数两个属性。

gulp.task('greet', function () {
   console.log('Hello world!');
});

执行gulp greet的结果就是在控制台上打印出“Hello world”.

一个任务有时也可以是一系列任务。假设要定义一个任务build来执行css、js、imgs这三个任务，我们可以通过指定一个任务数组而不是函数来完成。

gulp.task('build', ['css', 'js', 'imgs']);

这些任务不是同时进行的，所以你不能认为在js任务开始的时候css任务已经结束了，也可能还没有结束。为了确保一个任务在另一个任务执行前已经结束，可以将函数和任务数组结合起来指定其依赖关系。例如，定义一个css任务，在执行前需要检查greet任务是否已经执行完毕，这样做就是可行的:

gulp.task('css', ['greet'], function () {
   // Deal with CSS here
});

现在，当执行css任务时，Gulp会先执行greet任务，然后在它结束后再调用你定义的函数。

DEFAULT TASKS

你可以定义一个在gulp开始运行时候默认执行的任务，并将这个任务命名为“default”：

gulp.task('default', function () {
   // Your default task
});

PLUGINS

Gulp上有超过600种插件供你选择，你可以在插件页面或者npm上搜索gulpplugin来浏览插件列表。有些拥有“gulpfriendly”标签的插件，他们不能算插件，但是能在Gulp上正常运行。 需要注意的是，当直接在npm里搜索时，你无法知道某一插件是否在黑名单上（你需要滚动到插件页面底部才能看到）。

大多数插件的使用都很方便，它们都配有详细的文档，而且调用方法也相同（通过传递文件对象流给它），它们通常会对这些文件进行修改（但是有一些插件例外，比如validators），最后返回新的文件给下一个插件。

让我们用前面的js任务来详细说明一下：

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

这里使用了三个插件，gulp-jshint,gulp-uglify和gulp-concat。开发者可以参考插件的README文档，插件有很多配置选项，而且给定的初始值通常能满足需求。细心的读者可能会发现，程序中JSHint插件执行了2次，这是因为第一次执行JSHint只是给文件对象附加了jshint属性，并没有输出。你可以自己读取jshint的属性或者传递给默认的JSHint的接收函数或者其他的接收函数,比如jshint-stylish.

其他两个插件的作用很清楚：uglify()函数压缩代码，concat(‘app.js’)函数将所有文件合并到一个叫app.js的文件中。

GULP-LOAD-PLUGINS

我发现gulp-load-plugin模块十分有用，它能够自动地从package.json中加载任意Gulp插件然后把它们附加到一个对象上。它的基本用法如下所示：

var gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

你可以把所有代码写到一行，但是我并不推荐这样做。

在执行那些代码之后，插件对象就已经包含了插件，并使用“驼峰式”的方式进行命名（例如，gulp-ruby-sass将被加载成plugins.rubySass），这样就可以很方便地使用了。例如，前面的js任务简化为如下：

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('default'))
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

假设package.json文件如下面所示：

{
   "devDependencies": {
      "gulp-concat": "~2.2.0",
      "gulp-uglify": "~0.2.1",
      "gulp-jshint": "~1.5.1",
      "gulp": "~3.5.6"
   }
}

这个例子虽然已经够短了，但是使用更长更复杂的Gulp文件会把它们简化成一两行代码。

三月初发布的Gulp-load-plugins0.4.0版本添加了延迟加载功能，提高了插件的性能，因为插件在使用的时候才会被加载进来，你不用担心package.json里未被使用的插件影响性能（但是你需要把他们清理掉）。换句话说，如果你在执行任务时只需要两个插件，那么其他不相关的插件就不会被加载。

WATCHING FILES

Gulp可以监听文件的修改动态，然后在文件被改动的时候执行一个或多个任务。这个特性十分有用（对我来说，这可能是Gulp中最有用的一个功能）。你可以保存LESS文件，接着Gulp会自动把它转换为CSS文件并更新浏览器。

使用gulp.watch()方法可以监听文件，它接受一个glob或者glob数组（和gulp.src()一样）以及一个任务数组来执行回调。

让我们看看下面，build任务可以将模板转换成html格式，然后我们希望定义一个watch任务来监听模板文件的变化，并将这些模板转换成html格式。watch函数的使用方法如下所示：

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

现在，当改变一个模板文件时，build任务会被执行并生成HTML文件，也可以给watch函数一个回调函数，而不是一个任务数组。在这个示例中，回调函数有一个包含触发回调函数信息的event对象：

gulp.watch('templates/*.tmpl.html', function (event) {
   console.log('Event type: ' + event.type); // added, changed, or deleted
   console.log('Event path: ' + event.path); // The path of the modified file
});

Gulp.watch()的另一个非常好的特性是返回我们熟知的watcher。利用watcher来监听额外的事件或者向watch中添加文件。例如，在执行一系列任务和调用一个函数时，你就可以在返回的watcher中添加监听change事件:

var watcher = gulp.watch('templates/*.tmpl.html', ['build']);
watcher.on('change', function (event) {
   console.log('Event type: ' + event.type); // added, changed, or deleted
   console.log('Event path: ' + event.path); // The path of the modified file
});

除了change事件，还可以监听很多其他的事件:

• end 在watcher结束时触发（这意味着，在文件改变的时候，任务或者回调不会执行）
• error 在出现error时触发
• ready 在文件被找到并正被监听时触发
• nomatch 在glob没有匹配到任何文件时触发

Watcher对象也包含了一些可以调用的方法：

• watcher.end() 停止watcher（以便停止执行后面的任务或者回调函数）
• watcher.files() 返回watcher监听的文件列表
• watcher.add(glob) 将与指定glob相匹配的文件添加到watcher（也接受可选的回调当第二个参数）
• watcher.remove(filepath) 从watcher中移除个别文件

Reloading Changes In The Browser

当一个文件被修改或者Gulp任务被执行时可以用Gulp来加载或者更新网页。LiveReload和BrowserSync插件就可以用来实现在游览器中加载更新的内容。

LIVERELOAD

LiveReload结合了浏览器扩展（包括Chrome extension），在发现文件被修改时会实时更新网页。它可以和gulp-watch插件或者前面描述的gulp-watch()函数一起使用。下面有一个gulp-livereload仓库中的README文件提到的例子:

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload'),
    watch = require('gulp-watch');

gulp.task('less', function() {
   gulp.src('less/*.less')
      .pipe(watch())
      .pipe(less())
      .pipe(gulp.dest('css'))
      .pipe(livereload());
});

这会监听到所有与less/*.less相匹配的文件的变化。一旦监测到变化，就会生成css并保存，然后重新加载网页.

BROWSERSYNC

BroserSync在浏览器中展示变化的功能与LiveReload非常相似，但是它有更多的功能。

当你改变代码的时候，BrowserSync会重新加载页面，或者如果是css文件，会直接添加进css中，页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。假设你正在开发单页应用的第4页，刷新页面就会导致你回到开始页。使用LiveReload的话，你就需要在每次改变代码之后还需要点击四次，而当你修改CSS时，插入一些变化时，BrowserSync会直接将需要修改的地方添加进CSS，就不用再点击回退。

BrowserSync提供了一种在多个浏览器里测试网页的很好方式（查看大图）。

BrowserSync也可以在不同浏览器之间同步点击翻页、表单操作、滚动位置。你可以在电脑和iPhone上打开不同的浏览器然后进行操作。所有设备上的链接将会随之变化，当你向下滚动页面时，所有设备上页面都会向下滚动（通常还很流畅！）。当你在表单中输入文本时，每个窗口都会有输入。当你不想要这种行为时，也可以把这个功能关闭。

BrowserSync不需要使用浏览器插件，因为它本身就可以给你提供文件。（查看大图）

BrowserSync不需要使用浏览器插件，因为它本身就可以为你提供文件服务（如果文件是动态的，则为他们提供代理服务）和用来开启浏览器和服务器之间的socket的脚本服务。到目前为止这个功能的使用都十分顺畅。

实际上BrowserSync对于Gulp并不算一种插件，因为BrowserSync并不像一个插件一样操作文件。然而，npm上的BrowserSync模块能在Gulp上被直接调用。

首先，需要通过npm安装一下：

npm install --save-dev browser-sync

然后gulpfile.js会启动BrowserSync并监听文件：

var gulp = require('gulp'),
    browserSync = require('browser-sync');

gulp.task('browser-sync', function () {
   var files = [
      'app/**/*.html',
      'app/assets/css/**/*.css',
      'app/assets/imgs/**/*.png',
      'app/assets/js/**/*.js'
   ];

   browserSync.init(files, {
      server: {
         baseDir: './app'
      }
   });
});

执行gulp browser-sync后会监听匹配文件的变化，同时为app目录提供文件服务。

此外BrowserSync的开发者还写了很多关于BrowserSync+Gulp仓库的其他用途。

Why Gulp?

前面提到过，Gulp是为数不多的使用JavaScript开发的构建工具之一，也有其他不是用JavaScript开发的构建工具，比如Rake，那么我们为什么要选择Gulp呢?

目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp。Grunt在2013年非常流行，因为它彻底改变了许多人开发网站的方式，它有上千种插件可供用户使用，从linting、压缩、合并代码到使用Bower安装程序包,启动Express服务都能办到。这些和Gulp的很不一样，Gulp只有执行单个小任务来处理文件的插件，因为任务都是JavaScript（和Grunt使用的大型对象不同），根本不需要插件，你只需用传统方法启动一个Express服务就可以了。

Grunt任务拥有大量的配置，会引用大量你实际上并不需要的对象属性，但是Gulp里同样的任务也许只有几行。让我们看个简单的Gruntfile.js，它规定一个将LESS转换为CSS的任务，然后执行Autoprefixer:

grunt.initConfig({
   less: {
      development: {
         files: {
            "build/tmp/app.css": "assets/app.less"
         }
      }
   },

   autoprefixer: {
      options: {
         browsers: ['last 2 version', 'ie 8', 'ie 9']
      },
      multiple_files: {
         expand: true,
         flatten: true,
         src: 'build/tmp/app.css',
         dest: 'build/'
      }
   }
});

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');

grunt.registerTask('css', ['less', 'autoprefixer']);

与Gulpfile.js文件进行对比，它们执行的任务相同：

var gulp = require('gulp'),
   less = require('gulp-less'),
   autoprefix = require('gulp-autoprefixer');

gulp.task('css', function () {
   gulp.src('assets/app.less')
      .pipe(less())
      .pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
      .pipe(gulp.dest('build'));
});

因为Grunt比Gulp更加频繁地操作文件系统，所以使用数据流的Gulp总是比Grunt快。对于一个小的LESS文件，gulpfile.js通常需要6ms，而gruntfile.js则需要大概50ms——慢8倍多。这只是个简单的例子，对于长的文件，这个数字会增加得更显著。