Question

我的项目正在使用HTML5Boilerplate，并包含带有HTML文件的子目录，这些文件引用主根文件夹中的/ js和css /。

实施例： /article/xxx/index.html /article/yyy/index.html

这些.html文件具有相对路径href / src到根文件夹中的css / js文件。

<link rel="stylesheet" href="../../css/style.css" />
<script src="../../js/plugins.js"></script>
<script src="../../js/script.js"></script>

我正在尝试让构建脚本识别子目录中的这些文件，并相应地将路径替换为连接/缩小的JS和CSS文件，我尝试将其添加到project.properties上的file.pages属性

file.pages =  index.html, article/xxx/*.html, article/xxx/*.html

但没有骰子，CSS / JS路径被替换，好像文件在根文件夹中一样，如下所示：

<link rel=stylesheet href='css/7d3586f292b65c896ef495e2e8ef042901d7c2e2.css'>

显然不起作用。如果有人知道对此进行解决方法/修改，或者这可能只是一个禁忌，真的很感激吗？

提前感谢任何帮助：D

Answer 1

也许你可以尝试使用

file.pages =  index.html, article/**/*.html

glob模式可能更符合构建脚本。我刚刚在一个空项目上对此进行了测试，其中index.html文件位于article/fold1/和article/fold2/下，两者的相对路径都与您的相同

我得到了

<link rel=stylesheet href='../../css/b218ab4.css'>

另外，更新你文章文件夹下的html文件可能会让你头疼，**/*.html模式会赶上这些目录中的任何html文件。

Answer 2

您需要编辑build.xml脚本。在第630行附近，正则表达式用于替换对连接版本的js和css引用，但它没有考虑子目录。我把那里的线改为：

<echo message="Update the HTML to reference our concatenated script file: ${scripts.js}"/>
<!-- style.css replacement handled as a replacetoken above -->
<replaceregexp match="&lt;!-- scripts concatenated [\d\w\s\W]*?src=&quot;([\d\w\s\W]*?)js/[\d\w\s\W]*?!-- end ((scripts)|(concatenated and minified scripts))--&gt;" replace="&lt;script defer src='\1${scripts.js}\'&gt;&lt;/script&gt;" flags="m">
  <fileset dir="${dir.intermediate}" includes="${page-files}"/>
</replaceregexp>
<!--[! use comments like this one to avoid having them get minified -->

<echo message="Updating the HTML with the new css filename: ${style.css}"/>

<replaceregexp match="&lt;!-- CSS concatenated [\d\w\s\W]*?href=&quot;([\d\w\s\W]*?)css/[\d\w\s\W]*?!-- end CSS--&gt;" replace="&lt;link rel='stylesheet' href='\1${style.css}'&gt;" flags="m">
  <fileset dir="${dir.intermediate}" includes="${page-files}"/>
</replaceregexp>

我认为正则表达式可以更有效率。

西蒙

HTML5 Boilerplate构建脚本 - 子文件夹中的HTML和CSS / JS问题的相对链接

2 个答案: