gulp.watch()没有运行后续任务

时间:2014-10-20 22:51:18

标签: javascript frontend gulp

尝试通过将模块化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应该运行任务csswatch(确实如此)。在文件更改时,watch应检测到它们(确实如此),然后运行css任务(它不会)。

一种解决方案

并不十分喜欢这个解决方案,因为gulp.start()在下一个版本中已被弃用,但这确实解决了这个问题:

档案:watch.js

plugins.watch('assets/styl/**/*.styl', function() {
  gulp.start('css');
});

2 个答案:

答案 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”就会执行,然后重新加载浏览器页面。我完全不需要延迟浏览器同步。