Gulp.js介绍

简介

Gulp是一个nodejs的streaming构建工具。
优势：
1. 内置文件监听
2. Gulp大部分的插件只完成一件事。
3. Gulp使用js语言，易读，易修改，扩展性好
4. Gulp速度很快，其通过流的形式，让数据在不同的Gulp插件之间经过，而文件的写操作只会出现在task的最后。
大约有40%的web前端开发者使用Gulp。
具体来说，Gulp不能做任何事，你需要做的是：
1、安装Gulp插件
2、利用安装的插件来写task
PS.翻译了半天，才发现有人翻译好了。。
Gulp.js介绍

使用Gulp需要新建gulpfile.js，就像grunt需要gruntfile.js一样。
在根目录新建gulpfile.js
Gulp只有五个方法，命令之间的衔接用pipe

task，run，watch，src，和dest

gulp.task(name, function)设置任务
gulp.run(task)执行任务
gulp.watch(glob, function)当glob内容发生改变时，执行fn
gulp.src(glob)返回一个可读的stream
gulp.dest(glob)返回一个可写的stream

task

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

gulp.task('default', function () {
    return gulp.src('spec/google.spec.js')
        .pipe(jasmine());
});

watch

gulp.task('watch',function(){
    gulp.watch('./stylesheets/**/*.scss',['sass']);
    gulp.watch('./index.html',['sass']);
})

run

gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

这时，我们创建了一个基于其他任务的default任务。使用.run()方法关联和运行我们上面定义的任务，使用.watch()方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。
现在，回到命令行，可以直接运行gulp任务了。
直接运行gulp相当于执行gulp default，也可以通过gulp sass执行特定的任务

src

上边已经有例子了，获取文件流，相当于java里的FileInputStream -r

dest

返回可写的流。顾名思义，相当于java里的FileInputStream -w，把文件写入到哪。比如下面的sass插件里就有。

Gulp有比较多的插件，以下是几个插件的介绍。

Gulp插件

gulp-jshint

var gulp = require("gulp");  
var jshint = require("gulp-jshint");  
gulp.task("lint",function(){  
   gulp.src("src/js/*.js")  
      .pipe(jshint())  
      .pipe(jshint.reporter("default"))  
}); 

gulp.src()找到js文件后，通过管道操作pipe，把文件传递给jshint()来检查代码。Link任务会检查js/目录下得js文件有没有报错或警告。

gulp-sass

gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

Sass任务会编译scss/目录下的scss文件，并把编译完成的css文件保存到/css目录中。

gulp-concat

gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

scripts任务会合并js/目录下得所有得js文件并输出到dist/目录，然后Gulp会重命名、压缩合并的文件，也输出到dist/目录。

Gulp有用的其他插件

gulp-load-plugins – 在无需 require 声明的情况下加载所有Gulp插件对应的模块；
gulp-preprocess – 一个简单的 HTML 和 JavaScript 预处理器；
gulp-less – Less CSS预处理器 插件；
gulp-stylus – Stylus CSS预处理器 插件；
gulp-sequence – 按照特定顺序执行一系列Gulp任务；
gulp-plumber – 错误处理机制，以防Gulp在发生出错时终止执行；
gulp-size – 显示文件大小并保存；
gulp-nodemon – 使用 nodemon 在发生改动时自动重启 Node.js 应用；
gulp-util – 包含日志和代码高亮在内的实用功能；

附：你真的需要Grunt/gulp吗？
使用gulp构建nodejs
好用的HTTP模块SeperAgent
玩转gulp之gulp-watch监听文件自动编译