共计 4226 个字符，预计需要花费 11 分钟才能阅读完成。
方法一
使用 Google Chrome DevTools
方法二
工作区 Browsersync
安装 Node.js
BrowserSync 是基于 Node.js 的, 是一个 Node 模块，如果您想要快速使用它，也许您需要先安装一下 Node.js 安装适用于 Mac OS，Windows 和 Linux。
安装 BrowserSync 您可以选择从 Node.js 的包管理（NPM）库中 安装 BrowserSync。打开一个终端窗口，运行以下命令：npm install -g browser-sync 您告诉包管理器下载 BrowserSync 文件，并在全局下安装它们，您可以在所有项目 (任何目录) 中使用。当然您也可以结合 gulpjs 或 gruntjs 构建工具来使用，在您需要构建的项目里运行下面的命令:
npm install –save-dev browser-sync
启动 BrowserSync
一个基本用途是，如果您只希望在对某个 css 文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具，进入到该项目（目录）下，并运行相应的命令：静态网站如果您想要监听.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”
// 监听 css 文件 browser-sync start –server –files “css/*.css”// 监听 css 和 html 文件 browser-sync start –server –files “css/.css, .html” 动态网站如果您已经有其他本地服务器环境 PHP 或类似的，您需要使用代理模式。BrowserSync 将通过代理 URL(localhost:3000)来查看您的网站。
// 主机名可以是 ip 或域名 browser-sync start –proxy “ 主机名 ” “css/*.css” 在本地创建了一个 PHP 服务器环境，并通过绑定 Browsersync.cn 来访问本地服务器，使用以下命令方式，Browsersync 将提供一个新的地址 localhost:3000 来访问 Browsersync.cn，并监听其 css 目录下的所有 css 文件。browser-sync start –proxy “Browsersync.cn” “css/*.css”
Browsersync + Gulp.js
Browsersync + Gulp.js 当您在使用 gulp 构建您的项目时，您只需要 require Browsersync 模块, 利用 API 并进行 选项配置。以下是一些流行项目中常见的用例，如 谷歌的网络入门套件 和其他项目。安装 ^ TOP 首先，您需要安装 Browsersync 和 依赖包 Gulp。如果你是第一次安装，那么你可以通过 –save-dev 命令，这将会自动在你的 package.json 里添加依赖，下一次再安装时，你只需要 npm install$ npm install browser-sync gulp –save-dev 然后，在您的 gulpfile.js 文件里使用它们。
var gulp = require(‘gulp’);var browserSync = require(‘browser-sync’).create();
// 静态服务器 gulp.task(‘browser-sync’, function() {browserSync.init({server: {baseDir: “./”}});});
// 代理
gulp.task(‘browser-sync’, function() {browserSync.init({proxy: “ 你的域名或 IP”});});SASS + CSS 注入 ^ TOP 通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用 reload，所有的浏览器将被告知的变化并实时更新. 因为 Browsersync 只在乎您的 CSS 在编译完成 finished 后 – 注意：gulp.dest 后调用重载。
var gulp = require(‘gulp’);var browserSync = require(‘browser-sync’).create();var sass = require(‘gulp-sass’);var reload = browserSync.reload;
// 静态服务器 + 监听 scss/html 文件 gulp.task(‘serve’, [‘sass’], function() {
browserSync.init({server: “./app”});
gulp.watch(“app/scss/*.scss”, [‘sass’]);gulp.watch(“app/*.html”).on(‘change’, reload);});
// scss 编译后的 css 将注入到浏览器里实现更新 gulp.task(‘sass’, function() {return gulp.src(“app/scss/*.scss”).pipe(sass()).pipe(gulp.dest(“app/css”)).pipe(reload({stream: true}));});
gulp.task(‘default’, [‘serve’]);SASS & Source Maps^ TOP 如果您使用 gulp-ruby-sass 与 sourcemap: true 选项, 将会生成.map 文件. 这些文件最终会被送到下游，在 browserSync.reload() 时接收它们, 它会尝试重新加载页面 (因为它不会在 DOM 里发现在任何 .map 文件)。要解决这个问题, 您可以使用 gulp-filter 包，以确保只有 *.css 文件响应 .reload – 这样一来，您还是会得到 CSS 注入，而不是整个页面重载。
var gulp = require(“gulp”);var sass = require(“gulp-ruby-sass”);var filter = require(‘gulp-filter’);var browserSync = require(“browser-sync”).create();
// 静态服务器 + 监听 scss/html 文件 gulp.task(‘serve’, [‘sass’], function() {
browserSync.init({server: “./app”});
gulp.watch(“app/scss/*.scss”, [‘sass’]);gulp.watch(“app/*.html”).on(‘change’, reload);});
gulp.task(‘sass’, function () {return gulp.src(‘scss/*/.scss’).pipe(sass({sourcemap: true})).pipe(gulp.dest(‘css’))// Write the CSS & Source maps.pipe(filter(‘*/.css’)) // Filtering stream to only css files.pipe(browserSync.reload({stream:true}));}); 浏览器重载 ^ TOP 有时候，您可能只是想完全重新加载页面 (例如，处理一堆 JS 文件后), 但您希望在任务发生后重载。这将在 gulp 4.x.x 时变得更容易, 但现在您可以做到以下几点：(确保您 return 从您的工作流，以确保 browserSync.reload() 被调用在正确的时间。
// 处理完 JS 文件后返回流 gulp.task(‘js’, function () {return gulp.src(‘js/*js’).pipe(browserify()).pipe(uglify()).pipe(gulp.dest(‘dist/js’));});
// 创建一个任务确保 JS 任务完成之前能够继续响应 // 浏览器重载 gulp.task(‘js-watch’, [‘js’], browserSync.reload);
// 使用默认任务启动 Browsersync，监听 JS 文件 gulp.task(‘serve’, [‘js’], function () {
// 从这个项目的根目录启动服务器 browserSync({server: {baseDir: “./”}});
// 添加 browserSync.reload 到任务队列里 // 所有的浏览器重载后任务完成。gulp.watch(“js/*.js”, [‘js-watch’]);}); 手动重载 ^ TOP 如果流支持并不满足您的需求，您可以通过创建一个任务来手动触发重载方法。我们创建了一个 sass 任务, 在我们修改文件后会在浏览器里注入 CSS，但是当 HTML 文件被更改时，浏览器将会被重新加载（手动重载）。
// 使用变量引用 reload 方法 var reload = browserSync.reload;
// 编译 SASS & 自动注入到浏览器 gulp.task(‘sass’, function () {return gulp.src(‘scss/styles.scss’).pipe(sass({includePaths: [‘scss’]})).pipe(gulp.dest(‘css’)).pipe(reload({stream:true}));});
// 监听 scss 和 html 文件, 当文件发生变化后做些什么！gulp.task(‘serve’, [‘sass’], function () {
// 从这个项目的根目录启动服务器 browserSync({server: {baseDir: “./”}});
gulp.watch(“scss/*.scss”, [‘sass’]);gulp.watch(“*.html”).on(“change”, browserSync.reload);});
