Oto mój plik 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'));
Jeśli uruchomić images
, scripts
lub css
sam zadanie to działa. Musiałem dodać return
w zadaniach - tego nie było w książce, ale wyszukiwanie w Google pokazało mi, że jest to wymagane.
Problem polega na tym, że default
błędy zadania:
[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)
Myślę, że to dlatego, że nie ma również return
zadania zegarka. Również komunikat o błędzie nie jest jasny - przynajmniej dla mnie. Próbowałem dodać return
po ostatnim, gulp.watch()
ale to też nie zadziałało.
źródło
styles
wgulp.series('styles'));
jest funkcją. W moim przypadkusass
zdefiniowałem jako funkcję, ale wziąłem to, co było w miejscu( )
docelowym. Dla każdego, kto skorzystał z samouczków „Gulp for Beginners” i utknął, rozwiązaniem jest zastąpienie liniigulp.watch('app/scss/**/*.scss', ['sass']);
przezgulp.watch('app/sass/**/*.sass', gulp.series('sass'));
gulp.watch('app/sass/**/*.sass', gulp.series('sass'));
igulp.watch('app/sass/**/*.sass', gulp.series['sass']);
? Przetestowałem obie linie i nie zauważyłem żadnej zmiany, ale jestem pewien, że jest różnica (która będzie mnie później prześladować).dzięki za wszystko
dla wersji gulp 4.xx
źródło
gulp.series('sass')
GULP-V4.0
Jest już trochę za późno, aby odpowiedzieć na to pytanie, ale nadal. Ja również utknąłem w tym problemie i tak to działało.
Szczegółowa analiza tego, co robiłem źle
watch
zauważyłem pewne zmiany w moich plikach html.fireUp
iKeepWatching
blokują. Muszą być uruchamiane równolegle, a nie seryjnie. Więc użyłem funkcji równoległej w przebiegu zmiennej.źródło
U mnie zadziałało w Gulp 4.0
źródło
// Sprawdź, co mi zadziałało
źródło