npm 包 wintersmith-livereload 使用教程

介绍

wintersmith-livereload 是一款基于 Node.js 的模板引擎 wintersmith 的插件，可以实现在文件修改时自动刷新浏览器的功能，提高 Web 开发效率。

安装

首先需要全局安装 wintersmith：

$ npm install -g wintersmith

然后在项目目录下安装 wintersmith-livereload：

$ npm install --save-dev wintersmith-livereload

配置

在 wintersmith 的配置文件 config.json 中添加 wintersmith-livereload 作为插件：

{
  "locals": {
    "title": "My Site"
  },
  "plugins": [
    "./node_modules/wintersmith-livereload"
  ]
}

使用

启动 wintersmith

进入项目目录，启动 wintersmith：

$ wintersmith preview

打开浏览器

访问 http://localhost:8080 并打开浏览器控制台，可以看到控制台输出 LiveReload enabled，表示 wintersmith-livereload 已经成功启动。

修改文件

修改任一文件，比如 index.html，可以看到浏览器自动刷新并显示最新内容。

示例代码

修改 config.json 的 plugins 配置：

{
  "locals": {
    "title": "My Site"
  },
  "plugins": [
    "./node_modules/wintersmith-livereload"
  ]
}

启动 wintersmith：

$ wintersmith preview

在浏览器中访问 http://localhost:8080。

修改 src/index.html 文件：

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    ------------------------
  -------
  ------
    ---------- -----------
  -------
-------

可以看到浏览器自动刷新并显示最新内容。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710f8dd3466f61ffe26d