Kesalahan Gulp: tugas jam harus menjadi fungsi

126

Ini gulpfile saya:

// 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'));

Jika saya menjalankan images, scriptsatau csstugas saja, itu berfungsi. Saya harus menambahkan returndalam tugas - ini tidak ada di buku tetapi googling menunjukkan kepada saya bahwa ini diperlukan.

Masalah yang saya miliki adalah defaultkesalahan tugas:

[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)

Saya pikir itu karena tidak ada returntugas jam tangan juga. Juga pesan kesalahannya tidak jelas - setidaknya bagi saya. Saya mencoba menambahkan returnsetelah yang terakhir gulp.watch()tetapi itu juga tidak berhasil.

Arnold Rimmer
sumber

Jawaban:

354

Dalam gulp 3.x Anda bisa meneruskan nama tugas menjadi gulp.watch()seperti ini:

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

Dalam tegukan 4.x ini tidak lagi terjadi. Anda harus melewati suatu fungsi. Cara umum untuk melakukan ini di gulp 4.x adalah meneruskan gulp.series()permintaan dengan hanya satu nama tugas. Ini mengembalikan fungsi yang hanya menjalankan tugas yang ditentukan:

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'));
});
Sven Schoenung
sumber
13
Jadi rangkaian satu fungsi ... agak aneh bukan?
MonsieurNinja
Terima kasih ... // 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
Got terjebak sampai aku menyadari stylesdi gulp.series('styles'));adalah fungsi. Dalam kasus saya, saya telah sassmendefinisikan sebagai fungsi, tetapi saya mengambil apa yang ada di dalam ( )sebagai tujuan. Bagi siapa pun yang mengikuti tutorial "Gulp for Beginners" dan mengalami kebuntuan, perbaikannya adalah mengganti baris gulp.watch('app/scss/**/*.scss', ['sass']);dengangulp.watch('app/sass/**/*.sass', gulp.series('sass'));
YCode
Apa bedanya btw gulp.watch('app/sass/**/*.sass', gulp.series('sass'));dan gulp.watch('app/sass/**/*.sass', gulp.series['sass']);? Saya menguji kedua garis dan tidak melihat perubahan, tapi saya yakin ada perbedaan (yang akan menghantui saya nanti).
YCode
19

Terima kasih untuk segalanya

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

untuk versi gulp 4.xx

Alexandr Kutsenko
sumber
Seharusnyagulp.series('sass')
Tony Bui
Tidak, tidak perlu serial jika hanya satu tugas.
Vortilion
18

GULP-V4.0

Agak terlambat untuk menjawab ini sekarang tapi tetap saja. Saya terjebak dalam masalah ini juga dan begitulah cara saya membuatnya bekerja. Struktur gulp

Secara rinci analisis apa yang saya lakukan salah

  1. Saya lupa memanggil fungsi reload ketika watchmelihat beberapa perubahan pada file html saya.
  2. Sejak fireUpdan KeepWatchingmemblokir. Mereka harus dimulai secara paralel, bukan serial. Jadi saya menggunakan fungsi paralel dalam menjalankan variabel.
cafebabe1991
sumber
4

Ini berhasil untuk saya di 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'));
});
Wasim Khan
sumber
0

// Periksa apa yang berhasil untukku

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