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

Question

如何在 Gulp 4 中设置 browserSync reload html、js？

sass loader没有问题。

我无法配置重新加载 html 和 js。我的错在哪里？

我试过 gulp.watch("*.html").on("change", reload);

但什么都没有改变

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;

感谢您的帮助

Answer 1

我也有这个错误。我制作了单独的重新加载功能并制作了 gulp 默认任务。检查我的 gulp 文件代码以更好地理解。

//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

最后对我有用的是在我的 CSS 函数中添加 return。

之前：

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

之后：

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

其余的：

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