手记

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

相信很多初学前端的小伙伴们都遇到过这样的情况,在本地新建了一个html静态页面,然后在浏览器中打开查看。如果在编辑器中对html文件增加或删除了元素,或者是在css文件中修改了某个元素的某个样式,然后想在浏览器中看到效果,通常的步骤是:把窗口切换到浏览器,然后按键盘上的F5刷新页面。在制作页面的时候这个动作可能会重复很多次,我以前也是这样的。有没有觉得这个动作对程序员来说很没有创造力也很重复呢?反正我之前在自己开发项目的时候就不知道按过多少次F5,感觉很浪费时间,最近我接触到了Browsersync这个自动化工具,能够帮你完成这个刷新浏览器的公共,我研究了一下,感觉以后终于能减轻我的左手和F5键的负担了。。

最开始知道页面自动刷新是看到知乎上有人提到grunt这个前端构建工具,grunt watch+livereload的组合可以完成自动刷新的功能,后来看到和grunt类似的gulp,貌似比grunt速度要快,所以决定学gulp,在gulp中文网的技巧部分看到了gulp结合Browsersync的组合也可以实现自动刷新,就知道了Browsersync这个浏览器同步测试工具。

这里记录一下这几天学习Browsersync的成果,希望对一些初学前端需要提升开发体验的同学有帮助。

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的配置页面,里面可以设置一些各个设备和浏览器中事件同步的选项,比如设置页面滚动,点击,表单等事件是否同步等。

上面--files 后的路径是相对于运行该命令的项目(根目录),用来指明要监听的路径和文件(类型),也就是说上面的命令会监听css文件夹下的所有css文件的变化。如果要监听多个类型的文件可用逗号隔开,如"css/*.css, *.html"。如果你的文件层级比较深,可以考虑使用 (表示任意目录)匹配,如`"/*.css, */.html"`表示项目路径下任意目录下任意.css 或 .html文件。

个人认为这种直接在命令行中单独使用Browsersync的方式比较适合页面较少,需要配置的项较少的项目。如果结合gulp来使用Browsersync,能够在gulpfile.js里更方便地配置。

结合gulp使用Browsersync
  1. 全局安装gulp,npm install -g gulp
  2. 在项目根目录下打开命令行窗口,执行npm init,生成package.json文件
  3. 作为项目的开发依赖安装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"
    }
  4. 在项目根目录下新建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的官方文档里有更详细的介绍。

  5. 最后在命令行中执行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. 前端实时可视化开发工具体验——慕课网

本作品采用知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。要查看该许可协议,可访问 http://creativecommons.org/licenses/by-nc-sa/4.0/ 或者写信到 Creative Commons, PO Box 1866, Mountain View, CA 94042, USA。

7人推荐
随时随地看视频
慕课网APP

热门评论

你好,楼主

我有几点不太清楚,还望指点

1、在Express项目的根目录下有一个gulpfile.js文件,我按照你的第一个gulpfile来配置。Express项目里面(内部,我使用express-generate生产的项目目录,多了一级),也就是和view、public同级的的目录用第二个gulp文件配置吗?

2、内部gulp,gulp-nodemon装好之后,我外部可以启用gulp watch服务。内部无法启动express,就是不知道如何用gulp-nodemon启动node.js

你好,我用了你使用的方法 ,但是并没有发现express服务器可以被重启

6666666666666666

查看全部评论