尝试通过将模块化gulp任务拆分为单独的文件来遇到奇怪的错误。以下应执行任务css
,但不执行:
watch.js
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
gulp.task('watch', function () {
plugins.watch('assets/styl/**/*.styl', ['css']); // PROBLEM
});
在['css']
中声明plugins.watch()
在技术上应该接下来执行以下任务:
css.js
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
gulp.task('css', function () {
return gulp.src('assets/styl/*.styl')
.pipe(plugins.stylus())
.pipe(gulp.dest('/assets/css'));
});
gulpfile.js
var gulp = require('gulp');
var requireDir = require('require-dir');
requireDir('./gulp/tasks', { recurse: true });
gulp.task('develop', ['css', 'watch']);
- gulp/
- tasks/
- css.js
- watch.js
- gulpfile.js
gulp develop
应该运行任务css
和watch
(确实如此)。在文件更改时,watch
应检测到它们(确实如此),然后运行css
任务(它不会)。
并不十分喜欢这个解决方案,因为gulp.start()
在下一个版本中已被弃用,但这确实解决了这个问题:
watch.js
plugins.watch('assets/styl/**/*.styl', function() {
gulp.start('css');
});
答案 0 :(得分:1)
使用gulp' builtin watch使用以下语法:
gulp.task('watch', function () {
gulp.watch('assets/styl/**/*.styl', ['css']);
});
或gulp-watch plugin使用以下语法:
gulp.task('watch', function () {
plugins.watch('assets/styl/**/*.styl', function (files, cb) {
gulp.start('css', cb);
});
});
在你的gulp.dest路径中也可能是一个错字。将其更改为亲戚:
.pipe(gulp.dest('assets/css'));
答案 1 :(得分:0)
我正在使用Gulp 4,其中不赞成使用gulp.start()
这就是解决方法
gulp.task('watch', gulp.series('some-task-name', function () {
browserSync.init({
server: {
baseDir: config.distFolder + ''
}
});
var watcher = gulp.watch([
'./src/views/*.html',
'./src/index.html',
'./src/assets/css/*.css',
'./src/**/*.js'],
gulp.series('some-task-name'));
watcher.on('change', async function (path, stats) {
console.log('you changed the code');
browserSync.notify("Compiling, please wait!");
browserSync.reload();
})
}));
现在,只要我的代码发生更改,我的“ some-task-name”就会执行,然后重新加载浏览器页面。我完全不需要延迟浏览器同步。