题
我有一系列任务需要从观察者那里运行,但我可以让它们按顺序触发:
这是 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', '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 文件。然后构建任务将该文件与供应商文件连接起来。但每次我保存文件时,它总是落后一步。请参阅视频作为示例: http://screencast.com/t/065gfTrY
我已经重命名了任务,更改了手表回调中的顺序等。
我犯了一个明显的错误吗?
解决方案
Gulp 在“同一”时间启动所有任务,除非您声明依赖项(或使流通过管道将一个任务传输到另一个任务)。
例如,如果你想要任务 app_build_css
等待任务 app_scss
和 app_vendor_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 运行顺序 包来帮助按顺序而不是并行运行任务。这就是我配置我的 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
)包含以同步方式运行的任务列表,这与并行运行任务的默认方式不同。
吞咽v4
现在 Gulp v4 已经发布近一年多了(于 2017 年底发布),它提供了一些使用名为 bach 的库对任务进行排序的好方法。
https://github.com/gulpjs/bach
笔记:我建议迁移到 Gulp v4,因为 v3 有一些安全漏洞 [我不确定这些漏洞现在是否已修复]。
快速示例
Gulp v4 介绍 gulp.series
和 gulp.parallel
, ,这允许您创建任务并选择串行、并行或混合运行,如下所示。
解释:这将运行 scss
和 js
任务在 平行线, ,一旦这些完成,它将运行 watch
任务,因为他们在 系列.
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 文件的一个精简示例。
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
}