说说 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目标,然后里面有两固定参数bsFilesoptions,前者定义监听的文件列表,这里的文件格式模式比较灵活;后者里面可以定义proxy的值.

然后加载插件任务模块

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

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

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.jsonscript属性里,命令如下:

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!!!

相关参考资料

目录
相关文章
|
安全 数据安全/隐私保护
配置samba的访问密码和用户名
出于安全问题,需要为samba配置密码: $ smbpasswd -a 按提示输入想使用的密码即可 另外 /etc/samba/smb.conf 的 [global] 段必须有: security = user 如此这般,局域网的人访问你的电脑都需要以上命令设置的用户名和密码。
9569 1
|
缓存 Linux 开发工具
CentOS 7- 配置阿里镜像源
阿里镜像官方地址http://mirrors.aliyun.com/ 1、点击官方提供的相应系统的帮助 :2、查看不同版本的系统操作: 下载源1、安装wget yum install -y wget2、下载CentOS 7的repo文件wget -O /etc/yum.
151664 0
|
8月前
|
数据采集 JavaScript 前端开发
对React SSR的理解(Server-Side-Rendering)
对React SSR的理解(Server-Side-Rendering)
vscode设置自动保存步骤
vscode设置自动保存就不用每次要运行时候去先保存一下才能加载新页面了
10460 0
vscode设置自动保存步骤
|
10月前
|
人工智能 小程序 测试技术
自动化测试工具软测界的不二之选,还不快速来了解
自动化测试工具软测界的不二之选,还不快速来了解
140 0
|
11月前
|
XML 设计模式 缓存
优酷折叠屏适配下——从测试的角度思考折叠屏适配问题
优酷折叠屏适配下——从测试的角度思考折叠屏适配问题
289 0
|
11月前
|
API 开发工具 UED
优酷折叠屏适配上——整体思路与实现
优酷折叠屏适配上——整体思路与实现
371 0
|
机器学习/深度学习 人工智能 自然语言处理
如何测试一个 AI 系统?
目前智能系统主要是对 AI 应用最为广泛的四个领域是自然语言处理、图像识别、推荐系统、机器学习这四个方面。每个智能系统都包含了一个及其以上的 AI 模型,那么支撑 AI 模型对外提供服务还需要很多传统组件,例如数据库、Web 容器、交互界面等等。所以非智能系统可能出现的缺陷,在智能系统中都有可能存在,因此我们常规的测试方法、技术、实践还都是适用的。除此之外智能系统与非智能系统相比还有一些其特殊性,所以专门针对智能系统的测试策略、方法和实践也是需要深入研究和探讨的
454 0
如何测试一个 AI 系统?
|
JavaScript 应用服务中间件 Linux
开源项目推荐:C/C++语言版本的http server和client,请关注RESTful
开源项目推荐:C/C++语言版本的http server和client,请关注RESTful
3563 0