Gulp次要资产

Question

我使用 Gulp 将所有的 JS 和 CSS 编译成组合文件，并输出到 /public/assets/js/application.js 或 /public/assets/js/application.css。虽然这很好，但像链接到 CSS 背景图像等的 URL 路径现在不再起作用了。

由于这些链接的资源位于我的 /vendor/assets/bower-components 目录中，我不能只重写路径，因为 /vendor 不可访问。我想要做的是浏览编译后的 CSS 和 JS 文件，找到所有链接的资产引用，获取它们并放置在 /public/assets/<filetype-here> 中，然后重新编写路径以指向新位置。

我需要一种方法来查找（主要是 CSS，但也可能是 JS）中的所有引用。获取该文件并检查其文件类型，将其放在 /public/assets<filetype-here> 文件夹中并重写原始文件路径。

您会如何处理这个问题？我知道我可以使用像 gulp-repace 等插件，但不确定如何执行“找到被发现的东西，获取那个文件并对其进行操作”的操作。如果能提供一个示例将非常非常有帮助。

谢谢

- rctneil

---

我可能有一些东西适合你，你的 bower-components 里有什么？你觉得图片的结构应该是怎样的呢？ - Dejan.S

为什么不把你的资产文件放到供应商目录之外并且能够在Web上访问，而不是那些难以理解的代码。 - Utkarsh Vishnoi

Answer 1

我本来想建议你自己做，但后来发现了gulp-bower-fix-css-path。

显然，这是一个（还不太流行的）工具，可能适合你的项目需求：

gulp-bower-fix-css-path

该模块可以从bower-installer中修复（重新组织）CSS资源路径。指定public/vendor的绝对路径文件夹，并修复所有路径（如字体、图像、SVG）

^{小型工具模块与bower（bower-installer）结合使用。修复您的项目依赖的所有不同存储库中的所有css路径（如字体/图像等资产）}

也就是说，我建议你尝试使用该库并根据需要进行自定义，然后再提交拉取请求。否则，你将需要从头开始实现所有这些内容。

- falsarella

---

这看起来非常完美。我今晚会更深入地研究一下，并在接下来的几天内报告结果！ - rctneil

还有 gulp-rev-replace。 - Andre Figueiredo

@AndreFigueiredo 很好 :) 尽管 gulp-rev-replace 在大多数情况下非常有用且更受欢迎，但它只替换url路径，专注于替换链接到修订依赖项 - 请注意，它不会将指定依赖项中使用的资产移动到某个目标目录并重写其链接以适应OP所需。 - falsarella