Помилка Gulp: завдання перегляду має бути функцією


126

Ось мій 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в завданнях - цього не було в книзі, але Гуглінг показав мені, що цього потрібно.

Проблема, яку я маю, полягає в тому, що 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()але це теж не вийшло.

Відповіді:


354

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

У глотці 4.x це вже не так. Ви повинні пройти функцію. Звичайний спосіб робити це в gulp 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 '));});
Васим Хан

1
Застряг , поки я НЕ зрозумів , stylesв gulp.series('styles'));це функція. У моєму випадку я sassвизначив як функцію, але я взяв те, що було в ( )пункті призначення, як пункт призначення. Для всіх, хто перейшов до підручників "Gulp for початківців" і застряг, виправити це потрібно, щоб замінити рядок 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

Дякую за все

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

для версії gulp 4.xx


Це повинно бутиgulp.series('sass')
Тоні Буй

Ні, це не повинно бути серією, якщо це лише одне завдання.
Vortilion

18

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.