How to set up Gulp so that when a sass file changes, browsersync automatically refreshes the page?

Question

Sass

const { src, dest, parallel, watch } = require('gulp');
const sass = require('gulp-sass');
const minifyCSS = require('gulp-csso');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
function css() {
return src('src/sass/**/*.sass')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(minifyCSS())
.pipe(dest('src/css'))
.pipe(browserSync.stream());
}
function js() {
return src('src/js/*.
.pipe(concat('app.min.js'))
.pipe(dest('src/js'))
}
exports.js = js;
exports.css = css;
exports.default = parallel( css, js);

Answer 1

You need to register watch and browser-sync. Write down this code.

function browser () {
   browserSync.init({
      server: {
         baseDir: 'путь к папке проекта'
      },
      notify: false,
   })
}

function watchFiles () {
   watch ('путь к отслеживаемому файлу', css)
}

exports.default = series(
   parallel(css, js),
   series(browser, watchFiles)
)