使用browserSync自动刷新

本篇主要是以 http://www.imooc.com/article/14759 为参考来写的：

已经整理到github上：https://github.com/Macaulish/gulp-BrowserSync-nodemon

1，使用 Browsersync 来进行浏览器同步测试

参考： http://www.browsersync.cn/#install
1)安装NodeJs,
2)安装BrowserSync (npm install -g browser-sync)
3)安装好之后，在控制台中键入：
　　browser-sync start --server --files "css/*.css"（切记是双引号）
这样，当'css/*.css'文件有任何修改，就能看看到浏览器同步变化了。

^^^^^^^^^^以上初级教程，具体看文档http://www.browsersync.cn/docs/api/

2，结合 gulp 使用 Browsersync

参考：http://www.imooc.com/article/14759
1)全局安装gulp (npm install -g gulp);
2)全局安装BrowserSync (npm install -g browser-sync);
3)在项目目录下新建gulpfile.js,然后在gulpfile.js中定义一个任务，启动Browsersync:
    const gulp = require('gulp');
    // 调用.create() 意味着你得到一个唯一的实例并允许您创建多个服务器或者代理。
    const browserSync = require('browser-sync').create();
    // 定义一个服务，任务的名字，该任务所要执行的一些操作
    gulp.task('watch',function(){
	// 启动Browsersync服务。这将启动一个服务器，代理服务器(proxy)or静态服务器(server)
	browserSync.init({
		//设置监听的文件,以gulpfile.js所在的根目录未起点,如果不在根目录要加上路径,单个文件就用字符串,多个文件就用数组
		files:['*.html','css/*.css','js/*.js'],
		// 启动静态服务器,默认监听3000端口,设置启动时打开的index.html的路径
		server:{
			baseDir:'./'
		},
		// 在不同浏览器上镜像点击,滚动和表单,即所有浏览器会同步
		ghostMode:{
			clicks:true,
			scroll:true
		},
		// 更改控制台前缀
		logPrefix:'learning browser-sync in gulp',
		// browser:['chrome','firefox','iexplore'],
		// 设置监听时打开的浏览器,下面的设置会同时打开chrome
		browser:['chrome','iexplore'],
		// 设置服务监听的端口号
		port:8080
	})
    })
4)在命令行中键入 gulp watch,执行任务就OK了。

具体可看：(Browser Reloading) https://www.browsersync.io/docs/gulp/#gulp-reload

其中如果不知道.pipe()是什么请看：（readable.pipe(desination[,options])）https://nodejs.org/api/stream.html#stream_readable_pipe_destination_options

3，Browsersync结合nodemon实现node.js项目全栈刷新

之前一直在自己做一个基于express框架的项目，用到了supervisor这个调试工具，每次服务器端js代码有修改，都会自动重启node.js，但是浏览器并不会自动刷新，我又想到了Browsersync。

要把Browsersync引进来需要一个跟supervisor类似的工具：nodemon.

相比于supervisor,nodemon的优点包括：更轻量级，内存占用更小。使用更加方便，更容易扩展等。

在gulp中可以用gulp-nodemon来实现nodemon的功能，那么我们实现全栈刷新的工作就可以分为两步。

1，用gulp-nodemon启动node.js项目服务器。
2，在node.js项目启动后启动Browsersync，并监听相关文件的变化

>>>>>>>>我按照作者这个方法写过之后发现实现不了，我再找找资料

使用browserSync自动刷新

相关推荐