使用browserSync不起作用的解决办法

记录一下使用browserSync所踩的坑。。

全局安装browserSync

npm install -g browser-sync

局部安装browserSync

npm install browser-sync --save-dev

1.静态服务器

运行命令

browser-sync start --server "D:/phpstudy/PHPTutorial/WWW" --files "**"

注：

--server 后面带绝对路径地址，相对路径找不到文件。

--files 必须带上，不带上修改文件不会刷新

browsersync + gulp.js

gulp.task('run', function() {
    browserSync.init({
        server: {
            baseDir: "D:/phpstudy/PHPTutorial/WWW"
        },
		files:['**'],
		notify: false,      //禁用浏览器的通知元素
		port:3002
    });
});

注：

baseDir 后面带绝对路径地址，相对路径找不到文件。

files 必须带上，不带上修改文件不会刷新

2.代理服务器
运行命令

browser-sync start --proxy "localhost:3000" --files "**"

注：

--proxy 地址写上端口号，如果默认80那就不需要写.

--files 必须带上，不带上修改文件不会刷新

browsersync + gulp.js

gulp.task('start', function() {
	browserSync.init({
		proxy: 'http://localhost:3000',
		files: ['**'],
		port: 3001,
		notify: false,      //禁用浏览器的通知元素
		browser: "chrome"
	});
});

注：

proxy 地址写上端口号，如果默认80那就不需要写.

files 必须带上，不带上修改文件不会刷新