说说 browsersync-白红宇

相信做过前端开发的人都知道,当你改变前端项目里的文件的时候,为了查看更改之后的效果需要手动的刷新浏览器,其实这个很浪费时间,那么这时候你可以选择用用browser-sync.

browser-sync是一个浏览器同步工具,可以帮你解决在项目开发时,文件保存之后,浏览器同步刷新.

本篇文章主要讲讲在下面几种情况下如何使用browser-sync

命令行

Grunt

Gulp

npm run

nodemon

安装

npm install -g browser-sync

命令行中使用

标准命令如下

browser-sync start [options]

下面说说常用的选项

--files

后面带上相应监听的文件列表,格式例子如下:

--files "js/.js, css/.css"

--files "js/base.js, css/base.css"

--server

表示启动一个内置的web服务器

--proxy

这个一般用在有本地的php,nginx部署的web服务器下,例子如下:

--proxy "localhost:3000"

--proxy "www.cloud.cn"

最后来一个监听本地已有www.c.cn虚拟机的浏览器同步命令

browser-sync start --proxy "www.c.cn" --files "js/.js,css/.css"

Grunt中使用

想要在Grunt里使用则要添加它的插件,官方插件名称为grunt-browser-sync,

npm install grunt-browser-sync --save-dev

运行上面命令之后,就可以在Gruntfile.js里增加配置文件了,下面是它的配置格式

browserSync: {
        dev: {
          bsFiles: {
            src: 'public/**/*.{js,css}'    },    options: {
            proxy: 'localhost:3000'    }  }}

首先定义一个dev目标,然后里面有两固定参数bsFiles和options,前者定义监听的文件列表,这里的文件格式模式比较灵活;后者里面可以定义proxy的值.

然后加载插件任务模块

grunt.loadNpmTasks('grunt-browser-sync');    grunt.registerTask('default', ["browserSync"]);

这个结合watch,compass模块还可以实现修改的时候合并sass到css,然后同步浏览器,更多的例子点击这里,

Glup中使用

跟grunt一样,先安装glup插件browser-sync,然后在Glupfile.js里配置任务

var gulp = require('gulp');var browserSync = require('browser-sync');gulp.task('browser-sync', function () {
        browserSync({
          proxy: 'localhost:3000',    files: ['public/**/*.{js,css}']  });});

选项里一般配置proxy或者files即可,关于glup的详情例子可以看这里,

NPM中使用

这里使用npm run命令运行,相关的配置放在package.json的script属性里,命令如下:

browser-sync start --proxy "www.c.cn" --files "js/.js,css/.css"

nodemon中使用

nodemon是保证使用nodejs作为服务器的时候,代码有变动时可以自动的重启相关的nodejs服务,这里可以结合使用browser-sync来保证静态资源的同步化

先定义一个app.js.

var express = require('express');var browserSync = require('browser-sync');var app = express();var port = process.env.PORT || 3000;app.listen(port, listening);function listening () {
        browserSync({
          proxy: 'localhost:' + port,    files: ['public/**/*.{js,css}']  });}

然后运行下面的命令

nodemon app.js

这样即可以保证服务器代码的变动自动重启,也能保证静态资源的浏览器同步化.

总结

远离低效率,就用browser-sync!!!