ข้อผิดพลาดอึก: งานนาฬิกาต้องเป็นฟังก์ชัน


127

นี่คือ 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งาน - สิ่งนี้ไม่ได้อยู่ในหนังสือ แต่ googling แสดงให้ฉันเห็นว่าสิ่งนี้จำเป็น

ปัญหาที่ฉันมีคือ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()แต่ก็ไม่ได้ผลเช่นกัน

คำตอบ:


356

ในอึก 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']);
});

ในอึก 4.x นี่ไม่ใช่กรณีอีกต่อไป คุณต้องผ่านฟังก์ชัน วิธีปกติในการทำสิ่งนี้ใน 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'));
});

13
ชุดของฟังก์ชันเดียว ... แปลกไปหน่อยใช่ไหม
MonsieurNinja

ขอบคุณ ... // watch 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 '));});
Wasim Khan

1
ได้ติดอยู่จนฉันตระหนักstylesในการgulp.series('styles'));เป็นฟังก์ชั่น ในกรณีของฉันฉันได้sassกำหนดเป็นฟังก์ชัน แต่ฉันใช้สิ่งที่อยู่ใน( )ปลายทาง สำหรับใครก็ตามที่ติดตามบทเรียน "Gulp for Beginners" และติดขัดการแก้ไขคือแทนที่บรรทัดgulp.watch('app/scss/**/*.scss', ['sass']);ด้วยgulp.watch('app/sass/**/*.sass', gulp.series('sass'));
YCode

อะไรคือความแตกต่าง btw gulp.watch('app/sass/**/*.sass', gulp.series('sass'));และgulp.watch('app/sass/**/*.sass', gulp.series['sass']);? ฉันทดสอบทั้งสองบรรทัดและไม่เห็นการเปลี่ยนแปลง แต่ฉันแน่ใจว่ามีความแตกต่าง (ซึ่งจะตามมาหลอกหลอนฉันในภายหลัง)
YCode


19

อึก-V4.0

ตอนนี้ตอบช้าไปหน่อย แต่ก็ยัง ฉันติดอยู่ในปัญหานี้เช่นกันและนี่คือวิธีที่ฉันทำให้มันได้ผล โครงสร้างอึก

วิเคราะห์โดยละเอียดว่าฉันทำอะไรผิด

  1. ฉันลืมเรียกฟังก์ชันรีโหลดเมื่อwatchสังเกตเห็นการเปลี่ยนแปลงบางอย่างในไฟล์ html ของฉัน
  2. ตั้งแต่fireUpและKeepWatchingกำลังปิดกั้น พวกเขาจำเป็นต้องเริ่มต้นแบบขนานแทนที่จะเป็นแบบอนุกรม ดังนั้นฉันจึงใช้ฟังก์ชันขนานในการเรียกใช้ตัวแปร

4

มันใช้ได้ผลสำหรับฉันใน 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'));
});

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.