当试图将模块化的任务分解成单独的文件时,会遇到一个奇怪的错误。以下代码应该执行任务css,但不执行任务:
文件:watch.js
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
gulp.task('watch', function () {
plugins.watch('assets/styl/**/*.styl', ['css']); // PROBLEM
});在技术上,在plugins.watch()中声明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');
});发布于 2014-10-21 06:51:44
要么在以下语法中使用gulp的积木表:
gulp.task('watch', function () {
gulp.watch('assets/styl/**/*.styl', ['css']);
});或具有以下语法的杯表插件:
gulp.task('watch', function () {
plugins.watch('assets/styl/**/*.styl', function (files, cb) {
gulp.start('css', cb);
});
});您的gulp.dest路径中也可能有一个错误。将其更改为相对的:
.pipe(gulp.dest('assets/css'));发布于 2019-10-03 09:31:47
我使用的是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();
})
}));现在,每当我的代码发生更改时,就会执行我的“一些任务名”,然后重新加载浏览器页面。我根本不需要延迟浏览器同步。
https://stackoverflow.com/questions/26476226
复制相似问题