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