gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。
4个api
- gulp.task():定义任务
gulp.task(name[, deps], fn)
name 为任务名
deps 是当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则可省略这个参数
fn 为任务函数,我们把任务要执行的代码都写在里面,该参数也是可选的。
gulp.task('mytask',
['array', 'of', 'task', 'names'],
function() {
//定义一个有依赖的任务 // Do something
});
-
gulp.src():获取流,Nodejs中的stream
首先获取到需要的stream,然后可以通过stream的pipe()方法把流导入到你想要的地方,比如Gulp的插件中,经过插件处理后的流又可以继续导入到其他插件中,当然也可以把流写入到文件中。 -
gulp.dest():用来写文件的
把流中的内容写入到文件中,这里首先需要弄清楚的一点是,我们给gulp.dest()传入的路径参数,只能用来指定要生成的文件的目录,而不能指定生成文件的文件名,它生成文件的文件名使用的是导入到它的文件流自身的文件名,所以生成的文件名是由导入到它的文件流决定的,即使我们给它传入一个带有文件名的路径参数,然后它也会把这个文件名当做是目录名。
// 配置了base参数,此时base路径为script;如果不配置,base默认路径为script/lib。
gulp.src(script/lib/*.js, {base:'script'})
// 假设匹配到的文件为script/lib/jquery.js ,此时生成的文件路径为 build/lib/jquery.js
gulp.src(script/lib/*.js, {base:'script'}) .pipe(gulp.dest('build'))
- gulp.watch():用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。
其语法为gulp.watch(glob[, opts], tasks)
glob 为要监视的文件匹配模式,规则和用法与gulp.src()方法中的glob相同。
opts 为一个可选的配置对象,通常不需要用到
tasks 为文件变化后要执行的任务,为一个数组
网友评论