在前端开发中，使用图片和其他资源是非常常见的，我们需要通过引入图片、音频、视频等资源来实现页面的美化和增加功能。然而，在引入这些资源的过程中，也面临一些挑战，如资源管理、缩放、压缩等等。为了更加高效地管理资源，我们可以使用 postcss-assetus 这个 npm 包来自动化这些任务。在本篇文章中，我们将详细介绍如何使用 postcss-assetus。

安装

使用 npm 安装 postcss-assetus ：

npm install postcss-assetus --save-dev

使用

配置 postcss.config.js

配置 postcss.config.js 文件，使用 postcss-assetus。

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

编写 CSS 代码

在 CSS 代码中引用资源时，可使用 $assets() 函数来引用资源：

.some-class {
  background-image: url($assets("./images/background.png"));
}

参数说明

下面是 postcss-assetus 支持的参数及其说明。

basePath

basePath 是作为相对路径计算的基础路径。

assetsPath

assetsPath 是存放所有资源的路径。postcss-assetus 会遍历该目录下的所有文件，根据文件类型决定如何处理。

relative

relative 决定是否要使用相对路径。当值为 true 时，使用相对路径，而默认值为 false。

cachebuster

cachebuster 决定是否在文件名中包含摘要，以在文件内容发生更改时使缓存失效。

cachebusterMode

cachebusterMode 决定如何使用缓存摘要。有两种模式：

• querystring：在查找字符串中添加一个参数以标记缓存版本。
• filename：在文件名中添加一个参数以标识缓存版本。

示例代码

在下面的代码中，我们将使用 postcss-assetus 优化图片资源：

npm install -g parcel-bundler
mkdir my-app
cd my-app
yarn init -y
yarn add postcss@latest cssnano@latest parcel-bundler@latest
yarn add postcss-assetus --dev
touch index.html style.css postcss.config.js
mkdir images

在 index.html 文件中添加以下代码：

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

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

在 style.css 文件中添加以下代码：

.logo {
  width: 200px;
  height: 200px;
  background-image: url($assets("./images/logo.png"));
}

在 postcss.config.js 文件中添加以下代码：

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

将 logo.png 图片文件放到 images 目录中后，运行以下命令：

parcel index.html

然后在浏览器中打开 http://localhost:1234/ 就可以看到效果了。

总结

上面我们介绍了 postcss-assetus 的安装和使用，希望这篇文章能给你带来一些启发。使用 postcss-assetus 可以非常方便地管理资源，让我们的前端开发更加高效、方便。

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