Node.js Browsersync,完成前可大口刷新
我是gulp中的browsersync,设置如下。问题是,当代码更改时,browsersync会识别并刷新页面。但是,它不会等待脚本文件位于Node.js Browsersync,完成前可大口刷新,node.js,gulp,browser-sync,Node.js,Gulp,Browser Sync,我是gulp中的browsersync,设置如下。问题是,当代码更改时,browsersync会识别并刷新页面。但是,它不会等待脚本文件位于gulp.dest中,因此通常它会自动刷新,无法找到脚本文件,然后再次刷新,它就在那里 是否有办法确保它将等待任务完全完成 var browserSync = require('browser-sync').create(); gulp.task('cleanScripts', function () { return gulp.src('./asse
gulp.dest
中,因此通常它会自动刷新,无法找到脚本文件,然后再次刷新,它就在那里
是否有办法确保它将等待任务完全完成
var browserSync = require('browser-sync').create();
gulp.task('cleanScripts', function () {
return gulp.src('./assets/js', {read: false})
.pipe(clean());
});
gulp.task('scripts', ['cleanScripts'], function() {
return browserify('./client/js/main.js')
.bundle()
.on('error', function (e) {
gutil.log(e);
})
.pipe(source('main-' + packageJson.version + '.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('./assets/js'));
});
//Watch our changes
gulp.task('watch', function () {
browserSync.init({
proxy: "localhost:3000"
});
gulp.watch(['./client/js/**/*.js', ['scripts']).on('change', browserSync.reload);
});
您可以尝试简单的方法,否则可能需要超时:
gulp.task('watch', function () {
watch(['./client/js/**/*.js'], function () {
gulp.start('scripts');
});
});
并将browserSync.reload放在脚本管道的末尾:
.pipe(browserSync.reload);
如果不工作,请尝试超时并使用times,但如果您确实需要快速开发和编译,这不是一个合适的解决方案:
gulp.task('watch', function () {
watch(['./client/js/**/*.js'], function () {
gulp.start('scripts');
setTimeout(function(){
browserSync.reload;
}, 1000); //1 second
});
});
在这种情况下,不需要在脚本管道的末尾重新加载 BrowserSync具有可在gulpfile.js上设置的选项 在文件更改事件后指示浏览器重新加载/插入之前等待的时间(以毫秒为单位) 我用的是Gulp4 这就是解决方案
gulp.task('watch', gulp.series('some-task-name', function () {
browserSync.init({
server: {
baseDir: config.distFolder + ''
}
});
var watcher = gulp.watch([
'./src/views/*.html',
'./src/index.html',
'./src/assets/css/*.css',
'./src/**/*.js'],
gulp.series('some-task-name'));
watcher.on('change', async function (path, stats) {
console.log('you changed the code');
browserSync.notify("Compiling, please wait!");
browserSync.reload();
})
}));
现在,每当我的代码发生变化时,就会执行我的“某个任务名称”,然后重新加载浏览器页面。我根本不需要延迟浏览器同步
这是我在package.json文件中的开发依赖项
"devDependencies": {
"browser-sync": "^2.26.7",
"connect-modrewrite": "^0.10.2",
"del": "^2.2.0",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.0",
"gulp-rev": "^7.0.0",
"gulp-rev-replace": "^0.4.4"
}
下面是一个简单的基于任务的Gulp4解决方案。它将重新加载转换为一个串联完成的任务,而不是在更改事件时触发它
const gulp = require("gulp");
const browserSync = require("browser-sync");
// create a reload task
gulp.task("reload", (cb) => {
browserSync.reload()
cb()
})
gulp.task('watch', () => {
// when the js changes, process the scripts, then reload
gulp.watch('./client/js/**/*.js', gulp.series('scripts', "reload"));
});
// run the watch task before setting up browserSync
gulp.task("browser-sync", gulp.series("watch", () => browserSync({proxy:"localhost:3000"})));
const gulp = require("gulp");
const browserSync = require("browser-sync");
// create a reload task
gulp.task("reload", (cb) => {
browserSync.reload()
cb()
})
gulp.task('watch', () => {
// when the js changes, process the scripts, then reload
gulp.watch('./client/js/**/*.js', gulp.series('scripts', "reload"));
});
// run the watch task before setting up browserSync
gulp.task("browser-sync", gulp.series("watch", () => browserSync({proxy:"localhost:3000"})));