gulp-watch, gulp-watch-less 不要开火

Question

我在获取 gulp-watch 时遇到问题或 gulp-watch-less在遵循记录的示例后触发。我最初解决的问题是lazypipe(此处未显示)，但在我看来，我在使用插件的方式上做错了。这是我的简化代码，它仍然无法正常工作。

请注意，我用普通的 gulp-watch 尝试了这个，它表现出完全相同的问题:它不会在更改时触发后续管道。如果这是问题所在，我将在此处提供相关信息。

这是我的 gulpfile。

var debug = require ( 'gulp-debug' );
var gulp = require ( 'gulp' );
var less = require ( 'gulp-less' );
var watchLess = require ( 'gulp-watch-less' ); 

gulp.task ( 'dev-watch', function () {
  // main.less just imports child less files
  gulp.src ( './app/styles/less/main.less' )
    .pipe ( watchLess ( './app/styles/less/main.less' ) )
    .pipe ( debug () );
    .pipe ( less () )
    .pipe ( gulp.dest ( './app/styles' ) )
  ;
});

当我开始任务时，它会完美地执行并生成预期的文件。我看到调试输出流信息也很好。

当我更改文件时，我看到 watchLess 正在接受更改:

 [10:49:54] LESS saw child.less was changed
 [10:49:54] LESS saw child.less was changed
 [10:49:54] LESS saw main.less was changed:by:import
 [10:49:54] LESS saw main.less was changed:by:import

但是，less 任务不会执行。它似乎没有发出任何东西，因为调试不会触发。

这是相关的 package.json 信息:

"devDependencies": {
  "gulp": "^3.8.7",
  "gulp-less": "^1.3.6",
  "gulp-watch": "^1.2.0",
  "gulp-watch-less": "^0.2.1"
}

Answer 1

您的代码只是在管道中运行观察者，但没有告诉接下来要做什么。

工作示例应如下所示:

var
  gulp = require('gulp'),
  debug = require ('gulp-debug'),
  less = require ( 'gulp-less'),
  watchLess = require('gulp-watch-less');

gulp.task('dev-watch', function () {
  watchLess('./app/styles/less/main.less')
    .pipe (debug ())
    .pipe(less())
    .pipe(gulp.dest('./app/styles'))
});

但是，您也可以仅使用 gulp-watch 或 gulp (gulp.watch) 来做同样的事情。