JavaScript文件不会在浏览器同步中重新加载

问题描述：

HTML和Sass / CSS文件可以实时重新加载，但JavaScript不会; C
文件夹目标是正确的。这就是我所能说的。

HTML and Sass/CSS files do live reload, but JavaScript doesn't ;C folder destination is correct. That's pretty much all I can say.

var gulp        = require('gulp'),
    sass        = require('gulp-sass'),
    browserSync = require('browser-sync'),
    concat      = require('gulp-concat'),
    uglify      = require('gulp-uglify');

gulp.task('sass', function() {
    return gulp.src('app/sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({stream: true}))
});

gulp.task('scripts', function() {
    return gulp.src([
        'app/libs/jquery/dist/jquery.min.js',
        'app/libs/slick-carousel/slick/slick.min.js',
        'app/js/common.js'
    ])
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('app/js'))
});

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: 'app'
        }
    });
});

gulp.task('watch', ['browser-sync', 'sass', 'scripts'], function() {
    gulp.watch('app/sass/*.sass', [sass])    
    gulp.watch('app/js/*.js', browserSync.reload)
    gulp.watch('app/index.html', browserSync.reload)
});

答

您的监视任务仅触发'脚本'任务时间。但之后.js文件被监视，但'脚本'没有运行，所以虽然你做了一个browserSync.reload'脚本'不是先运行，所以重装只是重新加载你的main.js文件的旧版本。更改为：

Your watch task only triggers the 'scripts' task one time. But thereafter .js files are watched but 'scripts' is not run so that although you do a browserSync.reload 'scripts' is not run first so reload is just reloading the old version of your main.js file. Change to:

gulp.task('watch', ['browser-sync', 'sass', 'scripts'], function() {
    gulp.watch('app/sass/*.sass', ['sass'])    
    gulp.watch('app/js/*.js', ['scripts'])
    gulp.watch('app/index.html', browserSync.reload)
});

并添加行

.pipe(browserSync.reload({stream: true}))

到'脚本'任务的末尾（就像'sass'任务的结尾一样。

to the end of your 'scripts' task (just like the end of the 'sass' task.

JavaScript文件不会在浏览器同步中重新加载

相关推荐