javascript - Gulp watch 不监视文件更改

Question

我的gulp-watch任务已经正常启动了，gulp命令也没有退出，一切正常。但是，当我对文件进行更改时，我无法在输出文件中看到更改，并且命令行中也没有任何记录。 gulp 似乎无法检测到我的文件已更改。但是单独运行被监视的任务是可行的。它很奇怪。我的 watch 任务之前运行良好。但是我不记得在最后一次正确运行之后我做了什么。

这是我的目录结构(部分):

├── README.md
├── bower.json
├── config.xml
├── gulpfile.js
├── ionic.project
├── src
│   ├── jade
│   │   ├── index.jade
│   │   └── templates/
│   ├── js
│   │   ├── app.js
│   │   ├── modules/
│   │   └── services/
│   └── scss
│       └── ionic.app.scss
└── www
    ├── README.md
    ├── css
    │   ├── ionic.app.css
    │   ├── ionic.app.min.css
    │   └── style.css
    ├── index.html
    ├── js
    │   └── app.js
    └── templates
        ├── about.html
        ├── home.html
        ├── tabs.html
        └── test.html

这是我的 gulpfile.js:

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var jade = require('gulp-jade');
var sh = require('shelljs');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

var paths = {
  sass: ['./src/scss/**/*.scss'],
  jade: ['./src/jade/**/*.jade'],
  js: ['./src/js/**/*.js']
};

gulp.task('default', ['sass', 'templates', 'scripts', 'watch']);

gulp.task('sass', function(done) {
  gulp.src('./src/scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('templates', function (done) {
  gulp.src('./src/jade/**/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('./www/'));
});

gulp.task('scripts', function (done) {
  var bundleStream = browserify('./src/js/app.js').bundle();
  bundleStream
    .pipe(source('app.js'))
    .pipe(rename('app.js'))
    .pipe(gulp.dest('./www/js/'));
});

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.jade, ['templates']);
  gulp.watch('./src/js/app.js', ['scripts']);
});

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

需要你的帮助...

Answer 1

我自己解决了这个问题。问题是我向我的任务处理程序声明了 done 参数，但我没有调用它。因此，任务不会完成，并且 watch 任务不会工作，直到所有先前的任务都工作。 (我想没有引用文件)。

---

在问题中使用我的 gulpfile.js，gulp 命令行将如下所示:

cosmozhang:bowuguan $ gulp 
[13:44:36] Using gulpfile ~/work/cordova/bowuguan/gulpfile.js
[13:44:36] Starting 'sass'...
[13:44:36] Starting 'templates'...
[13:44:36] Starting 'scripts'...
[13:44:36] Starting 'watch'...
[13:44:36] Finished 'watch' after 16 ms
[13:44:36] Finished 'sass' after 801 ms

看老的gulpfile.js，在sass任务中调用了done回调，在中没有调用>templates 和 scripts 任务。所以只有sass任务完成了，我们看不到templates和scripts的完成消息。

---

现在我的新 gulpfile.js 是这样的:

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var jade = require('gulp-jade');
var sh = require('shelljs');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

var paths = {
  sass: ['./src/scss/**/*.scss'],
  jade: ['./src/jade/**/*.jade'],
  js: ['./src/js/**/*.js']
};

gulp.task('default', ['sass', 'templates', 'scripts', 'watch']);

gulp.task('sass', function(done) {
  gulp.src('./src/scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('templates', function (done) {
  gulp.src('./src/jade/**/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('./www/'))
    .on('end', done);
});

gulp.task('scripts', function (done) {
  var bundleStream = browserify('./src/js/app.js').bundle();
  bundleStream
    .pipe(source('app.js'))
    .pipe(rename('app.js'))
    .pipe(gulp.dest('./www/js/'))
    .on('end', done);
});

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.jade, ['templates']);
  gulp.watch('./src/js/app.js', ['scripts']);
});

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

这次 gulp 命令输出如下:

cosmozhang:bowuguan $ gulp 
[13:58:20] Using gulpfile ~/work/cordova/bowuguan/gulpfile.js
[13:58:20] Starting 'sass'...
[13:58:20] Starting 'templates'...
[13:58:20] Starting 'scripts'...
[13:58:20] Starting 'watch'...
[13:58:20] Finished 'watch' after 18 ms
[13:58:20] Finished 'templates' after 135 ms
[13:58:20] Finished 'scripts' after 170 ms
[13:58:21] Finished 'sass' after 778 ms
[13:58:21] Starting 'default'...
[13:58:21] Finished 'default' after 4.06 μs
[14:02:22] Starting 'templates'...
[14:02:22] Finished 'templates' after 75 ms

13:58:20，所有任务开始。当我在所有任务中调用 done 回调时，所有这些都在一秒钟内完成。然后，在 14:02:22，我修改了我的 index.jade 文件，templates 任务立即开始并完成。

---

结论:

1. 如果您遇到 gulp-watch 任务没有观察您的更改且没有输出的问题，您可以检查命令行输出以确保之前的所有任务都已完成. gulp-watch 在前面的所有任务完成之前不会工作。

2. 如果任务没有按预期完成，您可以在 gulpfile.js 中检查您的任务处理函数。确保该函数不带任何参数。如果它有任何参数，第一个参数将被视为回调函数，直到您调用回调，任务才会结束。这意味着您的任务声明应该类似于以下 3 种形式之一:

   没有参数:

   gulp.task('templates', function () {  // takes no argument
       ...
   });
   

   带参数:

   gulp.task('templates', function (done) {  // takes a argument
       ...
       done();  // call the callback
   });
   

   带参数:

   gulp.task('templates', function (done) {  // takes a argument
       ...
       gulp
           ...
           .on('end', done);  // set the callback argument as gulp's end callback
   });