gulp 本身能做的事情非常少睬辐,主要是通過(guò)插件來(lái)提供各種功能,gulp本身只提供了4個(gè)非常簡(jiǎn)潔的API, 掌握這4個(gè)API你就基本掌握了gulp的全部之斯。
一潘悼、gulp.task
gulp 是基于task的方式來(lái)運(yùn)行
定義
gulp.task(name [, deps, fn])
注冊(cè)一個(gè)task, name 是task的名字,deps是可選項(xiàng)嗤栓,就是這個(gè)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先運(yùn)行冻河,隨后再運(yùn)行js的task.
- jscs和jshint是并行執(zhí)行的,而不是順序執(zhí)行
二茉帅、gulp.src
定義
gulp.src(globs[, options])
與globs 匹配的文件叨叙,可以是string或者一個(gè)數(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 會(huì)被輸出到 ./build/users/list.js
提示
如果我們需要文件保持順序堪澎,那么出現(xiàn)在前面的文件就寫(xiě)在數(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)視文件的變化,然后運(yùn)行指定的Tasks或者函數(shù)刹悴,這個(gè)相比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就是如此的簡(jiǎn)單土匀,你只需要掌握這四個(gè)API就夠了子房,剩下的就是熟悉相關(guān)的plugin了。