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
, scripts
atau css
tugas saja, itu berfungsi. Saya harus menambahkan return
dalam tugas - ini tidak ada di buku tetapi googling menunjukkan kepada saya bahwa ini diperlukan.
Masalah yang saya miliki adalah default
kesalahan 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 return
tugas jam tangan juga. Juga pesan kesalahannya tidak jelas - setidaknya bagi saya. Saya mencoba menambahkan return
setelah yang terakhir gulp.watch()
tetapi itu juga tidak berhasil.
sumber
styles
digulp.series('styles'));
adalah fungsi. Dalam kasus saya, saya telahsass
mendefinisikan 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 barisgulp.watch('app/scss/**/*.scss', ['sass']);
dengangulp.watch('app/sass/**/*.sass', gulp.series('sass'));
gulp.watch('app/sass/**/*.sass', gulp.series('sass'));
dangulp.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).Terima kasih untuk segalanya
untuk versi gulp 4.xx
sumber
gulp.series('sass')
GULP-V4.0
Agak terlambat untuk menjawab ini sekarang tapi tetap saja. Saya terjebak dalam masalah ini juga dan begitulah cara saya membuatnya bekerja.
Secara rinci analisis apa yang saya lakukan salah
watch
melihat beberapa perubahan pada file html saya.fireUp
danKeepWatching
memblokir. Mereka harus dimulai secara paralel, bukan serial. Jadi saya menggunakan fungsi paralel dalam menjalankan variabel.sumber
Ini berhasil untuk saya di Gulp 4.0
sumber
// Periksa apa yang berhasil untukku
sumber