नई या हटाई गई फ़ाइलों के लिए गुलगुल gulp.watch ट्रिगर नहीं है?


151

ग्लोब मैच में फ़ाइलों को संपादित करते समय निम्न गुलजेट्स कार्य ठीक काम करता है:

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

हालाँकि यह नई या हटाई गई फ़ाइलों के लिए काम नहीं करता है (यह ट्रिगर नहीं है)। क्या मुझे कुछ याद आ रहा है?

संपादित करें : यहां तक ​​कि ग्रंट-वॉच प्लगइन का उपयोग करके यह काम नहीं करता है:

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

संपादित करें : हल, यह था इस मुद्दे । एटीएम ./(जो कि मूल्य था src) के साथ शुरू होने वाले दस्ताने काम नहीं कर रहे हैं।


2
बहुत अच्छा होगा यदि आप नेस्टर उरकिज़ा से एक के लिए स्वीकृत उत्तर को बदल दें। यह एक अतिरिक्त प्लगइन जोड़ने के बजाय यहाँ असली जवाब है
जस्टिन नोएल

@alexk द्वारा उत्तर सबसे सरल था, और इसके अलावा की आवश्यकता नहीं थी gulp-watch, जैसेgulp.watch('js/**/*.js', {cwd: src}, ['scripts']);
घोड़ा

जवाबों:


130

संपादित करें: जाहिरा तौर पर 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>> );
});

व्यक्तिगत रूप से, मैं पहला विकल्प सुझाता हूं। यह बहुत तेज़, प्रति-फ़ाइल प्रक्रियाओं की अनुमति देता है। यह लीवरलोड के साथ विकास के दौरान बहुत अच्छा काम करता है, जब तक कि आप किसी भी फाइल को सुरक्षित नहीं कर रहे हैं।

आप मेरी 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 अक्टूबर 2014

जैसा कि नीचे @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());

मदद के लिए धन्यवाद, लेकिन अभी भी यह काम करने के लिए नहीं मिल सकता है। मैं गल्प के लिए नया हूं (मैंने ग्रंट को एक-दो बार इस्तेमाल किया है) और शायद मेरा मुख्य काम गलत है ... डननो। मेरा अद्यतन प्रश्न देखें।
गार्मो

18
github.com/floatdrop/gulp-watch/issues/1 ग्लब्स './' से शुरू नहीं होते। मेरा src वैरिएबल बिल्कुल '- /' है। समस्या मिल गई! धन्यवाद!
ग्रीमो

1
उस बग को खोजने पर अच्छी पकड़। उम्मीद है कि यह किसी और के पार आने में मदद करेगा!
ओवरजेलियस

@ जेन्स आप क्या जवाब दे रहे हैं? यही इसका उत्तर समझा रहा है।
बजकर

2
gulp.start एक गैर-सार्वजनिक API विधि के लिए एक कॉल है। क्या कार्यों को निष्पादित करने का एक और तरीका है?
रिचर्ड कोलेट

87

दोनों gulp.watch()और require('gulp-watch')()नए / नष्ट कर दिया फ़ाइलों के लिए लेकिन यदि आप निरपेक्ष निर्देशिका का उपयोग नहीं ट्रिगर किया जाएगा। मेरे परीक्षणों में मैंने "./"रिश्तेदार निर्देशिका बीटीडब्ल्यू के लिए उपयोग नहीं किया ।

यदि पूरी निर्देशिका हटा दी जाती है, तो दोनों ट्रिगर नहीं होंगे।

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

2
उत्कृष्ट और सरल उत्तर।
एडगर मार्टिनेज

3
हाँ - बहुत सारे उदाहरण वहाँ से शुरू होते हैं, ./जो उनके रास्तों से शुरू होते हैं - वास्तव में यह बुरा अभ्यास लगता है - github.com/floatdrop/gulp-watch/issues/1
rmorse

1
इसके लिए शुक्रिया। मैं बस अपने दिमाग को रैक कर रहा था कि gulp-watchनई फ़ाइलों या हटाए गए फ़ाइलों पर ट्रिगर करने के लिए ठीक से काम करने की कोशिश कर रहा हूं । कोई जरुरत नहीं है! gulp.watchक्या ये। सभी ./रास्तों से हटाकर मुद्दों को साफ किया। बहुत बढ़िया।
Qodesmith

2
यह शायद सही जवाब होना चाहिए - वास्तव में देखने के लिए किसी अन्य प्लगइन को स्थापित करने वाले फैंसी नहीं थे। मेरे सभी ग्लोब से ./ हटा दिया और पूरी तरह से काम किया! धन्यवाद!
नवीनजी

1
यह सबसे अच्छा जवाब है, कोई अतिरिक्त मॉड्यूल की आवश्यकता नहीं है या पागल सिंटैक्स की समझ है।
रियलपी

57

यदि srcएक निरपेक्ष पथ है (साथ शुरू /), तो आपका कोड नई या हटाई गई फ़ाइलों का पता लगाने वाला नहीं है। हालाँकि अभी भी एक तरीका है:

के बजाय:

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

लिखो:

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

और यह काम करेगा!


12
{ cwd: src }संकेत मेरी समाधान था। आपका बहुत बहुत धन्यवाद!
वायर्डोल्फिन

1
बहुत बहुत धन्यवाद @alexk, {cwd: src} ने मेरी समस्या हल कर दी।
kaxi1993

@DanielTonon आपने गलती से फाइलों की एक सरणी के अंदर डाल दिया था? का प्रत्यक्ष पैरामीटर होना चाहिएwatch
हॉर्स

यह एक सरणी में नहीं हो सकता है? अच्छा है कि बेकार है। बहिष्करण के बारे में क्या? स्रोत फ़ाइलों को किसी सरणी में रखे बिना बहिष्करणों के साथ gobbing करना संभव नहीं है।
डैनियल टोनन

4
बहुत बढ़िया जवाब। आगे जोड़ने के लिए, यदि आप हर ग्लोब पैटर्न को बदलना नहीं चाहते हैं, तो बस {cwd:'./'}ग्लोब पैटर्न को जोड़ें और छोड़ दें क्योंकि यह बन जाएगाgulp.watch('src/js/**/*.js', {cwd: './'}, ['scripts']);
आकाश

7

ग्लब्स की एक निर्दिष्ट आधार निर्देशिका होनी चाहिए और यह आधार स्थान ग्लोब में ही निर्दिष्ट नहीं होना चाहिए।

यदि आपके पास है lib/*.js, तो यह वर्तमान कार्यशील डीआईआर के तहत दिखेगाprocess.cwd()

गुलेल फाइलों को देखने के लिए टकटकी का उपयोग करता है और गुलि एपीआई डॉक में हम देखते हैं कि हम घड़ी समारोह के लिए विशिष्ट विकल्प पास कर सकते हैं:gulp.watch(glob[, opts], tasks)

अब गेज़ डॉक में हम पा सकते हैं कि मौजूदा कामकाजी डायर (ग्लोब बेस डायर) cwdविकल्प है।

जो हमें अलेक्स के उत्तर की ओर ले जाता है: gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);


3

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मुझे लगा कि मैं जिस समाधान के साथ आया हूं उसे फेंक दूंगा। मुझे जो भी प्लग इन मिला, उनमें से कोई भी मुझे नई या नामांकित फ़ाइलों की सूचना नहीं देगा। इसलिए मैंने एक सुविधा समारोह में मोनोकल को लपेटकर समाप्त कर दिया।

यहां बताया गया है कि उस फ़ंक्शन का उपयोग कैसे किया जाता है:

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

बहुत सरल, एह? पूरी बात मेरे gulp स्टार्टर किट पर देखी जा सकती है: https://github.com/chrisdavies/gulp_starter_kit


1
अरे दोस्त, इसके लिए पर्याप्त लोगों ने सहारा नहीं दिया है! यह एक आकर्षण की तरह काम करता है, बहुत-बहुत धन्यवाद। (जवाब "गुलस्टार्ट" क्या करता है, इसलिए यह भ्रमित हो सकता है, अगर किसी को दिलचस्पी है, तो बस लिंक पर जाएं और utilsफ़ोल्डर पर जाएं)
Augie Gardner

1

यह ध्यान रखना महत्वपूर्ण है कि यह gulp.watch की तरह दिखता है, केवल रिपोर्ट की गई और Windows पर फ़ाइलों को हटा दिया गया है, लेकिन OSX पर डिफ़ॉल्ट रूप से नई और हटाई गई फ़ाइलों के लिए सुनता है:

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


0

आपको 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));
    });
});
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.