Javascript Gulp watch-按顺序执行任务(同步)
我有一系列的任务要由观察者执行,但我可以让他们按顺序启动: 这是吞咽任务和观察者Javascript Gulp watch-按顺序执行任务(同步),javascript,gulp,Javascript,Gulp,我有一系列的任务要由观察者执行,但我可以让他们按顺序启动: 这是吞咽任务和观察者 gulp.task('app_scss', function(){ return gulp.src(appScssDir + '/main.scss') .pipe(sass({ style: 'compressed' }).on('error', gutil.log)) .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8
gulp.task('app_scss', function(){
return gulp.src(appScssDir + '/main.scss')
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest(appBuilderDir));
});
gulp.task('app_vendor_css', function(){
return gulp.src(appProviderCssDir + '/*.css')
.pipe(minifyCSS({ keepSpecialComments: 0 }))
.pipe(concat('app_vendor.css'))
.pipe(gulp.dest(appBuilderDir));
});
gulp.task('app_build_css', function(){
return gulp.src(appBuilderDir + '/*.css')
.pipe(concat('style.css'))
.pipe(gulp.dest(targetCssDir));
});
gulp.task('watch', function () {
gulp.watch(appScssDir + '/**/*.scss', ['app_scss', 'app_build_css']);
});
gulp.task('default', ['app_build_clean', 'app_scss', 'app_vendor_css', 'app_build_css', 'watch']);
因此,当我更新一个scss文件时,它应该编译它们并创建一个css文件。然后,构建任务将该文件与供应商文件合并。但每次我保存一个文件,它总是落后一步。以视频为例:
我已经重命名了任务,更改了手表回调中的顺序等
我是不是犯了一个明显的错误 Gulp在“同一”时间启动所有任务,除非您声明依赖项(或使流从一个管道传输到另一个) 例如,如果您希望task
app\u build\u css
等待taskapp\u scss
和app\u vendor\u css
完成,请声明依赖项
gulp.task('app_scss', function(){
return gulp.src(appScssDir + '/main.scss')
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest(appBuilderDir));
});
gulp.task('app_vendor_css', function(){
return gulp.src(appProviderCssDir + '/*.css')
.pipe(minifyCSS({ keepSpecialComments: 0 }))
.pipe(concat('app_vendor.css'))
.pipe(gulp.dest(appBuilderDir));
});
gulp.task('app_build_css', ['app_scss', 'app_vendor_css'], function(){
return gulp.src(appBuilderDir + '/*.css')
.pipe(concat('style.css'))
.pipe(gulp.dest(targetCssDir));
});
gulp.task('watch', function () {
gulp.watch(appScssDir + '/**/*.scss', ['app_build_css']);
});
gulp.task('default', ['app_build_clean', 'app_build_css', 'watch']);
用GULP 3 I use包检查,以帮助按顺序而不是并行运行任务。这就是我如何配置我的watch
任务,例如:
var gulp = require('gulp'),
runSequence = require('run-sequence');
gulp.task('watch', function() {
gulp.watch('templates/**/*.html', function(){ runSequence('templates', 'bundleJS') });
});
上面的示例显示了一个典型的watch
任务,该任务将钩住gulp.watch
方法,其中包含更改时要侦听的文件,以及检测到更改时要运行的回调函数。然后调用runSequence
函数(在某个watch
的回调内),调用的任务列表将以同步方式运行,这与并行运行任务的默认方式不同。Gulp v4
现在Gulp v4已经发布了将近一年多(2017年底发布),它提供了一些很棒的方法,可以使用名为bach的库对任务进行排序
注意:我建议迁移到Gulp v4,因为v3有一些安全漏洞[我不确定这些漏洞现在是否已修补]
快速示例
Gulp v4引入了Gulp.series
和Gulp.parallel
,这允许您创建任务并选择以串联、并行或混合方式运行的任务,如下所示
解释:这将并行运行SCS
和js
任务,一旦这些任务完成,它将运行监视
任务,因为它们是串联的
扩展示例
下面是一个简化的示例,说明我的吞咽文件可能是什么样子
const gulpScss = require('gulp-sass');
const gulpBabel = require('gulp-babel');
const paths = {
scss: [
'public/stylesheets/*.scss'
],
js: [
'public/js/*.js'
]
};
const scss = () => {
return gulp.src(paths.scss)
.pipe(gulpScss)
.pipe(gulp.dest('dist'));
}
scss.description = 'Transpiles scss files to css.';
const js = () => {
return gulp.src(paths.js)
.pipe(gulpBabel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist'));
}
js.description = 'Transpiles JS with babel';
const watch = () => {
gulp.watch(paths.scss, scss);
gulp.watch(paths.js, js);
}
watch.description = 'Watches for changes to files and runs their associated builds.';
const defaultTasks = gulp.series(
gulp.parallel(scss, js),
watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';
module.exports = {
default: defaultTasks,
scss,
js
}
杰出的把我的头发拔出来。是的,我也是,直到我读了文件。使用回调和承诺也很有趣,因为如果项目构建需要,您可以创建更复杂的场景。简单而高效。例如,当两个任务都在默认任务中时也可以使用,而无需进一步修改。如果您的场景不太复杂,我更喜欢这个答案。很好,但更好的是:
gulp.watch('templates/***.html',()=>runSequence('templates','bundleJS'))
gulp watch在本例中不需要<代码>var监视从未使用过<代码>gulp.watch可在var gulp
上找到gulp-watch
类似于gulp.watch
,但与gulp.watch
相比,它有几个优点。此插件是一个临时补丁。作者在文档中指定。在gulp 4中,任务将按指定顺序执行,例如gulp.watch([base.assets+path.sass]、'sass'、'styles']);然后将执行sass任务task@CengkuruMichael-是的,它已经很出名很多年了。这种“临时”修复已成为标准。。。Gulp4似乎永远不会公开,因为团队在twitter页面上没有任何更新,github上的分支也没有任何进展
const gulpScss = require('gulp-sass');
const gulpBabel = require('gulp-babel');
const paths = {
scss: [
'public/stylesheets/*.scss'
],
js: [
'public/js/*.js'
]
};
const scss = () => {
return gulp.src(paths.scss)
.pipe(gulpScss)
.pipe(gulp.dest('dist'));
}
scss.description = 'Transpiles scss files to css.';
const js = () => {
return gulp.src(paths.js)
.pipe(gulpBabel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist'));
}
js.description = 'Transpiles JS with babel';
const watch = () => {
gulp.watch(paths.scss, scss);
gulp.watch(paths.js, js);
}
watch.description = 'Watches for changes to files and runs their associated builds.';
const defaultTasks = gulp.series(
gulp.parallel(scss, js),
watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';
module.exports = {
default: defaultTasks,
scss,
js
}