javascript - Gulp 二级 Assets

标签 javascript css gulp bower assets

我让 Gulp 将我所有的 JS 和 CSS 编译成组合文件并输出到 /public/assets/js/application.js/public/assets/js/application.css

这一切都很好,但是诸如 CSS 背景图像等链接文件的 URL 路径之类的东西现在不再有效。

因为这些链接 Assets 在我的 /vendor/assets/bower-components 中目录,我不能只将路径重写为 /vendor无法通过网络访问。我想做的是浏览 CSS 和 JS 编译文件,找到所有链接的 Assets 引用,去抓取它们并将它们放在 /public/assets/<filetype-here> 中。

然后重写到新位置的路径。

我需要的是一种在(主要是 CSS)但也可以是 JS 中找到所有引用的方法。捕获那个文件,检查它是什么文件类型,把它放在 /public/assets<filetype-here> 中文件夹并重写原始文件路径。

你会怎么做?我意识到我可以使用 gulp-repace 等插件,但不确定如何做 “找到这个东西,然后去获取那个文件并用它做一些事情” 之类的事情。

一个例子会非常有帮助。

谢谢

最佳答案

我正要建议你自己做,但后来我发现了 gulp-bower-fix-css-path

显然,它是一个可能适合您的元素需求的(尚未流行的)工具:

gulp-bower-fix-css-path

This module fix (re-organize) the css assets path from bower-installer. Specify the absolute path folder to public/vendor and fix all path like (fonts, imgs, svgs)

Small tool module to use combining with bower (bower-installer). Fix all css path (assets like fonts/images) in all diferent repositories that your project depends

也就是说,我建议您尝试使用该库并在必要时对其进行自定义,然后再发出拉取请求。否则,您需要从头开始实现所有这些。

关于javascript - Gulp 二级 Assets ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41415439/

相关文章:

javascript - $scope 在 View 中未定义,但在 Controller 中未定义

html - 如何在css和html中左右设置一个div?

angularjs - 从我的 node_modules 文件夹转换 AngularJS 的正确方法

javascript - 我可以从 ServiceWorker 中的外部 JS 文件调用方法吗?

javascript - 使用 Gulp 与基于 Airbnb 的 ESLint

php - Ajax 发布在 asp 中失败

C# 在浏览器中从选项卡中读取文本或源代码 - 需要一个想法

javascript - 从 Jquery 数据表中隐藏 LengthMenu

html - 如何动态更改 CSS 中的背景高度?

css - 用透明颜色覆盖div或图像