gulp總結

安裝

npm install gulp

新建gulpfile.js

gulpfile.js是gulp項目的配置文件。

運行gulp

命令行輸入gulp default或gulp。
若想要執行單個任務，輸入gulp <task name>。

插件

經常使用的一些插件
gulp-sass
功能：把 sass 編譯爲 css
gulp-uglify
功能：壓縮（optimize）js 文件
gulp-rename
功能：重命名文件
gulp-concat
功能：合併文件。

APIs

gulp.src(globs[, options])

globs： 須要處理的源文件匹配符路徑。類型(必填)：String or StringArray；
通配符路徑匹配示例：

• 「src/a.js」：指定具體文件；
• 「*」：匹配全部文件 例：src/*.js(包含src下的全部js文件)；
• 「**」：匹配0個或多個子文件夾 例：src/*/.js(包含src的0個或多個子文件夾下的js文件)；
• 「{}」：匹配多個屬性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的全部jpg/png/gif文件)；
• 「!」：排除文件 例：!src/a.js(不包含src下的a.js文件)；

options： 類型(可選)：Object，有3個屬性buffer、read、base；

• options.buffer： 類型：Boolean 默認：true 設置爲false，將返回file.content的流而且不緩衝文件，處理大文件時很是有用；
• options.read： 類型：Boolean 默認：true 設置false，將不執行讀取文件操做，返回null；
• options.base： 類型：String 設置輸出路徑以某個路徑的某個組成部分爲基礎向後拼接

gulp.dest(path[, options])

path： 類型(必填)：String or Function 指定文件輸出路徑，或者定義函數返回文件輸出路徑亦可；
options： 類型(可選)：Object，有2個屬性cwd、mode；

• options.cwd： 類型：String 默認：process.cwd()：前腳本的工做目錄的路徑 當文件輸出路徑爲相對路徑將會用到；
• options.mode： 類型：String 默認：0777 指定被建立文件夾的權限；

gulp.task(name[, deps], fn)

task定義一個gulp任務；
name： 類型(必填)：String 指定任務的名稱（不該該有空格）；
deps： 類型(可選)：StringArray，是當前定義的任務須要依賴的其餘任務，爲一個數組。當前定義的任務會在全部依賴的任務執行完畢後纔開始執行。若是沒有依賴，則可省略這個參數；
fn： 類型(必填)：Function 該任務調用的插件操做；

當有多個任務時，須要知道怎麼來控制任務的執行順序，能夠經過任務依賴來實現

gulp.task('one',function(){
  //one是一個異步執行的任務
  setTimeout(function(){
    console.log('one is done')
  },5000);
});
 
//two任務雖然依賴於one任務,但並不會等到one任務中的異步操做完成後再執行
gulp.task('two',['one'],function(){
  console.log('two is done');
});
gulp.task('default',['one','two','three']);

若是想等待異步任務中的異步操做完成後再執行後續的任務，有三種方法能夠實現：

第一：在異步操做完成後執行一個回調函數來通知gulp這個異步任務已經完成，這個回調函數就是任務函數的第一個參數。

gulp.task('one',function(cb){ //cb爲任務函數提供的回調，用來通知任務已經完成
  //one是一個異步執行的任務
  exec(function(){
    console.log('one is finish');
    cb();  //執行回調，表示這個異步任務已經完成
  },5000);
});
 
//這時two任務會在one任務中的異步操做完成後再執行
gulp.task('two',['one'],function(){
  console.log('two is finish');
});

第二：定義任務時返回一個流對象。適用於任務就是操做`gulp.src獲取到的流的狀況。

gulp.task('one',function(cb){
  var stream = gulp.src('client/**/*.js')
      .pipe(exec()) //exec()中有某些異步操做
      .pipe(gulp.dest('build'));
    return stream;
});
 
gulp.task('two',['one'],function(){
  console.log('two is done');
});

第三：返回一個promise對象，例如

var Q = require('q');
gulp.task('one', function() {
  var deferred = Q.defer();
 
  // 執行異步的操做
  setTimeout(function() {
    deferred.resolve();
  }, 1);
  return deferred.promise;
});
 
gulp.task('two',['one'],function(){
  console.log('two is done');
});

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

watch方法是用於監聽文件變化，文件一修改就會執行指定的任務；
glob： 須要處理的源文件匹配符路徑。類型(必填)：String or StringArray；
opts： 類型(可選)：Object 具體參看https://github.com/shama/gaze；
tasks： 類型(必填)：StringArray 須要執行的任務的名稱數組；

gulp.run()

表示要執行的任務。可能會使用單個參數的形式傳遞多個任務。

gulp.task('end',function(){
    gulp.run('task1','task3','task2');
});

注意：任務是儘量多的並行執行的，而且可能不會按照指定的順序運行。

var gulp = require( 'gulp' );
var uglify = require( 'gulp-uglify' );
var cleanCSS = require( 'gulp-clean-css' );
var less = require('gulp-less');
var concat = require('gulp-concat');
 
gulp.task( 'concat-file', function(){
  gulp.src( 'src/js/*.js' )
    .pipe( concat('all.min.js') )
    .pipe( uglify() )
    .pipe( gulp.dest( 'dist/js' ) );
} );
 
gulp.task('testLess', function () {
    //gulp.src('less/test/style.less')
    gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

gulp.task('watcher', function() {
    gulp.watch("src/scss/**/*.scss", ['sass']);
    gulp.watch("src/js/*.js", ['scripts']);
});

gulp.task('css-watch', ['concat-file'], function() {
    var watcher = gulp.watch('src/css/sass/**/*.scss', ['css']);    
    watcher.on('change', function(event) {
        console.log(event);
    });
});

gulp.task('default', ['watcher', 'css-watch']);

同步運行任務

由於任務是異步運行的，Gulp 便默認將並行運行全部任務；任務中的步驟也是異步的，所以各個步驟也是並行的。
gulp-sequence

var gulp = require('gulp');
var zip = require('gulp-zip');
var rename = require('gulp-rename');
var clean = require('gulp-clean');
var sequence = require('run-sequence');

gulp.task("copy-common1", function () {
    return gulp.src(['client/**/**', '!client/dev.html', '!client/index.hbs', 'build/**/**'])
        .pipe(rename(function (path) {
            path.dirname += '';
        }))
        .pipe(gulp.dest("./dist/pages"))
})
//清空dist目錄
gulp.task("clean", function () {
    console.log('清空 dist 目錄下的資源')
   return gulp.src('dist/*', {
        read: false
    })
     .pipe(clean({
        force: true
    }));
})
//生成生產war包
gulp.task("package", function () {
    gulp.src(['dist/**']).pipe(zip('dist.war')).pipe(gulp.dest('./'));
    console.info('package ok!');
});
gulp.task('runsequence', function (callback) {
    sequence('clean', 'copy-common1', 'package', callback)
});