npm 包 broccoli-css-uri-separator 使用教程

前言

在前端开发中，CSS 文件中引用的图片、字体等资源文件通常需要在部署前进行处理，将这些文件放置在统一的目录下，并相应地修改 CSS 文件中引用资源文件的路径，使其指向正确的文件位置。而 broccoli-css-uri-separator 这个 npm 包，提供了一种自动化处理 CSS 文件中路径的方式，可以极大地提高前端开发效率。

安装

使用 npm 安装 broccoli-css-uri-separator：

npm install --save-dev broccoli-css-uri-separator

使用

在项目中新建 Brocfile.js 文件，并在其中使用 require 引入 broccoli-css-uri-separator：

var CSSFilter = require('broccoli-css-uri-separator');

然后，可以通过以下方式来使用 broccoli-css-uri-separator：

var filteredTree = new CSSFilter(inputTree, options);

其中，inputTree 对应输入的目录，options 是一个对象，用来指定操作的参数：

• outputDir: 资源文件输出的目录，默认为 assets；
• absolute: 是否将生成的路径设置为绝对路径（以 / 开头），默认为 false。

例如，在 Brocfile.js 中添加如下代码：

var CSSFilter = require('broccoli-css-uri-separator');
var sourceTree = 'app';

var filteredTree = new CSSFilter(sourceTree, {
  outputDir: 'assets',
  absolute: true
});

可以将 app 目录下的所有 CSS 文件中的路径，修改为相对于 assets 目录的绝对路径，并将相应的资源文件复制到 assets 目录下。

示例代码

以下是一个示例文件夹，包含三个文件：

.
├── app
│   └── style.css
├── Brocfile.js
└── index.html

其中，style.css 中引用了 images 目录下的图片资源文件：

body {
  background: url('../images/bg.jpg');
}

使用 broccoli-css-uri-separator 处理后，style.css 中的路径将被修改为绝对路径，指向 assets 目录下的文件。

body {
  background: url('/assets/images/bg.jpg');
}

结语

broccoli-css-uri-separator 这个 npm 包是一款非常实用的前端开发工具，在处理资源路径方面具有显著的优势。通过合理的使用，可以大大提高前端开发效率，减少手动处理路径带来的负担。

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