browsersync-前后端开发利器
今天分享一个对于开发人员便于开发的开发利器-browsersync
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。
1.安装
全局安装:
npm install -g browser-sync
局部安装:
npm install --save-dev browser-sync
2. 启动 BrowserSync
一个基本用途是,如果您只希望在对某个css
文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:
1.静态网站
如果您想要监听.css
文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css"
如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个.html
文件
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"
监视全部:
browser-sync start --server "端口" --files "**"
Tip:
–files 必须带上,不带上修改文件不会刷新
browsersync + gulp.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
port:8080,
files: "**",
notify: false, //禁用浏览器的通知元素
server: {
baseDir: "./"
}
});
});
gulp.task('default', ["browser-sync"]);
这时候运行gulp将等同于前文的browser-sync start –server –files “**“。更多的用法示例请查看gulp-browser-sync
Tip:
files 必须带上,不带上修改文件不会刷新
2.动态网站-代理服务器
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
// 监视全部
browser-sync start --proxy "主机名" --files "**"
注:
–proxy 地址写上端口号,如果默认80那就不需要写.
–files 必须带上,不带上修改文件不会刷新
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('start', function() {
browserSync({
proxy: 'http://localhost:8080',
files: ['**'],
port: 3001,
notify: false, //禁用浏览器的通知元素
browser: "chrome"
});
});
gulp.task('default', ["browser-sync"]);
官方建议:
我们建议您结合gulp或grunt来使用,我们这里有详细说明Gulp文档、Grunt文档。如果您还没有使用gulp或grunt,那么可以通过以上方式创建Browsersync