在平时开发时,我用过很多gulp的自动刷新工具,昨天试了下browser-sync这款插件,感觉确实不错,分享给大家。gulp和browser-sync的安装就不多介绍了,下面给出命令$ cnpm i
在平时开发时,我用过很多gulp的自动刷新工具,昨天试了下browser-sync这款插件,感觉确实不错,分享给大家。
gulp和browser-sync的安装就不多介绍了,下面给出命令
$ cnpm install --save-dev gulp browser-sync
将下面的文件写入gulpfile.js
文件
'use strict';// 先引入依赖模块var gulp = require("gulp"), browserSync = require("browser-sync");// 自动刷新 browser-sync startgulp.task('browser',function(){ browserSync({ // host: 172.16.157.1, port: 3000, open: true, // 路径显示/src开始 startPath: "/src", //timestamps:false, server: { directory: true, routes: { '/src': "./src/index.html" }, middleware: function(req,res,next){ console.log("中间件"); next(); }, baseDir: './' }, // 指定浏览器 // browser: "google chrome" // 或 ["google chrome","firefox"] // 延迟刷新,默认0 reloadDelay: 1, // 是否载入css修改,默认true injectChanges: false });});gulp.task('bro',function(){ gulp.src('./src/**') .pipe(browserSync.reload({stream:true}));});gulp.task('default',['bro','browser'],function(){ gulp.watch('./src/**',['bro']);});// 自动刷新 browser-sync end