什么是 npm 包？
npm 是 JavaScript 世界的包管理工具，是 Node.js 的包管理器。Node.js 是用来运行 JavaScript 的服务器，而 npm 是管理 Node.js 扩展模块的包管理器。npm 包则是 Node.js 执行环境下的 Javascript 模块。
什么是 grunt-browser-sync？
grunt-browser-sync 是一款自动化前端构建工具，它能够自动刷新浏览器，并且支持多个设备同步刷新。使用 grunt-browser-sync 可以极大的提高前端开发效率。
如何使用 grunt-browser-sync？
1. 安装 Node.js
首先，需要在你的电脑上安装 Node.js，它是 JavaScript 的运行环境以及 npm 的运行环境，安装方法可以参考官方文档进行安装：https://nodejs.org/zh-cn/download/
2. 安装 grunt-cli
在安装 grunt-browser-sync 之前，需要先安装 grunt-cli，就像 npm 一样，在终端中运行以下命令：
npm install -g grunt-cli
3. 创建一个项目
接下来，我们需要在本地创建一个项目并初始化 npm：
mkdir my-project cd my-project npm init
在初始化时可以根据提示操作，也可以直接使用默认值。初始化完成后，会在 my-project 目录下生成一个 package.json 文件，这个文件用来记录我们使用的模块及其相关信息。
4. 安装 grunt-browser-sync
在项目目录下，运行以下命令安装 grunt-browser-sync：
npm install grunt-browser-sync --save-dev
5. 创建 Gruntfile.js
在项目根目录下，我们需要创建一个 Gruntfile.js 文件，这个文件用来定义 grunt 的任务。
-- -------------------- ---- -------
-------------- - -------- ------- -
------------------
------------ -
---- -
-------- -
---- -
------------
---------
---------
-
--
-------- -
---------- -----
------- ----
-
-
-
---
-----------------------------------------
----------------------------- -----------------
--在这个文件中，我们通过 grunt.initConfig 方法来定义 grunt 的任务，这里我们定义了 browserSync 的任务，并且设置了一些配置项。其中 bsFiles 属性用来指定需要同步的文件，options 属性用来设置 browser-sync 的一些额外配置项。最后我们通过 grunt.loadNpmTasks 方法来加载 grunt-browser-sync 模块，通过 grunt.registerTask 方法来注册需要执行的任务。
6. 运行 Gruntfile.js
在终端中，进入项目根目录，运行以下命令：
grunt
然后我们可以在浏览器中打开 http://localhost:3000 来查看效果。如果修改了项目中的文件，grunt-browser-sync 会自动刷新浏览器。
项目示例
下面是一个带有 grunt-browser-sync 的示例项目：
git clone https://github.com/huiiy/Grunt-browser-sync cd Grunt-browser-sync npm install grunt
总结
通过以上步骤，我们可以使用 grunt-browser-sync 极大方面的提高我们前端开发的效率，快速的将修改的内容同步到多个设备上进行预览，可以更快地调试和开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62025