简介
metalsmith-picset-generate 是一个 npm 包，它是基于 Metalsmith 构建的一个图片集生成工具。使用该工具可以轻松地将指定目录下的图片按照指定数量生成多个图片集，并生成对应的 HTML 文件。
安装
通过 npm 进行全局安装即可：
npm install -g metalsmith-picset-generate
使用
配置
metalsmith-picset-generate 通过配置文件进行使用，我们可以在配置文件中指定要生成的图片集的相关参数，包括目标目录、图片集大小、图片集数量等。
示例配置文件：
module.exports = {
src: 'src', // 图片所在目录，相对于 metalsmith 内容目录
dest: 'picsets', // 图片集生成目录，相对于 metalsmith 内容目录
size: 5, // 每个图片集的大小
num: 3, // 要生成的图片集数量
pattern: '**/*.jpg' // 匹配的图片类型
};使用 API
在你的项目源码中引用定义的参数，通过如下代码启动 metalsmith-picset-generate：
const Metalsmith = require('metalsmith');
const picset = require('metalsmith-picset-generate');
const config = require('./picsetconfig.js');
Metalsmith(__dirname)
.use(picset(config))
.build();示例
下面是一个完整的示例，我们将从 src/images 目录下的所有图片中生成 3 个每个图片集大小为 5 的图片集，并将它们放置到 picsets 目录中。
目录结构
-- -------------------- ---- ------- ------- --- --- - --- ------ - - --- ------ - - --- ------ - - --- ------ - - --- ------ - - --- ------ - - --- ------ - - --- --- - --- ---------- --- --------------- --- ---
文件代码
配置文件：picsetconfig.js
module.exports = {
src: 'src/images',
dest: 'picsets',
size: 5,
num: 3,
pattern: '**/*.jpg'
};Metalsmith 配置文件：metalsmith.js
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------ - --------------------------------------
----- ------ - -----------------------------
---------------------
--------------------
------------ ------ -- -
-- ----- ----- ----
----------------------- -------- ------------
---运行 Metalsmith：
node metalsmith.js
生成的图片集
-- -------------------- ---- -------
-------
--- ---
- --- ------
- - --- ------
- - --- ------
- - --- ------
- - --- ------
- - --- ------
- - --- ------
- - --- ---
- --- ----------
--- ---------------
--- -------------
--- -------
--- ------
--- ------
--- ------对应每一个 HTML 文件中会包含对应图片集的所有图片。
总结
使用 metalsmith-picset-generate，我们可以方便地将指定目录下的图片按照指定数量生成多个图片集。通过这篇文章的详细介绍，你已经可以开始使用这一 npm 包了，同时我们也应该清楚，如何配置该工具的参数，如何使用 API 等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005540381e8991b448d15e7