1. 关于任务(task)
1.1任务(task)的公开(public)和私有(private)类型
被export导出的是任务时公开任务,其他的均为私有任务。一个私有(private)类型的任务(task)在外观和行为上和其他任务(task)是一样的,只是取决于是否被export 导出
function watcher() {
watch(['src/*.scss'], styleTransform);
watch(['src/*.js'], scriptTransform);
}
function transformTpl(done) {
return src('views/**/*.html')
.pipe(ejs())
.pipe(dest('html'));
done();
}
function transformCss(done) {
return src('src/*.scss')
.pipe(
sass({
outputStyle: 'compact'
}).on('error', sass.logError)
)
.pipe(autoprefixer())
.pipe(dest('html/dist'));
done();
}
function transformJs(done) {
return src('src/*.js')
.pipe(babel(
{
presets: ["@babel/env"],
plugins: []
}
))
.pipe(dest('html/dist'));
done();
}
exports.default = watcher;
exports.getDemo = series(transformCss, transformJs, transformTpl);
由上面的代码可以分析出,watcher任务被export导出可以认为是公开任务,transformTpl和transformCss及transformJs没有被export导出是私有的任务。
1.2组合任务
所谓的组合任务就是把过个独立task通过series()和parallel()方法祝贺成为一个更大的一个操作。而且两个方法可以相互嵌套;
两者的区别:
series():传入改方法的任务按顺序执行。
parallel():以最大并发量来运行任务。
function transformTpl(done) {
return src('views/**/*.html')
.pipe(ejs())
.pipe(dest('html'));
done();
}
function transformCss(done) {
return src('src/*.scss')
.pipe(
sass({
outputStyle: 'compact'
}).on('error', sass.logError)
)
.pipe(autoprefixer())
.pipe(dest('html/dist'));
done();
}
function transformJs(done) {
return src('src/*.js')
.pipe(babel(
{
presets: ["@babel/env"],
plugins: []
}
))
.pipe(dest('html/dist'));
done();
}
exports.getDemo = series(transformCss, transformJs, transformTpl);
exports.getDemoOther = parallel(transformCss, transformJs, transformTpl);
// 两个组合任务方法分别调用一个任务,则该任务会执行两次。
2. 三个基本方法
2.1 src()
src()接收
glob参数
,并从文件系统中读取文件然后生成一个stream(node流),他将所有的匹配文件读取到内存中并通过stream进行处理。
2.2 pipe()
pipe()方法是stream所提供的;pipe()就是在一个可读流与可写流之间建立的一个通道。
2.3 dest()
dest()接受一个输出目录作为参数,并且其会产生一个stream,通常作为终止流。
function scriptTransform() {
return src('src/*.js')
.pipe(babel(
{
presets: ["@babel/env"],
plugins: []
}
))
.pipe(dest('dist'));
}
// src() 接受参数,从文件系统中读取src文件夹下的js文件,并生成stream。
// dest() 接受输出目录做为参数,把处理过的文件流写入到当前文件下。
// pipe(fn) pipe方法传入方法的是一个function,这个function作用无非是接受上一个流(stream)的结果,并返回一个处理后流的结果(返回值应该是一个stream对象)
glob参数是什么:由普通字符或统配字符组成的字符串,用于匹配文件路径;
例如:src()方法接受一个glob字符串作为参数,用于确定哪些文件需要操作,glob至少匹配到一个匹配项,否则src()将会报错。
3. 文件监控
watch()方法将globs于task进行关联。对匹配的glob文件进行监控,当这些文件被修改时就立即执行关联的task。
function styleTransform() {
return src('src/*.scss')
.pipe(
sass({
outputStyle: 'compact'
}).on('error', sass.logError)
)
.pipe(autoprefixer())
.pipe(dest('dist'));
}
function scriptTransform() {
return src('src/*.js')
.pipe(babel(
{
presets: ["@babel/env"],
plugins: []
}
))
.pipe(dest('dist'));
}
function watcher() {
watch(['src/*.scss'], styleTransform);
watch(['src/*.js'], scriptTransform);
}
网友评论