Не срабатывает gulp watch?

Question

[Дмитрий Горбачев]

Изучаю gulp, стоит версия gulp 4 и имею такой код, понятное дело, что gulp watch не срабатывает.
Сам код:

var gulp        = require('gulp'),
    sass        = require('gulp-sass'),
    browserSync = require('browser-sync');

gulp.task('sass', function() {
    return gulp.src('app/sass/*.sass')
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({stream: true}))
});

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: 'app'
        },
        notify: false
    });
});

gulp.task('watch', ['browser-sync', 'sass'], function() {
    gulp.watch('app/sass/*.sass', gulp.series ('sass'));
});

Подскажите пожалуйста, как делать по версии gulp 4?

Answer 1

[Martovitskiy]

был похожий вопрос посмотрите ответы, комменты

Comments

[Дмитрий Горбачев]

Не совсем, у меня проблемы именно с этой строчкой

gulp.task('watch', ['browser-sync', 'sass'], function() {

[Martovitskiy]

так попробуйте

gulp.task('watch', gulp.parallel('browser-sync', 'sass'));

[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 css() {
  return gulp.src([
    'assets/css/bootstrap.min.css',
    'assets/css/animate.css'
  ])
    .pipe(concatCSS('libs.css'))
    .pipe(gulp.dest('assets/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(gulp.dest('assets/css'))
    .pipe(browsersync.stream());
}

function browserSync(done) {
  browsersync.init({
    server: {
      baseDir: "./"
    },
    port: 3000,
    notify: false // Отключаю уведомления в браузере
  });
  done();
}

function clean() {
  return del(["dist"]);
}

function clear() {
  return cache.clearAll();
}

function images() {
  return gulp
    .src("assets/images/**/*")
    .pipe((cache(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        imagemin.jpegtran({ progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [
            {
              removeViewBox: false,
              collapseGroups: true,
              use: [pngquant()]
            }
          ]
        })
      ])))
    )
    .pipe(gulp.dest("dist/assets/images"));
}

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();
}

function buildFiles(done) {
  gulp.src([
    'assets/css/main.css',
    'assets/css/libs.min.css'
  ])
    .pipe(cssnano())
    .pipe(gulp.dest('dist/assets/css'));

  gulp.src(
    'assets/js/libs.min.js')
    .pipe(gulp.dest('dist/assets/js'));

  gulp.src('assets/js/main.js')
    .pipe(uglify({
      toplevel: true
    }))
    .pipe(gulp.dest('dist/assets/js'));

  gulp.src('assets/js/config-contact.js')
    .pipe(uglify({
      toplevel: true
    }))
    .pipe(gulp.dest('dist/assets/js'));

  gulp.src('*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));

}
exports.clean = clean;
gulp.task('sass', gulpSass);
gulp.task('clear', clear);
gulp.task('img', images);
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)));