开发者

HTML5 Boilerplate Build script - HTML in subfolders and relative links to CSS/JS problem

开发者 https://www.devze.com 2023-04-08 22:59 出处:网络
My project is using HTML5Boilerplate and contains subdirectories with HTML files that reference /js and css/ in the main root folders.

My project is using HTML5Boilerplate and contains subdirectories with HTML files that reference /js and css/ in the main root folders.

Example: /article/xxx/index.html /article/yyy/index.html

These .html files have relative path href/src to the css/js files in the root folder.

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

I'm trying to have the build script recognise these files in the subdirectories and replace the paths accordingly to the concatenated/minified JS and CSS files and I tried adding this to the file.pages property on project.properties

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

But no dice, the CSS/JS paths get replaced as if the files are in the root folder, like so:

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

Which doesn't work evide开发者_开发知识库ntly. Would be really grateful if anyone knows a workaround/modification for this or if this might just plain be a no-go?

Thanks in advance to any help :D


Maybe you could try to use

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

the glob pattern may comply better with the build script. I just tested this on an empty project, with index.html files under article/fold1/ and article/fold2/, both with the same relative path than yours

I get

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

also, it might save you some headache to update html files under your articles folder, the **/*.html pattern will catch up any html files within these directories.


You need to edit the build.xml script. Around line 630 a regex is used to replace the js and css references to the concatenated versions but it does not take account of subdirectories. I changed the lines there to:

<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>

I imagine the regex can be more efficient.

Simon

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号