首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >gulp.watch()没有运行后续任务

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

Stack Overflow用户
提问于 2014-10-20 22:51:17
回答 2查看 5.1K关注 0票数 1

当试图将模块化的任务分解成单独的文件时,会遇到一个奇怪的错误。以下代码应该执行任务css,但不执行任务:

文件:watch.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
plugins.watch('assets/styl/**/*.styl', function() {
  gulp.start('css');
});
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-10-21 06:51:44

要么在以下语法中使用gulp的积木表

代码语言:javascript
复制
gulp.task('watch', function () {
  gulp.watch('assets/styl/**/*.styl', ['css']);
});

或具有以下语法的杯表插件

代码语言:javascript
复制
gulp.task('watch', function () {
  plugins.watch('assets/styl/**/*.styl', function (files, cb) {
    gulp.start('css', cb);
  });
});

您的gulp.dest路径中也可能有一个错误。将其更改为相对的:

代码语言:javascript
复制
.pipe(gulp.dest('assets/css'));
票数 0
EN

Stack Overflow用户

发布于 2019-10-03 09:31:47

我使用的是Gulp 4,其中不推荐gulp.start()

所以这就是解决办法

代码语言:javascript
复制
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();
    })
}));

现在,每当我的代码发生更改时,就会执行我的“一些任务名”,然后重新加载浏览器页面。我根本不需要延迟浏览器同步。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26476226

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档