glup学习

建立：在项目根目录新建一个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中对应输出流

基本代码：

• 引入组件     //下载：   npm install gulp-jshint --save-dev

  var gulp = require(‘gulp‘); 
  
  var jshint = require(‘gulp-jshint‘);
  var sass = require(‘gulp-sass‘);
  var concat = require(‘gulp-concat‘);
  var uglify = require(‘gulp-uglify‘);
  var rename = require(‘gulp-rename‘);
  

  常用组件：

  gulp-ruby-sass : 支持sass
  gulp-minify-css : 压缩css
  gulp-jshint : 检查js
  gulp-uglify : 压缩js
  gulp-concat : 合并文件
  gulp-rename : 重命名文件
  gulp-htmlmin : 压缩html
  gulp-clean : 清空文件夹

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

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

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

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

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

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

• 基于其他任务：创建了一个基于其他任务的default任务。使用.run()方法关联和运行我们上面定义的任务，使用.watch()方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。

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

  　　

glup学习

原文：http://www.cnblogs.com/jinkspeng/p/4190391.html