새 파일이나 삭제 된 파일에 대해 gulp.watch가 트리거되지 않습니까?

glob 일치에서 파일을 편집 할 때 다음 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');
    });
});

편집 : 해결 되었습니다 . 이 문제 였습니다. 로 시작하는 글로브 ./(의 가치 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());

업데이트 2014 년 10 월 15 일

아래 @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']);

작동합니다!

Glob에는 별도의 기본 디렉토리가 지정되어 있어야하며 해당 기본 위치는 glob 자체에 지정되어서는 안됩니다.

당신이 가지고 있다면 lib/*.js, 그것은 현재 작업 디렉토리 아래를 볼 것입니다.process.cwd()

Gulp는 Gaze를 사용하여 파일을보고 Gulp API 문서에서 Gaze 특정 옵션을 watch 함수에 전달할 수 있음을 알 수 있습니다.gulp.watch(glob[, opts], tasks)

이제 Gaze 문서 에서 현재 작업 디렉토리 (glob base dir)가 cwd옵션 이라는 것을 알 수 있습니다.

그러면 alexk의 답변으로 이어집니다. gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

나는 이것이 오래된 질문이라는 것을 알고 있지만, 내가 생각해 낸 해결책을 던질 것이라고 생각했다. 내가 찾은 gulp 플러그인 중 어느 것도 새 파일이나 이름이 바뀐 파일을 알려주지 않습니다. 그래서 나는 편의 기능으로 단 안경을 포장했습니다.

해당 기능이 사용되는 방법의 예는 다음과 같습니다.

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