gulp学习

建立：在项目根目录新建一个js文件并命名为gulpfile.js；

方法：gulp只有五个方法：

task：用来定义任务
- 当定义一个简单的任务时，需要传入任务名字和执行函数两个属性。
- 一个任务有时也可以是一系列任务。假设要定义一个任务build来执行css、js、imgs这三个任务可以通过指定一个任务数组而不是函数来完成。
```
gulp.task('build', ['css', 'js', 'imgs']);
```
- 这些任务不是同时进行的，所以不能认为在js任务开始的时候css任务已经结束了，也可能还没有结束。为了确保一个任务在另一个任务执行前已经结束，可以将函数和任务数组结合起来指定其依赖关系。
```
gulp.task('css', ['greet'], function () {
   // Deal with CSS here
});
```
run
watch：监听文件，它接受一个glob或者glob数组（和gulp.src()一样）以及一个任务数组来执行回调。
- build任务可以将模板转换成html格式，然后定义一个watch任务来监听模板文件的变化，
```
gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});
```
- 也可以给watch函数一个回调函数
```
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
});　　
```
- 在返回的watcher中添加监听事件:　
```
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
});
```
  - end 在watcher结束时触发（这意味着，在文件改变的时候，任务或者回调不会执行）
  - error 在出现error时触发
  - ready 在文件被找到并正被监听时触发
  - nomatch 在glob没有匹配到任何文件时触发
- 在返回的watcher中使用函数:
  - watcher.end() 停止watcher（以便停止执行后面的任务或者回调函数）
  - watcher.files() 返回watcher监听的文件列表
  - watcher.add(glob) 将与指定glob相匹配的文件添加到watcher（也接受可选的回调当第二个参数）
  - watcher.remove(filepath) 从watcher中移除个别文件
src：gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组，然后返回一个可以传递给插件的数据流。例子：
- js/app.js 精确匹配文件
- js/*.js 仅匹配js目录下的所有后缀为.js的文件
- js/**/*.js 匹配js目录及其子目录下所有后缀为.js的文件
- !js/app.js 从匹配结果中排除js/app.js，这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用
- *.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件
dest ：//在stream中对应输出流

常用代码：

Lint任务: //Link任务会检查js/目录下得js文件有没有报错或警告。

//gulp-jshint

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

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

//gulp-sass, gulp-less, gulp-coffee

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

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

//合并: gulp-concat; 压缩js: gulp-uglify;
//压缩css: gulp-minifycss, gulp-csso;  重命名:gulp-rename

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'));
});

删除文件

//del

del(['client/public/dist/css/*.css'], function (err) {});

重新载入

//gulp-livereload; 要配合chrome插件

gulp.task('reload', function () {
  gulp.src(['./index.ejs'])
    .pipe(livereload());
});

gulp.task('watch:frontend', function () {
  livereload.listen();
  gulp.watch([
  	'./inde.ejs',
  	'index.js'
  ], ['reload']);
});

添加版本号

var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var revDel = require('rev-del');

gulp.task('assets', function(){
  var manifest = gulp.src('build/rev-manifest.json');
  
  return gulp.src('src/**')
    .pipe(rev())   //将src中的内容加版本号
    .pipe(gulp.dest('build'))
    .pipe(rev.manifest())
    .pipe(revDel({dest: 'build'}))
    .pipe(gulp.dest('build'));
});

gulp.task('html', ['assets'], function(){
  var manifest = gulp.src('build/rev-manifest.json');
  
  return gulp.src('index.html')
    .pipe(revReplace({manifest: manifest}))
    .pipe(gulp.dest('build'));
});

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

自定义开启程序

//gulp-nodemon

gulp.task('develop', function() {
  nodemon({script: 'server/index.js'})
    .on('restart', function() {
    	console.log('restarted!');
    })	
});