[javascript] Gulp 오류 : 감시 작업은 함수 여야합니다.

Program / 글쓴이

내 gulpfile은 다음과 같습니다.

// Modules & Plugins
var gulp = require('gulp');
var concat = require('gulp-concat');
var myth = require('gulp-myth');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var imagemin = require('gulp-imagemin');

// Styles Task
gulp.task('styles', function() {
    return gulp.src('app/css/*.css')
        .pipe(concat('all.css'))
        .pipe(myth())
        .pipe(gulp.dest('dist'));
});

// Scripts Task
gulp.task('scripts', function() {
    return gulp.src('app/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

// Images Task
gulp.task('images', function() {
    return gulp.src('app/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});

// Watch Task
gulp.task('watch', function() {
    gulp.watch('app/css/*.css', 'styles');
    gulp.watch('app/js/*.js', 'scripts');
    gulp.watch('app/img/*', 'images');
});

// Default Task
gulp.task('default', gulp.parallel('styles', 'scripts', 'images', 'watch'));

나는 실행하는 경우 images, scripts또는 css혼자 작업을 그것을 작동합니다. 나는 return작업 에 추가해야 했다-이것은 책에 없었지만 인터넷 검색은 이것이 필요하다는 것을 보여 주었다.

내가 가진 문제는 default작업 오류입니다.

[18:41:59] Error: watching app/css/*.css: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (/media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/node_modules/gulp/index.js:28:11)
    at /media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/gulpfile.js:36:10
    at taskWrapper (/media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:287:14)
    at runBound (domain.js:300:12)
    at asyncRunner (/media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/node_modules/async-done/index.js:36:18)
    at nextTickCallbackWith0Args (node.js:419:9)
    at process._tickCallback (node.js:348:13)
    at Function.Module.runMain (module.js:444:11)
    at startup (node.js:136:18)

return워치 태스크 도 없기 때문이라고 생각합니다 . 또한 오류 메시지는 명확하지 않습니다-적어도 나에게는. 나는 return마지막 후에 추가를 시도했지만 그것도 gulp.watch()작동하지 않았습니다.

답변

gulp 3.x에서는 다음 gulp.watch()과 같이 작업 이름을 전달할 수 있습니다 .

gulp.task('watch', function() {
  gulp.watch('app/css/*.css', ['styles']);
  gulp.watch('app/js/*.js', ['scripts']);
  gulp.watch('app/img/*', ['images']);
});

gulp 4.x에서는 더 이상 그렇지 않습니다. 당신은 이 함수를 전달합니다. gulp 4.x에서이 작업을 수행하는 일반적인 방법은 gulp.series()하나의 작업 이름으로 만 호출 을 전달하는 것 입니다. 지정된 작업 만 실행하는 함수를 반환합니다.

gulp.task('watch', function() {
  gulp.watch('app/css/*.css', gulp.series('styles'));
  gulp.watch('app/js/*.js', gulp.series('scripts'));
  gulp.watch('app/img/*', gulp.series('images'));
});

답변

모두에게 감사합니다

gulp.task('watch', function(){
    gulp.watch('app/sass/**/*.sass', gulp.series('sass'));
});

버전 gulp 4.xx 용

답변

GULP-V4.0

지금 당장 대답하기에는 조금 늦었지만 여전히. 나는 또한이 문제에 갇혀 있었고 이것이 내가 작동하게 된 방법입니다.
Gulp 구조

내가 뭘 잘못했는지 자세히 분석

  1. watch내 html 파일에서 일부 변경 사항을 발견 했을 때 reload 함수를 호출하는 것을 잊었습니다 .
  2. 이후 차단 fireUp하고 KeepWatching있습니다. 직렬이 아닌 병렬로 시작해야합니다. 그래서 저는 변수 실행에서 병렬 함수를 사용했습니다.

답변

Gulp 4.0에서 저에게 효과적이었습니다.

gulp.task('watch', function() {
      gulp.watch('src/images/*.png', gulp.series('images'));
      gulp.watch('src/js/*.js', gulp.series('js'));
      gulp.watch('src/scss/*.scss', gulp.series('css'));
      gulp.watch('src/html/*.html', gulp.series('html'));
});

답변

// 나에게 도움이 된 사항 확인

gulp.task('watch', function(){
    gulp.watch('css/shop.css', gulp.series(['shop']));
});

답변