gulp的总结

关于gulp这个打包工具我以前用的很少,最近在项目中才去逐渐去掌握它,相比于目前比较火的webpack,我想原理都是相同的。万法同源。
其实它主要有四个属性,只要掌握这四个属性就行了。
第一个:src gulp.src();
例如:gulp.src(‘client/templates/*.js’)
.pipe(jade())
.pipe(minify())
.pipe(gulp.dest(‘build/minified_templates’));
这个主要是对client/templates/*.js这个路径下的所有js文件的输出,
当然也可以这样写gulp.src(‘client/templates/demo.js’)或者是数组的形式
gulp.src([‘./node_pc/public/scripts/commonConfig.js’, ‘./node_pc/public/scripts/constant.js’]),这样也是可以的
大家也注意到了还有一个pipe,那这个pipe是干嘛的呢,pipe英文意思 管道,这个就相当于angular中的过滤器的概念。在pipe管道中做了处理,然后再传给下一个管道。pipe里面是处理函数,是对一个传下来的文件或者数据做处理。

第二个:dest gulp.dest() dest是destination(目的地,终点)的简写gulp.src(‘./client/templates/*.jade’)
.pipe(jade())
.pipe(gulp.dest(‘./build/templates’))
.pipe(minify())
.pipe(gulp.dest(‘./build/minified_templates’));
这个主要作用是把src中的那个路径中文件经过处理之后把它放在哪个文件里面或者是哪个路径下面。

第三个:task gulp.task() task任务的意思,也就是定义一个任务
gulp.task(‘somename’, function() {
// 做一些事
});
‘somename’这个是任务的名称,自己定义的。定义完之后,在其他的任务中,要想引用这个任务,直接用这个任务名就ok了

第四个 :watch gulp.watch() watch监视监听的意思
gulp.watch(‘js/*/.js’, function(event) {
console.log(‘File ’ + event.path + ’ was ’ + event.type + ‘, running tasks…’);
});
一旦文件有了变化,就会执行后面的回调函数,也就是function(event) {
console.log(‘File ’ + event.path + ’ was ’ + event.type + ‘, running tasks…’);

gulp基本上就这个四种方法,所以比较好记,希望大家都能多做总结。

猜你喜欢

转载自blog.csdn.net/xiaolinlife/article/details/79309613
今日推荐