關於浏览器无法自动刷新

Question

var gulp =require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

var app={
	srcPath:'src/',
	devPath:'build/',
	prdPath:'dist/',
}

/*第3方依賴需拷貝複製於 src 和 dev 目錄下*/
gulp.task('lib',function(){
	gulp.src('bower_components/**/*.js')
	.pipe(gulp.dest(app.devPath + 'vender'))
	.pipe(gulp.dest(app.prdPath + 'vender'))
	.pipe(browserSync.stream());
	
});

gulp.task('html',function(){
	gulp.src(app.srcPath+ '**/*.html')
	.pipe(gulp.dest(app.devPath))
	.pipe(gulp.dest(app.prdPath))
	.pipe(browserSync.stream());
	
});

gulp.task('json',function(){
	gulp.src(app.srcPath+ 'data/**/*.json')
	.pipe(gulp.dest(app.devPath + 'data'))
	.pipe(gulp.dest(app.prdPath + 'data'))
	.pipe(browserSync.stream());
});

gulp.task('less',function(){
	gulp.src(app.srcPath+ 'style/index.less')
	.pipe($.less())
	.pipe(gulp.dest(app.devPath + 'css'))
	.pipe($.cssmin())
	.pipe(gulp.dest(app.prdPath + 'css'))
	.pipe(browserSync.stream());

});

gulp.task('js',function(){
	gulp.src(app.srcPath+ 'script/**/*.js')
	.pipe($.concat('index.js'))
	.pipe(gulp.dest(app.devPath + 'js'))
	.pipe($.uglify())
	.pipe(gulp.dest(app.prdPath + 'js'))
	.pipe(browserSync.stream());
});



gulp.task('image',function(){
	gulp.src(app.srcPath+ 'image/**/*')
	.pipe(gulp.dest(app.devPath + 'image'))
	.pipe($.imagemin())
	.pipe(gulp.dest(app.prdPath + 'image'))
	.pipe(browserSync.stream());
});

gulp.task('build',['image','js','less','lib','html','json']);

gulp.task('clean',function(){
	gulp.src([app.devPath,app.prdPath])
	.pipe($.clean())
});


gulp.task('serve',['build'],function(){

	browserSync.init({
       	server:  "./build",   
    });

  gulp.watch('bower_components/**/*', ['lib']);
  gulp.watch(app.srcPath + '**/*.html', ['html']);
  gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
  gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
  gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
  gulp.watch(app.srcPath + 'image/**/*', ['image']);
});

gulp.task('default',['serve'])

這是我的gulpfile.js 檔，重新打gulp 時，會刷新。

更改HTML時，也會刷新，

如果只是單獨修改 index.less 也會自動刷新

但只有在改 ，已下這2支檔案時，不會刷新，不懂為何會這樣..老師有解嗎?

@import 'property.less';

@import 'template/head.less';

Answer 1

慕雪1613582 2018-03-09 09:23:44

启动gulp后新增的文件不会触发自动刷新，新增文件后需要重新启动gulp任务。

• 慕容3427403 #1

  browser-sync 引用了也无法浏览器自动刷新修改好的文件效果。奇怪