Gulps gulp.watch không được kích hoạt cho các tập tin mới hoặc bị xóa?

Tác vụ Gulpjs sau hoạt động tốt khi chỉnh sửa tệp trong trận đấu toàn cầu:

// watch task.
gulp.task('watch', ['build'], function () {
    gulp.watch(src + '/js/**/*.js', ['scripts']);
    gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']);
    gulp.watch(src + '/less/*.less', ['styles']);
    gulp.watch(src + '/templates/**/*.{swig,json}', ['html']);
});

// build task.
gulp.task('build', ['clean'], function() {
    return gulp.start('copy', 'scripts', 'less', 'htmlmin');
});

Tuy nhiên, nó không hoạt động (nó không được kích hoạt) cho các tệp mới hoặc bị xóa. Có thiếu điều gì không?

EDIT : ngay cả khi sử dụng plugin grunt-watch, nó dường như không hoạt động:

gulp.task('scripts', function() {
    return streamqueue(
        { objectMode: true },
        gulp.src([
            vendor + '/jquery/dist/jquery.min.js',
            vendor + '/bootstrap/dist/js/bootstrap.min.js'
        ]),
        gulp.src([
            src + '/js/**/*.js'
        ]).pipe(plugins.uglify())
    )
    .pipe(plugins.concat(pkg.name + '.min.js'))
    .pipe(gulp.dest(dest + '/js/'));
});

gulp.task('watch', ['build'], function () {
    plugins.watch({glob: src + '/js/**/*.js'}, function () {
        gulp.start('scripts');
    });
});

EDIT : Đã giải quyết, đó là vấn đề này . Quả cầu bắt đầu bằng ./(đó là giá trị của src) dường như ATM không hoạt động.

Chỉnh sửa: Rõ ràng gulp.watchkhông làm việc với các tập tin mới hoặc xóa bây giờ. Nó đã không khi câu hỏi được hỏi.

Phần còn lại của câu trả lời của tôi vẫn là: gulp-watchthường là một giải pháp tốt hơn vì nó cho phép bạn thực hiện các hành động cụ thể chỉ trên các tệp đã được sửa đổi, trong khi gulp.watchchỉ cho phép bạn chạy các tác vụ hoàn chỉnh. Đối với một dự án có quy mô hợp lý, điều này sẽ nhanh chóng trở nên quá chậm để có ích.

Bạn không thiếu thứ gì. gulp.watchkhông hoạt động với các tập tin mới hoặc bị xóa. Đó là một giải pháp đơn giản được thiết kế cho các dự án đơn giản.

Để có được ngắm tập tin đó có thể tìm kiếm tập tin mới, sử dụng các gulp-watchPlugin , đó là mạnh hơn rất nhiều. Cách sử dụng trông như thế này:

var watch = require('gulp-watch');

// in a task
watch({glob: <<glob or array of globs>> })
        .pipe( << add per-file tasks here>> );

// if you'd rather rerun the whole task, you can do this:
watch({glob: <<glob or array of globs>>}, function() {
    gulp.start( <<task name>> );
});

Cá nhân, tôi khuyên bạn nên lựa chọn đầu tiên. Điều này cho phép các quy trình trên mỗi tệp nhanh hơn nhiều. Nó hoạt động rất tốt trong quá trình phát triển với tải gan miễn là bạn không ghép bất kỳ tệp nào.

Bạn có thể kết thúc các luồng của mình bằng thư viện của tôilazypipe hoặc đơn giản là sử dụng một hàm và stream-combinernhư thế này:

var combine = require('stream-combiner');

function scriptsPipeline() {
    return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}

watch({glob: 'src/scripts/**/*.js' })
        .pipe(scriptsPipeline());

CẬP NHẬT ngày 15 tháng 10 năm 2014

Như được chỉ ra bởi @pkyeck bên dưới, rõ ràng bản phát hành 1.0 gulp-watchđã thay đổi định dạng một chút, vì vậy các ví dụ trên bây giờ sẽ là:

var watch = require('gulp-watch');

// in a task
watch(<<glob or array of globs>>)
        .pipe( << add per-file tasks here>> );

// if you'd rather rerun the whole task, you can do this:
watch(<<glob or array of globs>>, function() {
    gulp.start( <<task name>> );
});

và

var combine = require('stream-combiner');

function scriptsPipeline() {
    return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}

watch('src/scripts/**/*.js')
        .pipe(scriptsPipeline());

Cả hai gulp.watch()và require('gulp-watch')()sẽ kích hoạt cho các tập tin mới / bị xóa tuy nhiên không nếu bạn sử dụng các thư mục tuyệt đối. Trong các thử nghiệm của tôi, tôi đã không sử dụng "./"cho các thư mục tương đối BTW.

Cả hai sẽ không kích hoạt nếu toàn bộ thư mục bị xóa.

   var watch = require('gulp-watch');
   //Wont work for new files until gaze is fixed if using absolute dirs. It  won't trigger if whole directories are deleted though.
   //gulp.watch(config.localDeploy.path + '/reports/**/*', function (event) {

   //gulp.watch('src/app1/reports/**/*', function (event) {
   // console.log('*************************** Event received in gulp.watch');
   // console.log(event);
   // gulp.start('localDeployApp');
   });

   //Won't work for new files until gaze is fixed if using absolute dirs. It  won't trigger if whole directories are deleted though. See https://github.com/floatdrop/gulp-watch/issues/104
   //watch(config.localDeploy.path + '/reports/**/*', function() {

   watch('src/krfs-app/reports/**/*', function(event) {
      console.log("watch triggered");
      console.log(event);
      gulp.start('localDeployApp');
   //});

Nếu srclà một đường dẫn tuyệt đối (bắt đầu bằng /), mã của bạn sẽ không phát hiện các tệp mới hoặc bị xóa. Tuy nhiên vẫn còn một cách:

Thay vì:

gulp.watch(src + '/js/**/*.js', ['scripts']);

viết:

gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

và nó sẽ hoạt động!

Các quả cầu phải có một thư mục cơ sở riêng được chỉ định và vị trí cơ sở đó không được chỉ định trong chính quả cầu.

Nếu bạn có lib/*.js, nó sẽ xem dưới thư mục làm việc hiện tạiprocess.cwd()

Gulp sử dụng Gaze để xem các tệp và trong tài liệu API Gulp, chúng tôi thấy rằng chúng tôi có thể chuyển các tùy chọn cụ thể của Gaze cho chức năng xem:gulp.watch(glob[, opts], tasks)

Bây giờ trong tài liệu Gaze chúng ta có thể thấy rằng thư mục làm việc hiện tại (thư mục cơ sở toàn cầu) là cwdtùy chọn.

Điều này dẫn chúng ta đến câu trả lời của alexk: gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

Tôi biết đây là một câu hỏi cũ hơn, nhưng tôi nghĩ tôi đã đưa ra giải pháp mà tôi đã đưa ra. Không có plugin nào tôi tìm thấy sẽ thông báo cho tôi về các tệp mới hoặc được đổi tên. Vì vậy, tôi đã kết thúc gói monocle trong một chức năng thuận tiện.

Đây là một ví dụ về cách sử dụng chức năng đó:

watch({
    root: config.src.root,
    match: [{
      when: 'js/**',
      then: gulpStart('js')
    }, {
      when: '+(scss|css)/**',
      then: gulpStart('css')
    }, {
      when: '+(fonts|img)/**',
      then: gulpStart('assets')
    }, {
      when: '*.+(html|ejs)',
      then: gulpStart('html')
    }]
  });

Tôi nên lưu ý rằng gulpStart cũng là một chức năng tiện lợi tôi đã thực hiện.

Và đây là mô-đun đồng hồ thực tế.

module.exports = function (options) {
  var path = require('path'),
      monocle = require('monocle'),
      minimatch = require('minimatch');

  var fullRoot = path.resolve(options.root);

  function onFileChange (e) {
    var relativePath = path.relative(fullRoot, e.fullPath);

    options.match.some(function (match) {
      var isMatch = minimatch(relativePath, match.when);
      isMatch && match.then();
      return isMatch;
    });
  }

  monocle().watchDirectory({
    root: options.root,
    listener: onFileChange
  });
};

Khá đơn giản nhỉ? Toàn bộ điều có thể được tìm thấy tại bộ khởi động gulp của tôi: https://github.com/chrisdavies/gulp_starter_kit

Điều quan trọng cần lưu ý là có vẻ như gulp.watch chỉ báo cáo các tệp đã thay đổi và bị xóa trên Windows nhưng lắng nghe các tệp mới và bị xóa theo mặc định trên OSX:

https://github.com/gulpjs/gulp/issues/675

Bạn nên sử dụng 'gulp-watch' cho các tệp mới / đã đổi tên / đã xóa thay vì gulp.watch

var gulpwatch = require('gulp-watch');
var source = './assets',  
destination = './dest';
gulp.task('copy-changed-assets', function() {
    gulpwatch(source+'/**/*', function(obj){
        gulp.src( obj.path, { "base": source})
        .pipe(gulp.dest(destination));
    });
});