Gulp 4, browsersync, как заставить работать?

Question

[martini4ka]

Ребята. помогите с gulp 4, столкнулся с gulp впервые и не смог заставить работать browsersync вот в этом коде
почти везде устарвешая информация gulp 3

const gulp        = require('gulp');
const sass        = require('gulp-sass');
const sourcemaps  = require('gulp-sourcemaps');
const watch       = require('gulp-watch');


gulp.task('sass-compile', function () {
	return gulp.src('./scss/**/*.scss')
	.pipe(sourcemaps.init())
	.pipe(sass().on('error', sass.logError))
	.pipe(sourcemaps.write('./'))
	.pipe(gulp.dest('./css/'));
})


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

Comments

[Ernest Faizullin]

Здравствуйте, дорогой друг, для начала попробуйте подключить browsersync и ознакомиться

PS: https://www.browsersync.io/docs/gulp

Answer 1

[Martovitskiy]

Так пробуйте с Gulp4:

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


function gulpSass() {
  return gulp
    .src('./scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css'))
    .pipe(browsersync.stream())
}


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


function watchFiles(done) {
  gulp.watch('./scss/**/*.scss', gulp.parallel(gulpSass));
  done();
}

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


exports.watch = watch;

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

Только установите browsersync , без него ничего не получится)