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监听文件自动编译