gulp的4個API 讓你成爲gulp專家

gulp 自己能作的事情很是少，主要是經過插件來提供各類功能，gulp自己只提供了4個很是簡潔的API, 掌握這4個API你就基本掌握了gulp的所有。

1、gulp.task

gulp 是基於task的方式來運行

定義

gulp.task(name [, deps, fn])
註冊一個task, name 是task的名字，deps是可選項，就是這個task依賴的tasks, fn是task要執行的函數

示例

gulp.task('js', ,['jscs', 'jshint'], function(){
 return gulp
    .src('./src/**/*.js')
    .pipe(concat('alljs'))
    .pipe(uglify())
    .pipe(gulp.dest('./build/'));                 
});

提示

上例中

• jscs和jshint先運行，隨後再運行js的task.
• jscs和jshint是並行執行的，而不是順序執行

2、gulp.src

定義

gulp.src(globs[, options])

與globs 匹配的文件，能夠是string或者一個數組

示例

gulp.src(['client/*.js', '!client/b*.js', 'client/c.js'])   # !是排除某些文件

gulp.task('js',['jscs', 'jshint'],function(){
 return gulp
    .src('./src/**/*.js', {base:'./src/'})        
    .pipe(uglify())
    .pipe(gulp.dest('./build/'));
             
});

options.base 是指多少路徑被保留，好比上面的 ./src/users/list.js 會被輸出到 ./build/users/list.js

提示

若是咱們須要文件保持順序，那麼出如今前面的文件就寫在數組的前面

gulp.src(['client/baby.js', 'client/b*.js', 'client/c.js'])

上面baby.js就出如今最上面。

3、 gulp.dest

定義

gulp.dest(path[, options]) 就是最終文件要輸出的路徑，options通常不用

4、gulp.watch

定義

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是監視文件的變化，而後運行指定的Tasks或者函數，這個相比Grunt須要使用插件，gulp自己就支持的很好。

示例

gulp.task('watch-js', function(){
   gulp.watch('./src/**/*.js',['jshint','jscs']); 
});

gulp.task('watch-less', function(){
 gulp.watch('./src/**/*.less',function(event){
   console.log('less event'+event.type+' '+event.path)
 }); 
});

最後

gulp就是如此的簡單，你只須要掌握這四個API就夠了，剩下的就是熟悉相關的plugin了。

參考連接 https://github.com/gulpjs/gulp/blob/master/docs/API.md