Gulps gulp.watch ไม่ได้เปิดไฟล์ใหม่หรือไฟล์ที่ถูกลบ?

งาน Gulpjs ต่อไปนี้ทำงานได้ดีเมื่อแก้ไขไฟล์ในการจับคู่แบบกลม:

// 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');
});

อย่างไรก็ตามมันใช้งานไม่ได้ (มันไม่ทำงาน) สำหรับไฟล์ใหม่หรือไฟล์ที่ถูกลบ มีบางอย่างที่ฉันขาดหายไปหรือไม่?

แก้ไข : แม้ใช้ปลั๊กอิน grunt-watch ดูเหมือนว่าจะไม่ทำงาน:

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');
    });
});

แก้ไข : แก้ไขมันเป็นปัญหานี้ Globs ที่เริ่มต้นด้วย./(นั่นคือมูลค่าsrc) ดูเหมือนว่าจะไม่ทำงานกับ ATM

แก้ไข:เห็นได้ชัดว่าgulp.watchใช้งานได้กับไฟล์ใหม่หรือไฟล์ที่ถูกลบทันที มันไม่ได้เมื่อถามคำถาม

ส่วนที่เหลือของคำตอบของฉันยังคงอยู่: gulp-watchมักจะเป็นทางออกที่ดีกว่าเพราะช่วยให้คุณดำเนินการเฉพาะกับไฟล์ที่ได้รับการแก้ไขในขณะที่gulp.watchช่วยให้คุณทำงานที่สมบูรณ์เท่านั้น สำหรับโครงการขนาดที่เหมาะสมสิ่งนี้จะช้าเกินไปที่จะเป็นประโยชน์

คุณไม่ได้ทำอะไรเลย gulp.watchไม่ทำงานกับไฟล์ใหม่หรือไฟล์ที่ถูกลบ มันเป็นวิธีง่ายๆที่ออกแบบมาสำหรับโครงการง่าย ๆ

ที่จะได้รับการดูไฟล์ที่สามารถมองหาไฟล์ใหม่ให้ใช้ปลั๊กอินที่มีประสิทธิภาพมากขึ้น การใช้งานมีลักษณะเช่นนี้:gulp-watch

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>> );
});

ส่วนตัวผมขอแนะนำตัวเลือกแรก วิธีนี้ช่วยให้กระบวนการต่อไฟล์เร็วขึ้นมาก มันใช้งานได้ดีในระหว่างการพัฒนาด้วย livereload ตราบใดที่คุณไม่ได้ต่อไฟล์ใด ๆ

คุณสามารถปิดกระแสข้อมูลของคุณโดยใช้ห้องสมุดของฉันlazypipeหรือเพียงแค่ใช้ฟังก์ชั่นและstream-combinerดังนี้:

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

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

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

อัพเดท 15 ตุลาคม 2557

ตามที่ระบุโดย @pkyeck ด้านล่างเห็นได้ชัดว่ารุ่น 1.0 ของการgulp-watchเปลี่ยนแปลงรูปแบบเล็กน้อยดังนั้นตัวอย่างข้างต้นควรเป็น:

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>> );
});

และ

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

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

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

ทั้งgulp.watch()และrequire('gulp-watch')()จะทริกเกอร์สำหรับไฟล์ใหม่ / ถูกลบ แต่ไม่ใช่ถ้าคุณใช้ไดเรกทอรีที่แน่นอน ในการทดสอบของฉันฉันไม่ได้ใช้"./"สำหรับไดเรกทอรีญาติ BTW

ทั้งสองอย่างจะไม่ทริกเกอร์หากลบทั้งไดเรกทอรี

   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');
   //});

หากsrcเป็นพา ธ สัมบูรณ์ (เริ่มต้นด้วย/) รหัสของคุณจะไม่ตรวจพบไฟล์ใหม่หรือไฟล์ที่ถูกลบ อย่างไรก็ตามยังมีวิธี:

แทน:

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

เขียน:

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

และมันจะทำงาน!

Globs จะต้องระบุไดเรกทอรีฐานแยกต่างหากและจะต้องไม่ระบุตำแหน่งฐานใน glob ตัวเอง

หากคุณมีlib/*.jsมันจะดูใต้ dir ทำงานปัจจุบันซึ่งเป็นprocess.cwd()

Gulp ใช้ Gaze เพื่อดูไฟล์และในGulp API docเราเห็นว่าเราสามารถส่งต่อตัวเลือกเฉพาะ Gaze ไปยังฟังก์ชั่นการดูได้:gulp.watch(glob[, opts], tasks)

ตอนนี้ในGaze docเราสามารถพบว่า dir ที่ทำงานในปัจจุบัน (glob ฐาน dir) เป็นcwdตัวเลือก

ซึ่งนำเราไปสู่คำตอบของ alexk: gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

ฉันรู้ว่านี่เป็นคำถามที่เก่ากว่า แต่ฉันคิดว่าฉันจะทิ้งโซลูชันที่ฉันคิดไว้ ไม่มีปลั๊กอินอึกที่ฉันพบจะแจ้งให้ฉันทราบของไฟล์ใหม่หรือเปลี่ยนชื่อ ดังนั้นฉันจึงได้ห่อหุ้ม monocle ในฟังก์ชั่นอำนวยความสะดวก

นี่คือตัวอย่างของวิธีการใช้ฟังก์ชั่น:

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')
    }]
  });

ฉันควรทราบว่า gulpStart เป็นฟังก์ชั่นอำนวยความสะดวกที่ฉันทำ

และนี่คือโมดูลนาฬิกาจริง

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
  });
};

ค่อนข้างง่ายใช่มั้ย สิ่งทั้งหมดสามารถพบได้ที่ชุดเริ่มต้นของฉันอึก: https://github.com/chrisdavies/gulp_starter_kit

เป็นสิ่งสำคัญที่จะต้องทราบว่าดูเหมือนว่า gulp.watch จะรายงานเฉพาะการเปลี่ยนแปลงและลบไฟล์ใน Windows แต่รับฟังไฟล์ใหม่และไฟล์ที่ถูกลบตามค่าเริ่มต้นใน OSX:

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

คุณควรใช้ 'gulp-watch' สำหรับไฟล์ใหม่ / เปลี่ยนชื่อ / ลบทิ้งแทน 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));
    });
});