npm包@jannis/metalsmith-watch使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

@jannis/metalsmith-watch是一款基于Node.js的自动重载工具，特别适用于前端开发环境。该工具可以在文件修改后自动刷新页面，提高开发效率。

安装

在使用该工具前，需要先安装Metalsmith和@jannis/metalsmith-watch依赖。

在命令行中，执行以下命令：

npm install --save-dev metalsmith @jannis/metalsmith-watch

备注：--save-dev代表将依赖安装在开发环境中。

使用方法

在Metalsmith打包构建脚本中引用@jannis/metalsmith-watch插件，并传入参数。具体使用方式如下：

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

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

参数说明：

paths: 配置监控的文件路径和输出路径，支持模板字符串和Minimatch模式匹配格式。${source}表示源文件路径，${dest}表示输出文件路径，支持任意目录结构。**/*代表通配符，表示监控任意文件的修改。
livereload: 是否启用浏览器自动刷新页面。默认值为true。

示例代码

下面是一个样例代码，以对src目录中所有.md后缀的文件修改进行监控，当文件修改时，自动将Markdown转换为HTML，并刷新浏览器页面：

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

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

深度指导

搭建本地服务器

在使用@jannis/metalsmith-watch之前，需要先搭建好本地服务器环境。一般使用Node.js作为服务器，配合http-server命令行工具可以方便地创建本地服务器。步骤如下：

安装Node.js
全局安装http-server:
```
npm install -g http-server
```
启动本地服务器:
```
http-server -p 8000 -c-1
```

-p 8000: 表示配置端口号为8000。
-c-1: 表示禁用缓存。

监听多个目录

如果需要监听多个目录，可按照以下方法配置paths参数，以同时监听src和assets目录中所有.scss和.js后缀的文件修改：

{
    "${source}/css/**/*.scss": "${dest}/css/*.scss",
    "${source}/js/**/*.js": "${dest}/js/*.js",
    "${source}/assets/**/*.scss": "${dest}/assets/*.scss",
    "${source}/assets/**/*.js": "${dest}/assets/*.js"
}

使用`ignore`忽略监控

如果需要忽略特定文件或目录的监控，可以使用ignore参数。

{
    paths: {
      "${source}/**/*.js": "${dest}/**/*.js",
      "${source}/**/*.css": "${dest}/**/*.css",
      "${source}/**/*.html": "${dest}/**/*.html"
    },
    ignore:['foo.js', '**/foo/*.js']
}

foo.js表示忽略foo.js文件修改监控。
**/foo/*.js表示忽略foo目录下所有.js文件修改监控。

结语

@jannis/metalsmith-watch作为一款自动重载工具，提高了前端开发效率，避免重复手动刷新页面的操作。本文详细介绍了该工具的安装方法、配置方式和示例代码，并给出了深度指导。期望读者能够掌握该工具的使用方法，从而更好地完成前端项目开发。

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

npm包@jannis/metalsmith-watch使用教程

简介

安装