gulp自动刷新的插件很多,但是感觉最好用的还是 browser-sync 插件。如果不想用命令行,也可以使用 browser-sync界面工具
先安装 browser-sync 插件:
npm install browser-sync --save-dev
安装 browser-sync 插件可能遇到的问题 http://www.cnblogs.com/ayseeing/p/4201202.html
gulpfile.js文件代码如下:
// 先引入依赖模块
var gulp = require("gulp"),
browserSync = require("browser-sync");
// 自动刷新 browser-sync start
gulp.task('browser',function(){
browserSync({
// host: 172.16.157.1,
port: 8082,
open: true,
// 路径显示/d 开始
startPath: "/d",
//timestamps:false,
server: {
directory: true,
routes: {
'/d': "./dist/new.html"
},
middleware: function(req,res,next){
console.log("中间件");
next();
},
baseDir: './'
},
// 指定浏览器
// browser: "google chrome" // 或 ["google chrome","firefox"]
// 延迟刷新,默认0
reloadDelay: 1000,
// 是否载入css修改,默认true
injectChanges: false
});
});
gulp.task('bro',function(){
gulp.src('./dist/**')
.pipe(browserSync.reload({stream:true}));
});
gulp.task('default',['bro','browser'],function(){
gulp.watch('./dist/**',['bro']);
});
// 自动刷新 browser-sync end