如何使用Gulp 4设置browserSync重装html，js？

Question

如何在Gulp 4中设置browserSync重新加载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);