npm 包 gulp-manifest3 使用教程

前言

作为前端工程师，我们在开发项目中经常需要对静态资源进行版本管理，以便于在项目迭代时能够更好地管理更新版本。而 gulp-manifest3 这个 npm 包就是可以帮助我们自动生成一个文件清单，并且为每个文件生成一个带有哈希值的文件名，以实现版本控制的功能。

安装

使用 npm 进行安装即可：

npm install gulp-manifest3

使用方法

1. 导入 gulp-manifest3 模块，以及 gulp：

const gulp = require('gulp')
const manifest = require('gulp-manifest3')

1. 创建任务，并调用 manifest() 方法指定输出文件名：

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

这里我们将 src 目录下的所有 .js 和 .css 文件打包成一个 JSON 文件，并且输出到 dist 目录下。可以看到，我们在 manifest() 方法中传入了一些选项，其中比较关键的有：

• hash: 是否生成带哈希值的文件名，默认为 true
• preferOnline: 是否优先使用在线资源，默认为 true
• timestamp: 是否在文件名中追加时间戳，默认为 true
• bundleName: 指定输出文件名

还有其他一些选项，可以参考 官方文档。

1. 执行任务：

gulp manifest

示例代码

示例代码可以从我的 github 上获取：

$ git clone https://github.com/ihaiu/gulp-manifest3-tutorial.git

在项目根目录下执行 npm install 安装依赖，并运行 gulp manifest 即可生成文件清单。

总结

gulp-manifest3 只是一个很简单的 npm 包，但却可以帮助我们轻松地实现版本控制，而且不会对我们的代码产生太多侵入性。希望本文能对大家有所帮助。

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