Node.js 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.jsGulp.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