গুলপস 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

নীচে @ পিকেইকের নির্দেশ অনুসারে, আপাতদৃষ্টিতে 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/floatrod/gulp-watch/issues/1 গ্লোবগুলি './' দিয়ে নির্গত হয় না starting আমার এসসিআর ভেরিয়েবল হ'ল '- /'। সমস্যা খুঁজে পেল! ধন্যবাদ!
গ্রিমো

1
সেই বাগটি খুঁজে পেয়ে ভাল catch আশা করি এর সাহায্যে অন্য কেউ এলে সহায়তা করবে!
ওভারজিউলেস

@ জেহনেস আপনি কি জবাব দিচ্ছেন? এই উত্তরটি এটাই ব্যাখ্যা করছে।
14-30

2
gulp.start হ'ল একটি সর্বজনীন এপিআই পদ্ধতিতে কল। কাজগুলি সম্পাদন করার অন্য উপায় আছে?
রিচার্ড কললেট

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
দুর্দান্ত এবং সহজ উত্তর।
এডগার মার্টিনেজ


1
এই জন্য আপনাকে ধন্যবাদ. আমি কেবল আমার মস্তিষ্ককে gulp-watchনতুন ফাইল বা মুছে ফেলা ফাইলগুলিতে ট্রিগার করতে সঠিকভাবে কাজ করার চেষ্টা করছিলাম । দরকার নেই! gulp.watchএই আছে. সমস্ত ./পথ থেকে মুছে ফেলা সমস্যার সমাধান হয়েছে। অসাধারণ.
26:41

2
এটি সম্ভবত সঠিক উত্তর হওয়া উচিত - দেখার জন্য অন্য কোনও প্লাগইন ইনস্টল করা সত্যিকারের অভিনব নয়। আমার সমস্ত গ্লোব থেকে ./ কে সরিয়ে দিয়ে পুরোপুরি কাজ করেছে! ধন্যবাদ!
নেজি

1
এটি সেরা উত্তর, কোনও অতিরিক্ত মডিউল প্রয়োজন বা পাগল সিনট্যাক্স বোঝার জন্য নয়।
রিয়েলপি

57

যদি srcকোনও পরম পথ হয় (এর সাথে শুরু হয় /), আপনার কোড নতুন বা মুছে ফেলা ফাইলগুলি সনাক্ত করতে যাচ্ছে না। তবে এখনও একটি উপায় আছে:

পরিবর্তে:

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

লিখুন:

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

এবং এটি কাজ করবে!


12
{ cwd: src }ইঙ্গিতটি আমার সমাধান ছিল। আপনাকে অনেক ধন্যবাদ!
ওয়্যারলেডফিন

1
অনেক ধন্যবাদ @alexk, {cwd: src my আমার সমস্যার সমাধান করেছে।
kaxi1993

@ ড্যানিয়েলটোন আপনি কি ভুল করে একটি অ্যারে ফাইলের ভিতরে রেখেছেন? সরাসরি প্যারামিটার হওয়া উচিতwatch
ঘোড়া

এটি একটি অ্যারে হতে পারে না? ভাল যে স্তন্যপান। বাদ কি হবে? উত্স ফাইলগুলিকে অ্যারে না রেখে ব্যাতিক্রম দিয়ে গাব করা সম্ভব নয়।
ড্যানিয়েল টোনন

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

আমার মনে রাখা উচিত যে গল্পস্টার্টটি আমার তৈরি একটি সুবিধামত ফাংশন।

এবং এখানে আসল ঘড়ির মডিউল।

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


1
আরে বন্ধু, যথেষ্ট লোকেরা এর জন্য প্রপস দিয়েছে না! এটি একটি মোহন মত কাজ করে, আপনাকে অনেক ধন্যবাদ। (উত্তরটি "গল্পস্টার্ট" কী করে তা খুঁজে বের করে, তাই এটি বিভ্রান্তিকর হতে পারে, যদি কেউ আগ্রহী হন তবে কেবল লিঙ্কটি দেখুন এবং utilsফোল্ডারে যান)
অগি গার্ডনার

1

এটি লক্ষণীয় গুরুত্বপূর্ণ যে এটি দেখতে gulp.watch এর মতো উইন্ডোজে কেবল ফাইলগুলি পরিবর্তিত এবং মুছে ফেলা প্রতিবেদন করে তবে ওএসএক্সে ডিফল্টরূপে নতুন এবং মুছে ফেলা ফাইলগুলি শোনে:

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


0

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));
    });
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.