Gulp-Browser-Sync重新加载一次

问题描述

我正在尝试使用gulp-file-include将导航栏和页脚包含到我的文件中。我编写的代码可以完成这项工作，但是唯一的问题是，尽管我确实看到了CSS和JS中发生的事情，但浏览器仅加载一次，并且每次更改html文件的内容都不会重新加载。

我已经尝试了Internet上提供的所有解决方案，但未能使一切正常。

请看看并帮助我。

// Declarations
let gulp = require('gulp');
let autoprefixer = require('gulp-autoprefixer');
let imagemin = require('gulp-imagemin');
let sourcemaps = require('gulp-sourcemaps');
let sass = require('gulp-sass');
let uglify = require('gulp-uglify-es').default;
let rename = require('gulp-rename');
let fileInclude = require('gulp-file-include');
let browsersync = require('browser-sync').create();



// Main styles function
async function styles(){
    return gulp.src('src/scss/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'compressed'})).on('error',sass.logError)
        .pipe(autoprefixer())
        .pipe(sourcemaps.write())
        .pipe(rename('main.min.css'))
        .pipe(gulp.dest('build/assets/css'))
        .pipe(browsersync.stream());
}

// Compress images function
async function compressImgs(){
    return gulp.src('src/img/**/*.*')
    .pipe(imagemin([
        imagemin.gifsicle({interlaced: true}),imagemin.mozjpeg({progressive: true}),imagemin.optipng({optimizationLevel: 5}),imagemin.svgo({
            plugins:[
                {removeViewBox: true},{cleanupIDs: false}
            ]
        })
    ]))
    .pipe(gulp.dest('build/assets/img'))
    .pipe(browsersync.stream());
}

// Scripts function
async function scripts(){
    gulp.src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(rename('main.min.js'))
    .pipe(gulp.dest('build/assets/js'))
    .pipe(browsersync.stream());
}

// html include files
async function includeHTML(){
    gulp.src([
        '*.html','!nav.html',// ignore
        '!footer.html',// ignore
    ])
    .pipe(fileInclude({
        prefix: '@@',basepath: '@file'
    }))
    .pipe(gulp.dest('build/'))
    .pipe(browsersync.stream());
}



// Watch function for all tasks required
async function watchFiles(){
    browsersync.init({
        server: {
            baseDir: './build/'
        }
    });
    gulp.watch('src/scss/**/*.scss',styles);
    gulp.watch('src/img/**/*.*',compressImgs);
    gulp.watch('src/js/**/*.js',scripts);
    gulp.watch('.*.html').on("change",browsersync.reload);
}

// buidl and reload
async function buildAndReload() {
    await includeHTML();
    browsersync.reload;
}


exports.default = gulp.series(
    includeHTML,gulp.parallel([styles]),compressImgs,scripts,watchFiles,buildAndReload,);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）