js文件更改时重新加载browsersync

Question

我的 gulpfile.js 有两件事。

1：我想在 js 文件更改时重新加载浏览器。 Sass 和 html 文件可以正常工作，但是当 js 文件更改时，浏览器中没有任何操作。

2：我只是想知道这个话题：我应该为动态 html 文件使用哪些模块。 Pug/jade 或 gulp-inject-partials。

这是我的 gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload(),
    autoprefixer = require('gulp-autoprefixer'),
    browserify = require('gulp-browserify'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    merge = require('merge-stream'),
    newer = require('gulp-newer'),
    imagemin = require('gulp-imagemin'),
    injectPartials = require('gulp-inject-partials'),
    pug = require('gulp-pug');

var sourcePath = {
    sassSource: 'src/scss/*.scss',
    htmlSource: 'src/*.html',
    htmlPartialsSource: 'src/partial/*.html',
    jsSource: 'src/js/**',
    imgSource: 'src/img/**',
    pugSource: 'src/views/*.pug'
}

var appPath = {
    root: 'app/',
    css: 'app/css',
    js: 'app/js',
    img: 'app/img'
}

gulp.task('clean-html', function() {
    return gulp.src(appPath.root + '/*.html', {read: false, force: true})
        .pipe(clean());
});

gulp.task('clean-script', function() {
    return gulp.src(appPath.js + '/*.js', {read: false, force: true})
        .pipe(clean());
});

gulp.task('script', ['clean-script'], function() {
    return gulp.src(sourcePath.jsSource)
        .pipe(concat('main.js'))
        .pipe(browserify())        
        .pipe(gulp.dest(appPath.js))
});

gulp.task('html', function() {
    return gulp.src(sourcePath.htmlSource)
        .pipe(injectPartials())
        .pipe(gulp.dest(appPath.root))
});

gulp.task('sass', function() {
    var bootstrapCSS = gulp.src('./node_modules/bootstrap/dist/css/bootstrap.css'),
        sassFiles;

    sassFiles = gulp.src(sourcePath.sassSource)
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
        return merge(bootstrapCSS, sassFiles)
            .pipe(concat('app.css'))
            .pipe(gulp.dest(appPath.css));
});

gulp.task('images', function() {
    return gulp.src(sourcePath.imgSource)
        .pipe(newer(appPath.img))
        .pipe(imagemin())
        .pipe(gulp.dest(appPath.img));
});

gulp.task('serve', function() {
    browserSync.init([appPath.css + '/*.css', appPath.root + '/*.html', appPath.js + '/*.js'], {
        server:{
            baseDir: appPath.root
        }
    })
});

gulp.task('watch', ['serve', 'sass', 'clean-html', 'script', 'clean-script', 'images', 'html'], function() {
    gulp.watch([sourcePath.sassSource], ['sass']);
    gulp.watch([sourcePath.jsSource], ['script']);
    gulp.watch([sourcePath.imgSource], ['images']);
    gulp.watch([sourcePath.htmlSource, sourcePath.htmlPartialsSource], ['html']);
});

gulp.task('default', ['watch']);

Answer 1

我找到了解决方案。我更改了监视和服务器任务。

gulp.task('watch', function () {
    gulp.watch(sourcePath.sassSource, ['sass']);
    gulp.watch(['src/view/**/*', sourcePath.pugSource], ['view']);
    gulp.watch(sourcePath.jsSource, ['script']);
    gulp.watch(sourcePath.imgSource, ['images']);

    // init server
    browserSync.init({
        server: {
            proxy: "local.build",
            baseDir: appPath.root
        }
    });

    gulp.watch([appPath.root + '**'], browserSync.reload);
});

gulp.task('default', ['watch']);

Answer 2

我能够编辑 gulp.task('serve') 来完成此操作：

var reload = browserSync.reload;
gulp.task('serve', function () {

// Serve files from the root of this project
browserSync.init({
    server: {
        baseDir: "./"
    }
});

gulp.watch("*.html").on("change", reload);
gulp.watch("./_assets/css/*.css").on("change", reload);
gulp.watch("./_assets/js/*.js").on("change", reload);

});