gulp官方网站： http://gulpjs.com/

安装

1. 如果之前安装过全局gulp, 执行npm rm -g gulp删除旧版, 执行以下命令安装最新版本

    npm install -g gulp-cli
   

2. 为项目安装gulp依赖

    npm install --save-dev gulp
   

3. 项目根目录创建配置文件gulpfile.js

    var gulp = require('gulp')
   
    gulp.task('default', function () {})
   

4. 运行gulp

    gulp
   

完整项目地址fe-sass-base

添加配置文件config.json

{
    "port": 7200,
    "livereload": true,
    "open": false,

    "dest": "./build",
    "uglify": false
}

gulpfile.js引入配置

var config = require('./config.json')

删除编译目录文件

安装del包

npm install del --save-dev

添加clean任务

gulp.task('clean', function () {
    return del(config.dest)
})

启动静态服务器

安装gulp-webserver

npm install gulp-webserver --save-dev

添加webserver任务

gulp.task('webserver', function () {
    gulp.src('./')
        .pipe($.webserver({
            livereload: config.livereload,
            open: config.open,
            port: config.port
        }))
})

编译sass, autoprefix, sourcemap, 压缩

安装插件

npm install --save-dev gulp-sass gulp-sourcemaps gulp-autoprefixer gulp-if gulp-cssnano

任务

gulp.task('sass', function () {
    return gulp.src('./src/app/css/**/*.scss')
        .pipe($.sourcemaps.init())
        .pipe($.sass().on('error', $.sass.logError))
        .pipe($.autoprefixer(autoPrefixerConfig))
        .pipe($.if(config.uglify, $.cssnano()))
        .pipe($.if(!config.uglify, $.sourcemaps.write()))
        .pipe(gulp.dest(config.dest + '/app/css'))
})

编译文件, 监控修改, 启动本地服务器

安装插件

npm install --save-dev run-sequence

任务

var build = ['sass']

gulp.task('dev', function (callback) {
    runSequence(
        build,
        'watch',
        'webserver',
        callback
    )
})

gulp API

官方地址：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp.src(globs[, options])

读取glob指定的文件并返回可供pipe使用的流。

gulp.src('client/templates/*.jade')
    .pipe(jade())
    .pipe(minify())
    .pipe(gulp.dest('build/minified_templates'));

glob可以使文件路径或者node-glob syntax的字符串

globs

Type: string or Array

glob语法的字符串或者数组

options

Type: Object

传递给node-glob的参数

options.buffer

Type: Boolean Default： true

设置为false时方法返回file.contents作为流（不对文件进行缓存）。当需要处理大文件的时候很有用

options.read

Type：boolean Default： true

Setting this to false will return file.contents as null and not read the file at all.

options.base

Type：String Default： 对特定glob，值是它之前的路径

如：src/js/**/*.js对应的golb是**/*.js匹配的路径，base为src/js/

base用于gulp.dest输出时确定路径，特定文件完整路径中去掉base后的部分将对应结构输出到dest指定目录。

例：client/js/somedir/somefile.js在下面不同base下的输出：

gulp.src('client/js/**/*.js')   // 匹配base为client/js/，glob为somedir/somefile.js
    .pipe(minify())
    .pipe(gulp.dest('build'));  // 输出路径：build/somedir/somefile.js

gulp.src('client/js/**/*.js', {base: 'client'})   // 此时glob为js/somedir/somefile.js
    .pipe(minify())
    .pipe(gulp.dest('build'));  // 输出为build/js/somedir/somefile.js

gulp.dest(path[, options])

文件输出文件夹，对多个源文件分别输出目标文件，如果path指定文件夹不存在，会对应创建。

gulp.src('./client/templates/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('./build/templates'))
    .pipe(minify())
    .pipe(gulp.dest('./build/minified_templates'));

文件的输出路径由指定的path目录结合特定文件的相对路径（文件路径去掉base得到相对路径）得到。

path

Type: string or Function

文件输出路径。

options

options.cwd

Type: String Default: process.cwd()

输出目录的cwd，只有输出目录为相对路径时此参数才起作用

options.mode

Type：string Default: 0777

输出文件的模式

gulp.task(name[, deps], fn)

定义任务

gulp.task('somename', function () {
    // do stuff
});

name

任务名称。需要通过命令行执行的任务，任务名不能包含空格

deps

Type: Array

当前任务所依赖的任务的名字。所有依赖任务执行完之后，当前任务才执行

gulp.task('mytask', ['array', 'of', 'task', 'names'], function () {
    // do stuff
});

注意： 要确保所有依赖任务都完成，所依赖的任务都必须符合async定义： take in a callback or return a promise or event stream

fn

定义任务的函数。通常格式如下：

gulp.src()
    .pipe(someplugin());

异步任务支持

通过以下方法实现异步任务定义：

• 接受回调

    var exec = require('child_process').exec;
    gulp.task('jekyll', function (cb) {
        exec('jekyll build', function (err) {
            if (err) {
                return cb(err); // return error
            }
            cb(); // finish task
        });
    });
  

• 返回流

    gulp.task('somename', function () {
        var stream = gulp.src('client/**/*.js')
            .pipe(minify())
            .pipe(gulp.dest('build'));
        return stream;
    });
  

• 返回promise

    var Q = require('q');
  
    gulp.task('somename', function () {
        var deferred = Q.defer();
  
        setTimeout(function () {
            deferred.resolve();
        }, 100);
  
        return deferred.promise;
    });
  

gulp.watch(glob[, opts], tasks) or gulp.watch(glob[, opts, cb])

监控文件修改并执行指定操作

gulp.watch(glob[, opts], tasks)

glob

Type: String or Array

单个或多个需要监控的glob

opts

Type： Object

选项

tasks

Type: Array

监视文件被修改时需要执行的任务（通过gulp.task()添加的）

var watcher = gulp.watch('js/**/*.js', ['uglify', 'reload']);

watcher.on('change', function (event) {
    console.log('File ' + event.path + ' was ' + event.type)；
});

gulp.watch(glob[, opts, cb])

glob

Type: String or Array

需要监控的一个或多个glob

opts

type： Object

参数

cb(event)

Type: Function

有文件被修改时执行的回调

gulp.watch('js/**/*.js', function (event) {
    console.log('File ' + event.path + ' was ' + event.type);
});

event.type

Type: String

文件发送变化的类型：added, changed, deleted

event.path

Type: String

发生修改的文件路径

gulp-load-plugins自动加载package.json配置的gulp插件

地址： https://github.com/jackfranklin/gulp-load-plugins

使用gulp-jshint检验js代码

以下代码为jshint指定配置文件信息。官方网址：https://github.com/spenceralger/gulp-jshint

var gulp = require('gulp');

var jshint = require('gulp-jshint');
var jshintConfig = './.jshintrc';

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

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

使用gulp-ruby-sass编译sass

官方网址：https://github.com/sindresorhus/gulp-ruby-sass

1. 安装ruby
2. 安装sass：gem install sass
3. npm install gulp-ruby-sass --save-dev

4. 配置gulpfile.js

    var gulp = require('gulp');
   
    var sass = require('gulp-ruby-sass');
   
    gulp.task('style', function () {
        return gulp.src('./app/css/**/*.scss')
            .pipe(sass({
                sourcemap: true,
                sourcemapPath: '../css'
            }))
            .on('error', function (err) {
                console.log(err.message);
            })
            .pipe(gulp.dest('./dist/css'));
    });
   

5. gulp style编译scss文件得到css

使用gulp-autoprefixer添加css3厂商前缀

官网：https://github.com/sindresorhus/gulp-autoprefixer

1. npm install gulp-autoprefixer --save-dev

2. 配置gulpfile.js

    var gulp = require('gulp');
   
    var autoprefixer = require('gulp-autoprefixer');
   
    gulp.task('prefix', function () {
        return gulp.src('./app/css/**/*.css')
            .pipe(autoprefixer({
                borwsers: ['last 2 versions'],
                cascade: false
            }))
            .pipe(gulp.dest('./dist/css'));
    });
   

3. gulp prefix

gulp-minify-css压缩css

官方网址：https://github.com/jonathanepollack/gulp-minify-css

var gulp = require('gulp');

var minifyCSS = require('gulp-minify-css');

gulp.task('minify-css', function () {
    gulp.src('./app/css/**/*.css')
        .pipe(minifyCSS({keepBreaks: true}))
        .pipe(gulp.dest('./dist/css'));
});

gulp-changed检查文件是否修改

官方网址：https://www.npmjs.org/package/gulp-changed 例子见minify-html

gulp-minify-html压缩html

官方网址：https://github.com/jonathanepollack/gulp-minify-html

gulp.task('html', function () {
    var src = './app/**/*.html';
    var dest = './dist';

    return gulp.src(src)
        .pipe(changed(dest))
        .pipe(minifyhtml({quotes: true}))
        .pipe(gulp.dest(dest));
});