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