Browsersync结合gulp和nodemon实现express全栈自动刷新

Browsersync能让浏览器实时、快速响应你的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。你的任何一次代码保存，以上的设备都会同时显示你的改动”。

Browsersync可以单独使用，也可以集成到gulp和grunt这样的构建工具中使用，在node.js项目中还能结合gulp-nodemon实现全栈的自动刷新，而在移动端设备上同步调试的功能对移动web开发显然是很有帮助的。

单独使用Browsersync

1. Browsersync是基于node.js的，所以要先安装node.js。
2. 全局安装Browsersync， npm install -g browser-sync。
3. 在你项目的根目录下打开命令行，执行
   browser-sync start --server --files "css/*.css"
   这个命令会启动 BrowserSync并监听特定文件，Browsersync将创建并启动一个本地服务器，然后会自动打开你的默认浏览器后访问http://localhost:3000地址。在命令行窗口中，我们可以看到
   
   

• 上面的External项后面的地址可以用来在手机浏览器上访问页面，这样就能和电脑桌面浏览器同步调试了。而UI项后面的地址则可以用来访问Browsersync的配置页面，里面可以设置一些各个设备和浏览器中事件同步的选项，比如设置页面滚动，点击，表单等事件是否同步等。
• 上述情况是用于本地没有搭建服务器的情况，如果本地搭建了服务器，比如设置了vhost local.openadmin.com 指向 C:\wamp\www\openadmin\目录，那么需要在控制台敲入下面的命令：
  browser-sync start --proxy local.openadmin.com --files "style/**"
  即可启动服务
• 在调试之前，我们需要确保测试用的手机和本地开发的机器同处在一个局域网中。

结合gulp使用Browsersync

1. 在项目根目录下打开命令行窗口，执行npm init，生成package.json文件
2. 作为项目的开发依赖安装gulp和Browsersync：
   npm install --save-dev gulp npm install --save-dev browser-sync
   然后package.json中就会出现：

"devDependencies": {
  "browser-sync": "^2.18.1",
  "gulp": "^3.9.1"
}

3. 在项目根目录下新建gulpfile.js,然后在gulpfile.js中定义一个任务，启动Browsersync：

var gulp = require('gulp');
// 调用 .create() 意味着你得到一个唯一的实例并允许您创建多个服务器或代理。
var browserSync = require('browser-sync').create();
// 定义一个任务，任务的名字，该任务所要执行的一些操作
gulp.task('watch', function() {
// 启动Browsersync服务。这将启动一个服务器，代理服务器（proxy）或静态服务器（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",
    // 设置监听时打开的浏览器，下面的设置会同时打开chrome, firefox和IE
    browser: ["chrome", "firefox", "iexplore"],
    // 设置服务器监听的端口号
    port: 8080
  });
});

从上面的示例代码中可以看到，在gulpfile.js里可以很方便地配置监听的文件，浏览器同步选项，监听端口等设置。相关配置项在Browsersync的官方文档里有更详细的介绍。

4. 最后在命令行中执行gulp watch，执行watch任务，就可以启动Browsersync了。这次因为设置了要打开的浏览器为chrome、firefox还有IE，会同时打开三个浏览器。

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，并监听相关文件的变化
   可以通过gulp-nodemon的start事件来触发Browsersync的启动，以基于express框架的项目为例，具体的gulpfile.js如下

var gulp = require('gulp');
// 调用 .create() 意味着你得到一个唯一的实例并允许您创建多个服务器或代理。
var browserSync = require('browser-sync').create();
// 这里reload不加括号，只引用不调用
// var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('server', function() {
    nodemon({
        script: 'app.js',
        // 忽略部分对程序运行无影响的文件的改动，nodemon只监视js文件，可用ext项来扩展别的文件类型
        ignore: ["gulpfile.js", "node_modules/", "public/**/*.*"],
        env: {
            'NODE_ENV': 'development'
        }
    }).on('start', function() {
        browserSync.init({
            proxy: 'http://localhost:3000',
            files: ["public/**/*.*", "views/**", "routes/**"],
            port:8080
        }, function() {
            console.log("browser refreshed.");
        });
    });
});

• 这里Browsersync会用http://localhost:8080来代理nodemon启动的主机地址，这样，无论是views目录下的视图模板文件，还是public目录下的前端css和js文件，亦或是routes目录下的路由控制js文件，只要有改动，Browsersync都能监听到。
• 需要注意的是，如果是修改了服务端的js文件，会先通过nodemon重启应用，这时浏览器不会刷新，要再保存一下修改的文件，Browsersync才会显示出修改后的效果。

总结

现在，前端的自动化和工程化是发展趋势，随着项目的扩大，自动化能极大提高开发体验，Browsersync正是这样一款提升前端开发效率的利器，即使是初学者也应该尽快掌握Browsersync的使用，并应用到自己的项目开发中，帮自己节约时间和精力，以更好更快地完成项目。

---

参考资料

1. Browsersync中文网
2. gulp中文网
3. gulp-nodemon——npm
4. 前端实时可视化开发工具体验——慕课网

---

转载自：

1. 作者： 种子_fe
   链接：http://www.imooc.com/article/14759
2. 作者：卡布其诺猫
   链接：http://www.cnblogs.com/kbqncf/p/4206244.html
3. 动态项目使用browsersync
   链接：http://blog.csdn.net/uikoo9/article/details/72368089?utm_source=itdadao&utm_medium=referral