여러 파일을 Gulp-Watch하는 방법?

여러 파일을 Gulp-Watch하는 방법?

---

다음과 같은 것이 있습니다.

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/*.css'], function() {
        gulp.run('css');
    });

});

그러나 두 개의 디렉토리, sass 및 layouts 디렉토리를 감시하기 때문에 작동하지 않습니다.

gulp가 해당 디렉토리 내에서 일어나는 모든 일을 감시하도록 어떻게 작동합니까?

---

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/**/*.css'], ['css']);

});

sass/**/*.scss그리고 layouts/**/*.css모든 변경에 대한 모든 디렉토리 및 하위 디렉토리를 볼 것입니다 .scss및 .css변경되는 파일. 당신은에 있음을 변경하고자하는 경우 모든 파일 마지막 비트를 만들*.*

---

이렇게 시계를 쓸 수 있습니다.

gulp.task('watch', function() {
    gulp.watch('path/to/file', ['gulp task name for css/scss']);
    gulp.watch('path/to/file', ['gulp task name for js']);
});

이 방법으로보고 싶은 파일 경로와 생성 한 작업의 이름을 통해 원하는만큼 작업을 설정할 수 있습니다. 그런 다음 다음과 같이 기본값을 작성할 수 있습니다.

gulp.task('default', ['gulp task name for css/scss', 'gulp task name for js']);

단순히 다양한 파일 변경 사항을 감시하고 싶다면 *.css작업에서 와 같이 glob을 사용하여 파일을 감시하십시오 .

---

여러 사람 (나를 포함하여)에게 발생한 한 가지 문제는 작업 외부에 gulp.filter를 추가하면 첫 번째 통과 후 gulp.watch가 실패한다는 것입니다. 따라서 다음과 같은 것이 있다면 :

var filter = gulpFilter(['fileToExclude.js'])
gulp.task('newTask', function(){ ...

그런 다음 다음으로 변경해야합니다.

gulp.task('newTask', function(){
  var filter = gulpFilter(['fileToExclude.js'])

필터는 태스크 기능에 포함되어야합니다. 누군가에게 도움이되기를 바랍니다.

---

이것은 나를 위해 작동합니다 (Gulp 4) :

function watchSass() {
  return gulp.watch(sassGlob, { ignoreInitial: false }, buildCss)
}

function watchImages() {
  return gulp.watch(imagesGlob, copyImages)
}

exports.watch = gulp.parallel(watchSass, watchImages)

---

@AJ Alger의 답변은 Gulp v3.x를 사용할 때 저에게 효과적이었습니다.

그러나 Gulp 4부터 다음은 나를 위해 작동하는 것 같습니다.

각 작업은 값을 반환하거나 "done ()"을 호출해야합니다. 이 예제의 주요 작업은 병렬로 다른 작업을 호출하는 'watchSrc'입니다.

gulp.task('watchHtml', function(){
    return watch('src/**/*.html', function () {
        gulp.src('src/**/*')
            .pipe(gulp.dest(BUILD_DIR))
    })

})
gulp.task('watchJS', function(){
    return watch('src/**/*.js', 'devJS')
})

gulp.task('watchCSS', function(){
    return watch(['src/**/*.css', 'src/**/*.scss'], 'buildStyles')
})


gulp.task('watchSrc', gulp.parallel('watchHtml', 'watchJS', 'watchCSS'), function(done)
{
    done()
})

---

작업을 함수로 변환하는 경우

 function task1(){
   return gulp...
   ...
 }

다음 두 가지 유용한 방법을 사용할 수 있습니다.

GULP.SERIES는 작업을 동 기적으로 실행합니다.

gulp.task('default', gulp.series(task1,task2));

GULP.PARALLEL은 비동기 적으로 실행합니다.

gulp.task('default', gulp.parallel(task1,task2));

참고URL : https://stackoverflow.com/questions/27645103/how-to-gulp-watch-multiple-files