【问题标题】:Gulp watch not watching file changesGulp watch 不看文件更改
【发布时间】:2016-06-06 19:57:28
【问题描述】:

我的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();
});

需要你的帮助...

【问题讨论】:

    标签: javascript gulp gulp-watch


    【解决方案1】:

    我自己解决了这个问题。问题是我向我的任务处理程序声明了done 参数,但我没有调用它。因此,任务不会完成,watch 任务将无法工作,直到所有先前的任务都可以工作。 (我猜没有参考文件)。


    在问题中有我的gulpfile.jsgulp 命令行将如下所示:

    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.jsdone 回调在sass 任务中被调用,但在templatesscripts 任务中没有被调用。所以只有sass任务完成了,我们看不到templatesscripts的完成信息。


    现在我的新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
      });
      

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-09-18
      • 2017-07-31
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多