CODEWITHSUNDEEP
html5boilerplate
wilson.choy
wilson.choy

Reputation: 41

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

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

Upvotes: 1

Views: 1806

Answers (2)

Simon Woodhead
Simon Woodhead

Reputation: 561

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

Upvotes: 1

mickael
mickael

Reputation: 11

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.

Upvotes: 1

Related Questions