Не происходит автоматическая проверка в gulp для sass и browser sync. Что делать?

Question

[Kiroyoku]

Доброго времени суток. Только начинаю работать с gulp и столкнулся с проблемой в использование. Таск запускается, но не происходит автоматического обновления страницы и компиляции из sass в css.

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


gulp.task('server', function() {

    browserSync.init({
        server: {
            baseDir: "source/"
        }
    });
}); 

gulp.task('sass', function() {
    return gulp.src("source/sass/**/*.sass")
        .pipe(sass())
        .pipe(gulp.dest("source/css"))
        .pipe(browserSync.stream());

        gulp.watch("source/sass/*.sass", ['sass']);
    				gulp.watch("source/*.html").on('change', browserSync.reload);
});

gulp.task('default', gulp.series('sass', gulp.parallel('server')));

Буду рад любой помощи и критики.

Comments

[Danila]

так а зачем ты засунул watcher'ы после return в функции? Они у тебя никогда не выполняются, т.к функция заканчивает работу. Вынеси их в отдельный таск, и запускай вместе с 'server'.

Answer 1

[Martovitskiy]

Попробуйте так, должно помочь:

const
  gulp          = require('gulp'),
  sass          = require('gulp-sass'),
  browsersync   = require("browser-sync").create(),


function gulpSass() {
  return gulp
    .src('source/sass/**/*.sass')
    .pipe(gulp.dest('source/css'))
    .pipe(browsersync.stream())
}


function browserSync(done) {
  browsersync.init({
    injectChanges: true,
    server: {
      baseDir: "./"
    },
    port: 3000,
    notify: false
  });
  done();
}


function watchFiles(done) {
  gulp.watch('source/sass/**/*.sass', gulp.parallel(gulpSass));
  gulp.watch('source/css/**/*.css', reload);
  gulp.watch('source/js/**/*.js', reload);
  gulp.watch('*.html', reload);
  done();
}

const watch = gulp.parallel(watchFiles, browserSync);


exports.watch = watch;

function reload(done) {
  browsersync.reload();
  done();
}

Comments

[Kiroyoku]

Спасибо за ответ и извиняюсь за длительное молчание. Попробую использовать, но буду очень признателен если сможешь расписать какой пункт за что отвечает. Понимаю, что возможно это не красиво, просить описание, но таким образом думаю лучше удастся понять принцип работы конкретно в данном примере.
Заранее спасибо за ответ!