本文介绍了JavaScript文件不会在浏览器同步中重新加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
HTML和Sass / CSS文件可以实时重新加载,但JavaScript不会; C
文件夹目标是正确的。这就是我所能说的。
HTML and Sass/CSS files do live reload, but JavaScript doesn't ;Cfolder 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文件不会在浏览器同步中重新加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!