Почему Browser-sync не обновляет страницу?

Question

[Роман Благов]

Не могу до конца привыкнуть к Gulp 4 и понять, почему при запуске таска "default" - watch и sass срабатывают всего один раз.

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", function(){
  gulp.watch("app/scss/**/*.sass", gulp.parallel("sass"));
  gulp.watch("app/*.html", browserSync.reload);
  gulp.watch("app/js/*.js", browserSync.reload);
});

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

[23:43:11] Using gulpfile ~\OneDrive\Рабочий стол\myproject\gulpfile.js
[23:43:11] Starting 'default'...
[23:43:11] Starting 'watch'...
[23:43:11] Starting 'sass'...
[23:43:11] Starting 'browser-sync'...
[23:43:11] Finished 'sass' after 121 ms
[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.178.23:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ---------------------------------------
[Browsersync] Serving files from: app

Comments

[Роман Благов]

Опытным путём понял, что ошибка в таске "watch". Вот только где именно - не ясно.

Answer 1

[Martovitskiy]

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

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

на sass :

.pipe(browsersync.stream())

Comments

[Martovitskiy]

в конечном итоге так:

function gulpSass() {
  return gulp
    .src('app/sass/**/*.sass')
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true})) // Создаю префиксы
    .pipe(gulp.dest('app/css'))
    .pipe(browsersync.stream()) 
}

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

function watchFiles(done) {
  gulp.watch('app/sass/**/*.sass', gulp.parallel(gulpSass));
  gulp.watch('app/css/**/*.css', browserSync.reload);
  gulp.watch('*.html', browserSync.reload);
  gulp.watch('app/js/**/*.js', browserSync.reload);
  done();
}
gulp.task('sass', gulpSass);
gulp.task('browser-sync', browserSync);
gulp.task('watch', gulp.parallel(watchFiles, browserSync, sass));

[Роман Благов]

Martovitskiy, спасибо большое - помогло... частично... watch отрабатывает, а browser-sync нет