我如何 运行 来自两个或多个其他任务的 gulp 任务并通过管道
how do I run a gulp task from two or more other tasks and pass the pipe through
这一定很明显,但我找不到。我想在开发环境和生产环境中使用构建任务用观察者预处理我的 stylus/coffee 文件(这对我们所有人来说不是很常见吗?),并且 运行 还要进行一些缩小和丑化生产中的步骤,但我想分享 DRY
的开发和生产通用的管道步骤
问题是,当我 运行 监视文件的任务时,预处理任务会对所有文件执行此操作,因为它有自己的 gulp.src 语句,其中包括所有手写笔文件。
如何避免在观看时编译所有文件,同时仍将编译任务分开。谢谢
paths = {
jade: ['www/**/*.jade']
};
gulp.task('jade', function() {
return gulp.src(paths.jade).pipe(jade({
pretty: true
})).pipe(gulp.dest('www/')).pipe(browserSync.stream());
});
gulp.task('serve', ['jade', 'coffee'], function() {
browserSync.init({
server: './www'
});
watch(paths.jade, function() {
return gulp.start(['jade']);
});
return gulp.watch('www/**/*.coffee', ['coffee']);
});
Gulp 中的一件重要事情是不 复制管道。如果你想处理你的手写笔文件,它必须是唯一的手写笔管。但是,如果您想在管道中执行不同的步骤,您有多种选择。我建议将 noop()
函数与选择函数结合使用:
var through = require('through2'); // Gulp's stream engine
/** creates an empty pipeline step **/
function noop() {
return through.obj();
}
/** the isProd variable denotes if we are in
production mode. If so, we execute the task.
If not, we pass it through an empty step
**/
function prod(task) {
if(isProd) {
return task;
} else {
return noop();
}
}
gulp.task('stylus', function() {
return gulp.src(path.styles)
.pipe(stylus())
.pipe(prod(minifyCss())) // We just minify in production mode
.pipe(gulp.dest(path.whatever))
})
至于增量构建(每次迭代只构建更改的文件),最好的方法是使用 gulp-cached
插件:
var cached = require('gulp-cached');
gulp.task('stylus', function() {
return gulp.src(path.styles)
.pipe(cached('styles')) // we just pass through the files that have changed
.pipe(stylus())
.pipe(prod(minifyCss()))
.pipe(gulp.dest(path.whatever))
})
此插件将检查内容是否随您完成的每次迭代而更改。
我花了整整一章 Gulp my book, and I found those to be the most suitable ones. For more information on incremental builds, you can also check on my article on that (includes Gulp4): http://fettblog.eu/gulp-4-incremental-builds/
中的不同环境
这一定很明显,但我找不到。我想在开发环境和生产环境中使用构建任务用观察者预处理我的 stylus/coffee 文件(这对我们所有人来说不是很常见吗?),并且 运行 还要进行一些缩小和丑化生产中的步骤,但我想分享 DRY
的开发和生产通用的管道步骤问题是,当我 运行 监视文件的任务时,预处理任务会对所有文件执行此操作,因为它有自己的 gulp.src 语句,其中包括所有手写笔文件。
如何避免在观看时编译所有文件,同时仍将编译任务分开。谢谢
paths = {
jade: ['www/**/*.jade']
};
gulp.task('jade', function() {
return gulp.src(paths.jade).pipe(jade({
pretty: true
})).pipe(gulp.dest('www/')).pipe(browserSync.stream());
});
gulp.task('serve', ['jade', 'coffee'], function() {
browserSync.init({
server: './www'
});
watch(paths.jade, function() {
return gulp.start(['jade']);
});
return gulp.watch('www/**/*.coffee', ['coffee']);
});
Gulp 中的一件重要事情是不 复制管道。如果你想处理你的手写笔文件,它必须是唯一的手写笔管。但是,如果您想在管道中执行不同的步骤,您有多种选择。我建议将 noop()
函数与选择函数结合使用:
var through = require('through2'); // Gulp's stream engine
/** creates an empty pipeline step **/
function noop() {
return through.obj();
}
/** the isProd variable denotes if we are in
production mode. If so, we execute the task.
If not, we pass it through an empty step
**/
function prod(task) {
if(isProd) {
return task;
} else {
return noop();
}
}
gulp.task('stylus', function() {
return gulp.src(path.styles)
.pipe(stylus())
.pipe(prod(minifyCss())) // We just minify in production mode
.pipe(gulp.dest(path.whatever))
})
至于增量构建(每次迭代只构建更改的文件),最好的方法是使用 gulp-cached
插件:
var cached = require('gulp-cached');
gulp.task('stylus', function() {
return gulp.src(path.styles)
.pipe(cached('styles')) // we just pass through the files that have changed
.pipe(stylus())
.pipe(prod(minifyCss()))
.pipe(gulp.dest(path.whatever))
})
此插件将检查内容是否随您完成的每次迭代而更改。
我花了整整一章 Gulp my book, and I found those to be the most suitable ones. For more information on incremental builds, you can also check on my article on that (includes Gulp4): http://fettblog.eu/gulp-4-incremental-builds/
中的不同环境