Browsersync

概述

Browsersync 是一个允许实时文件观看和浏览器重新加载的工具。它可作为 NPM 包提供 。

安装

要安装 Browsersync，首先需要安装 Node.js 和 NPM。有关更多信息，请参阅有关安装和运行 Node.js 的 SO 文档。

设置项目后，可以使用以下命令安装 Browsersync：

$ npm install browser-sync -D

这将在本地 node_modules 目录中安装 Browsersync 并将其保存到开发人员依赖项中。

如果你想在全局范围内安装它，请使用 -g 标志代替 -D 标志。

Windows 用户

如果你在 Windows 上安装 Browsersync 时遇到问题，则可能需要安装 Visual Studio 才能访问构建工具以安装 Browsersync。然后，你需要指定你正在使用的 Visual Studio 版本，如下所示：

$ npm install browser-sync --msvs_version=2013 -D

此命令指定 Visual Studio 的 2013 版本。

基本用法

要在项目中更改 JavaScript 文件时自动重新加载站点，请使用以下命令：

$ browser-sync start --proxy "myproject.dev" --files "**/*.js"

将 myproject.dev 替换为你用于访问项目的 Web 地址。Browsersync 将输出一个备用地址，可用于通过代理访问你的站点。

高级用法

除了上面描述的命令行界面，Browsersync 还可以与 Grunt.js 和 Gulp.js 一起使用。

Grunt.js

使用 Grunt.js 需要一个可以这样安装的插件：

$ npm install grunt-browser-sync -D

然后你将这条线添加到你的 gruntfile.js：

grunt.loadNpmTasks('grunt-browser-sync');

Gulp.js

Browsersync 作为 CommonJS 模块工作，因此不需要 Gulp.js 插件。只需要这样的模块：

var browserSync = require('browser-sync').create();

你现在可以使用 Browsersync API 根据需要进行配置。

API

可以在此处找到 Browsersync API： https ： //browsersync.io/docs/api