如何使用 Gulp 4 设置 browserSync 重新加载 html、js？

Question

How to set up browserSync reload html, js in Gulp 4?

There is no problem with sass loader.

I can't configure reload html and js. Where is my mistake?

I tried gulp.watch("*.html").on("change", reload);

but nothing has changed

gulpfile.js

const
  gulp          = require('gulp'),
  sass          = require('gulp-sass'),
  browsersync   = require("browser-sync").create(),
  concat        = require('gulp-concat'), 
  concatCSS     = require('gulp-concat-css'),
  uglify        = require('gulp-uglifyjs'), 
  cssnano       = require('gulp-cssnano'), 
  rename        = require('gulp-rename'),
  del           = require('del'),
  imagemin      = require('gulp-imagemin'),
  pngquant      = require('imagemin-pngquant'),
  cache         = require('gulp-cache'),
  autoprefixer  = require('gulp-autoprefixer'),
  htmlmin       = require('gulp-htmlmin'),
  gutil         = require( 'gulp-util' ),
  ftp           = require( 'vinyl-ftp' );

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 browserSync(done) {
  browsersync.init({
    server: {
      baseDir: "./"
    },
    port: 3000,
    notify: false
  });
  done();
}

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

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

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


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

exports.clean = clean;
exports.clear = clear;
exports.watch = watch;

I will be grateful for the help

Answer 1

I also had this error. I made separate reload function and made gulp default task. check my gulp file code to understand better.

//Importing dependencies
var gulp = require ('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    imagemin = require('gulp-imagemin'),
    changed = require('gulp-changed'),
    uglify = require('gulp-uglify'),
    lineec = require('gulp-line-ending-corrector');

// BrowserSync
function serve(done) {
  browserSync.init({
    server: {
      baseDir: "./src/"
    },
    port: 3000
  });
  done();
}

// BrowserSync Reload
function reload(done) {
  browserSync.reload();
  done();
}

//Declaring Paths
var paths = {
    styles:{
      src:'./src/scss/*.scss',
      dest: './src/css/'
    },
    custom_js:{
      src:'./src/scripts/*.js',
      dest:'./src/js'
    }
}

//Compiling & Moving Custom SASS
function custom_sass() {
  return gulp
    .src(paths.styles.src)
    .pipe(sourcemaps.init())
      .pipe(sass())
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false}))
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.styles.dest));
}

//Custom Scripts
function custom_js(){
  return gulp
    .src(paths.custom_js.src)
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.custom_js.dest));
}

//Watching File
function watch() {
  gulp.watch(paths.styles.src, gulp.series(custom_sass,reload));
  gulp.watch(paths.custom_js.src, gulp.series(custom_js,reload));
  gulp.watch('./src/*.html', reload);
}

//Compiling & Moving stylesheets & Scripts
var files = gulp.parallel(custom_sass, custom_js);

//Building task
var build = gulp.series( files, gulp.parallel(serve, watch));
gulp.task(build);
gulp.task('default', build);

Answer 2

What finally worked for me was adding a return in my CSS function.

Before:

function css(done) {
    gulp.src(path.src.css)
        .pipe(sourcemaps.init())
        .pipe(sass({
            errorLogToConsole: true,
            outputStyle: 'compact'
        }))
        .on('error', console.error.bind(console))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(path.dist.css))
        .pipe(browsersync.stream());
    done();
};

After:

function css() {
    return gulp.src(path.src.css)
        .pipe(sourcemaps.init())
        .pipe(sass({
            errorLogToConsole: true,
            outputStyle: 'compact'
        }))
        .on('error', console.error.bind(console))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(path.dist.css))
        .pipe(browsersync.stream());
};

The rest:

function watch_files(){
    gulp.watch(path.src.css,  gulp.series(css, reload));
};
gulp.task('css', css);
gulp.task('watch', gulp.parallel(watch_files, browser_sync));