我有这个代码可以通过任何更改重新加载浏览器:
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
我在这里通过 html.js 触发 browserSync:
var gulp = require('gulp');
var browserSync = require('browser-sync');
var fileinclude = require('gulp-file-include');
var rename = require('gulp-rename');
var util = require('gulp-util');
gulp.task('html', function() {
var filename = 'middle.html';
return gulp.src(filename)
.pipe(fileinclude())
.pipe(rename('index.html'))
.pipe(gulp.dest('./'))
.pipe(browserSync.reload({stream:true}));
});
出于某种原因,html.js 似乎可以工作(文件包含、重命名等...已完成),但 browserSync 却不能。我没有收到任何错误消息,但浏览器不会自动重新加载。有什么想法吗?
谢谢!
最佳答案
以下技术对我有用。
用于自动重新加载
- Html您应该使用browserSync.reload
- 对于CSS,请使用browserSync.stream()。
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var browserSync = require('browser-sync').create(); // for live-editing
gulp.task('default', function(){
// Serve files from the root of this project
browserSync.init({
server: "./"
});
gulp.watch('sass/**/*.scss', ['styles']);
//-----***** RELOADING of HTML *****-----
gulp.watch("*.html").on("change", browserSync.reload);
});
gulp.task('styles', function(){
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe( gulp.dest('./css'))
//-----***** RELOADING of CSS *****-----
.pipe(browserSync.stream());
});
关于node.js - 浏览器同步不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27925203/