programing

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

codeshow 2023. 10. 29. 20:02
반응형

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

여기 제 꿀꺽꿀꺽 파일이 있습니다.

// 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에서는 더 이상 그렇지 않습니다.기능을 통과시켜야 합니다.이것을 꿀꺽꿀꺽 4.x에서 하는 관습적인 방법은 a를 하는 것입니다.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-V4.0

지금 당장 대답하기엔 좀 늦었지만 그래도 그렇습니다.저도 이 문제에 빠져 있었고 이렇게 작동하게 되었습니다.

내가 무엇을 잘못했는지 자세히 분석합니다.

  1. 제가 reload 기능을 호출하는 것을 잊었습니다.watchhtml 파일이 약간 변경된 것을 알아차렸습니다.
  2. 부터fireUp그리고.KeepWatching차단하고 있습니다.이들은 직렬보다는 병렬로 시작할 필요가 있습니다.그래서 변수 런에서 병렬 함수를 사용했습니다.

모두에게 감사합니다

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

version gulp 4.xx의 경우

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

제 경우에는 이렇게 해주세요: (gulpfile.js에서) (설치: gulp, gulpasss)

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));

var cssDest = 'style';
var cssInputFile = 'source/style.scss';
var watchedFiles = 'source/**/*.scss';




gulp.task('buildcss', function(){
    return gulp.src(cssInputFile)
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .pipe(gulp.dest(cssDest));
});

gulp.task('watch', function(){
    gulp.watch(watchedFiles, gulp.series(['buildcss']));
});

표창: 꿀꺽꿀꺽 시계
(v 4.0)

제 쪽에서도 "{usePolling: true}"을 추가해야 작동할 수 있었습니다.

gulp.watch(paths.js_src + '/*.js', {usePolling: true}, gulp.series(projectScripts, ondemandProjectScripts))

제 코드가 도커 컨테이너에 들어가서 그런 것 같습니다.

언급URL : https://stackoverflow.com/questions/39665773/gulp-error-watch-task-has-to-be-a-function

반응형