前端構建大法 Gulp 系列 (三):gulp的4個API 讓你成為gulp專家

gulp 本身能做的事情非常少,主要是通過插件來提供各種功能,gulp本身只提供了4個非常簡潔的API, 掌握這4個API你就基本掌握了gulp的全部。

一、gulp.task

gulp 是基于task的方式來運行

定義

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

示例

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是并行執(zhí)行的,而不是順序執(zhí)行

二、gulp.src

定義

gulp.src(globs[, options])

與globs 匹配的文件,可以是string或者一個數(shù)組

示例

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

提示

如果我們需要文件保持順序,那么出現(xiàn)在前面的文件就寫在數(shù)組的前面

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

上面baby.js就出現(xiàn)在最上面。

三、 gulp.dest

定義

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

四、gulp.watch

定義

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是監(jiān)視文件的變化,然后運行指定的Tasks或者函數(shù),這個相比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

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 前言 本文默認你已經(jīng)安裝好node環(huán)境,并且熟悉node命令,和window cd命令。 gulp簡介 基于nod...
    9I閱讀 2,039評論 4 50
  • gulpjs是一個前端構建工具,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數(shù),API也非常簡單,學...
    井皮皮閱讀 1,400評論 0 10
  • gulpjs是一個前端構建工具,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數(shù),API也非常簡單,學...
    小裁縫sun閱讀 1,027評論 0 3
  • gulpjs是一個前端構建工具,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數(shù),API也非常簡單,學...
    依依玖玥閱讀 3,304評論 7 55
  • gulpjs是一個前端構建工具,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數(shù),API也非常簡單,學...
    build1024閱讀 582評論 0 0

友情鏈接更多精彩內(nèi)容