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，在done任务中调用sass回调，但未在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任务开始并立即完成。

结论：

如果您遇到问题，即gulp-watch任务没有看到没有输出的更改，您可以检查命令行输出以确保所有先前的任务都已完成。在完成之前的所有任务之前，gulp-watch将无效。
如果任务没有按预期完成，您可以在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
});
```

Gulp观看不看文件更改

1 个答案: