Javascript 如何让Gulp完成一项任务,然后再开始下一项任务
我已经设置了一些简单的吞咽任务来处理CSS文件 这些任务放在一个“主”任务中:Javascript 如何让Gulp完成一项任务,然后再开始下一项任务,javascript,gulp,minify,Javascript,Gulp,Minify,我已经设置了一些简单的吞咽任务来处理CSS文件 这些任务放在一个“主”任务中: gulp.task('process-css',['concatCSS','minifyCSS','renameCSS']) 具体任务的定义如下,仅供参考: gulp.task('minifyCSS', function() { return gulp.src('themes/my_theme/css/dist/*.css') .pipe(sourcemaps.init())
gulp.task('process-css',['concatCSS','minifyCSS','renameCSS'])代码>
具体任务的定义如下,仅供参考:
gulp.task('minifyCSS', function() {
return gulp.src('themes/my_theme/css/dist/*.css')
.pipe(sourcemaps.init())
.pipe(minifyCSS())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('themes/my_theme/css/dist/'));
});
gulp.task('concatCSS', function() {
var files = [
'themes/rubbish_taxi/css/bootstrap.css',
'themes/rubbish_taxi/css/custom.css',
'themes/rubbish_taxi/css/responsive.css',
'themes/rubbish_taxi/css/jquery.fancybox.css'
];
return gulp.src(files)
.pipe(concat("bundle.css"))
.pipe(gulp.dest('themes/my_theme/css/dist/'));
});
gulp.task('renameCSS', function() {
gulp.src('themes/my_theme/css/dist/bundle.css')
.pipe(rename(function(path) {
path.basename += ".min";
}))
.pipe(gulp.dest("themes/my_theme/css/"));
});
任务完成时不会出错,但问题是minifyCSS
不会缩小源文件。文件的未统一版本保存为bundle.min.css
。我认为原因是minifyCSS
在concatCSS
完成之前运行
如何使任务同步执行?
是我唯一可以指定在执行以下给定任务之前应执行哪些任务的选项:
gulp.task('minifyCSS',['concatCSS'],function(){..}
当我这样设置它时,它工作了,但我想避免这种情况,以使代码更具可读性
task('minifyCSS',['concatCSS'],function(){..}
当我这样设置它时,它工作了,但我想避免这种情况,以使代码更具可读性
更具可读性的方法是什么?你说的是minifyCSS
依赖于concatCSS
。我上面引用的代码行就是你如何向gulp解释这种依赖性的
另一种选择是使用类似的工具,但我认为避免使用工具中内置的功能来解决您所面临的确切问题是不合理的,因为您希望主观上提高可读性。为什么要在不同的任务之间拆分缩小连接和重命名?当您将它们全部导入时,Gulp最有效她在一个任务中完成任务(以避免编写然后重新阅读)。@zzzzBov,我可以确保在一个函数中传输的任务同步执行以避免类似问题。正如@deefour在下面gulp.task('minifyCSS',['concatCSS',function(){..}
是我们告诉gulp一项任务取决于另一项任务是否完成的方式。因此我想答案是使用我试图避免的符号(不合理地避免,同意)。