Gulpfile.js не работает watch, в чем беда?

Question

[Кирьян Горячев]

Через Gulp компилирую scss в css. Все было прекрасно, но начав новый проект, обнаружил, что код Gulpfile.js, который срабатывал от проекта к проекту перестал работать.

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
 
gulp.task('sass', function () {
  gulp.src('./assets/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(autoprefixer({
      browsers: ["last 50 versions", "ie >= 9"],
      cascade: false
  }))
    .pipe(gulp.dest('./assets/css'))
    
});

gulp.task('watch', function () {
  gulp.watch('./assets/scss/*.scss', ['sass']);
});

Когда запускаю watch, то после изменения scss скрипт срабатывает, но после надписи starting 'sass' уже ничего не происходит. Если запустить 'sass', то консоль отвечает

The following tasks did not complete: sass
Did you forget to signal async completion?.

Погуглив, нашел информацию о gulp.parallel и series в Gulp v4, но так и не понял, что к чему. Прошу помочь

Comments

[Сергей delphinpro]

Просто устанавливайте gulp 3 и не парьтесь.

npm i gulp@3

Answer 1

[Martovitskiy]

В четвертой версии появился синтаксис, который позволяет определять порядок запуска задач.
Попробуйте так.

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

вот видео. В нем подробно рассказано, что изменили и зачем

Comments

[Сергей delphinpro]

в этом видео нифига не сказано, зачем изменили. Зато много воды. Четвертьчасовой видос вполне можно было уместить в три минуты.

[coderxx]

Сергей delphinpro, так уместите, в чем проблема?

[Martovitskiy]

Сергей delphinpro, согласен, что воды много, но с его подсказками у меня получилось перейти на 4 без проблем
Еще видео Д.Лаврика не плохое

[Андрей]

и забудьте про .task если всё таки перешли на gulp 4

[Martovitskiy]

Андрей, в данном случае автор просил работающий код. Сам писал так:

function gulpSass() {
  return gulp
    .src('assets/sass/**/*.sass')
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true})) 
    .pipe(gulp.dest('assets/css'))
    .pipe(browsersync.stream()) 
}
function watchFiles(done) {
  gulp.watch('assets/sass/**/*.sass', gulp.parallel(gulpSass));
  gulp.watch('assets/css/**/*.css', browserSync.reload);
  gulp.watch('*.html', browserSync.reload);
  gulp.watch('assets/js/**/*.js', browserSync.reload);
  done();
}

gulp.task('clean', clean);
gulp.task('sass', gulpSass);
gulp.task('clear', clear);
gulp.task('img', images);
gulp.task('scripts', scripts);
gulp.task('css', css);
gulp.task('browser-sync', browserSync);
gulp.task('watch', gulp.parallel(watchFiles, browserSync, css, scripts));
gulp.task('build', gulp.series(clean, gulp.parallel(buildFiles, images, scripts)));

[Андрей]

было
gulp.task('clean', clean);

стало
exports.clean= clean;

[Андрей]

тут тоже не нужен метод
gulp.watch('assets/sass/**/*.sass', gulpSass);

[Martovitskiy]

Андрей, спасибо за подсказку, упусил

[Сергей delphinpro]

coderxx, не надо ерничать. Если взять выжимку из этого видео, даже с самыми подробными объяснениями заявленного сабжа, как раз и выйдет минуты три-четыре. Остальное — вода ради хронометража.

[coderxx]

Сергей delphinpro, сделать видос приличного качества стоит больших сил. А критиковать - просто и приятно:) Вот что я хотел сказать...

[Кирьян Горячев]

Спасибо за решение и все дополнения!

Answer 2

[Вадим Кот]

Ваша ошибка относится к таску sass - далее читаем документацию https://gulpjs.com/docs/en/getting-started/async-c... и самым простым решением будет добавить return

gulp.task('sass', function () {
  return gulp.src('./assets/scss/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ["last 50 versions", "ie >= 9"],
      cascade: false
    }))
    .pipe(gulp.dest('./assets/css'));
});

Про таск watch написал Martovitskiy

Comments

[Кирьян Горячев]

Спасибо за подсказку!