在前端开发中，我们经常需要使用 gulp 构建工具来完成一些任务，比如压缩、合并、重新命名等操作。gulp 提供了很多插件来帮助我们完成这些任务，其中一个比较实用的插件就是 gulp-css-url-assets-rewrite。它可以帮助我们重写 CSS 文件中的 url，让我们更方便地管理资源文件。
安装
首先，你需要确保你的电脑上已经安装了 Node.js 和 gulp。
然后，在你的项目根目录下运行以下命令来安装 gulp-css-url-assets-rewrite：
npm install gulp-css-url-assets-rewrite --save-dev
使用
安装完成后，在你的 gulpfile.js 文件中引入 gulp-css-url-assets-rewrite：
const urlRewrite = require('gulp-css-url-assets-rewrite');然后，使用 gulp.src() 方法选中要处理的文件，把它们传给 urlRewrite() 方法：
gulp.src('src/css/*.css')
.pipe(urlRewrite({
assetsPath: '../images', // 资源文件相对于 CSS 文件的路径
prefix: '/cdn/', // CDn 前缀
}))
.pipe(gulp.dest('dist/css/'));参数说明
gulp-css-url-assets-rewrite 提供了以下可选参数：
assetsPath: (String) 资源文件相对于 CSS 文件的路径，默认值为 '../'。prefix: (String) CDN 前缀，默认值为空。suffix: (String) CDN 后缀，默认值为空。verbose: (Boolean) 是否打印详细日志信息，默认值为 false。
示例
下面是一个完整的 gulpfile.js 文件的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------- - ---------------------------------------
---------------- -------- -- -
------ -------------------------
------------------
----------- ------------
------- --------
------- --------------
-------- -----
---
------------------------------
---
-------------------- --------------------总结
gulp-css-url-assets-rewrite 可以很方便地帮助我们重写 CSS 文件中的 url，让我们更好地管理资源文件。在实际项目中，我们可以结合 CDN 缓存、版本控制等策略，让 Web 站点更加高效、稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e355a