html5 boilerplate build Woes

On Friday I spent a few hours trying to debug doing a build on my current project using the html5 boilerplate build script (ant based).  Didn't happen.

Spent a couple more hours on Monday modifying my project to mirror the configuration for asset directories that the build script uses as its defaults, such as "js" for the scripts directory, where before I was using "javascripts" based on the html5 boilerplate template that I installed with (I forget which) Scout or compass.app.  Thought it would build after changing to the structure it expects / expected.  Didn't happen.

Well, the woes seem to be caused by changes to the default structure that have happened at the same time as the splitting of the build script out into it's own project / repository.

Today I put a little bit more time into the build and got it working by removing my exclusions from the project.properties file and adding the slug.libs property in.

So that's the deal ... if you're going to use something other than "vendors" as your libs directory, you *must* specify not only the dir.js.libs property but the slug.libs property.

Here are the settings I have in my project properties, which seem to match the html5 boilerplate template:

dir.source = ./public
file.stylesheets  = 
dir.js = js
dir.js.main = ${dir.js}
dir.js.libs = ${dir.js}/libs
slug.libs = libs
dir.js.modules = ${dir.js}/modules
dir.css = css
dir.images = img
file.root.stylesheet = style.css
file.root.script = script.js

Good luck with your html5 boilerplate project!

UPDATE:

I also had issues with the error "js/modules/_all.js was specified as an input resource."
I could get past the error by doing an "ant clean" before the "ant build", but obviously the error means there's a problem.

To get past it, modify your build.xml around line 486 to fix the module concatenation which is used to create a checksum, as follows, adding an exclusion for _all.js.

<concat destfile="./${dir.intermediate}/${dir.js.modules}/_all.js" overwrite="no">
    <fileset dir="./${dir.intermediate}/${dir.js.modules}/">
        <include name="*.js">
        <exclude name="_all.js">
    </exclude></include></fileset>
</concat>

UPDATE the Second:

Subdirectories of /libs are not being copied.  :/  This might help ... testing it now...

<copy todir="${dir.publish}/${dir.js}">
  <fileset
        dir="${dir.intermediate}/${dir.js}"
        includes="${file.js.bypass}, ${slug.libs}/*/**, ${slug.modules}/*/**">
        <exclude name="scripts-concat.js"/>
        <exclude name="scripts-concat.min.js"/>
        <exclude name="otherscripts-concat.js"/>
        <exclude name="plugins.js"/>
        <exclude name="${file.root.script}"/>
    </fileset>
    <regexpmapper from="^([^/])*/(.*)$$" to="\1/\2" handledirsep="true"/>
</copy>

Looks good. That's a change for the task around line 532 of build.xml.

Making a Compass Site Relative

I'm creating what at least for now is a single-page webapp and using, among other things, Compass.

One of the extensions I'm using (via Compass.app) is thomas-mcdonald-bootstrap-sass.  I've modified it to use the Font-Awesome icon font which replaces and extends the standard twitter icon library, as well as to add an IcoMoon icon font for even more icons.

To add the icon fonts to the compass bootstrap extension, you need to specify the path to the font.  In the instructions, you're told to put the absolute path to the font (such as "/fonts/fontawesome".  But we don't want to do that, we want to have all relative paths in our files.  If we don't include a beginning "/" in the $fontAwesomePath variable, then Compass will assume that the path is relative to the compass project's font directory (because of how the font-file function is coded).

The default font directory is the css directory plus "/fonts".

That made things awkward for using relative paths, so I did some digging and found a post where someone mentions using "font_dir" to configure the font directory path ... well, it's "fonts_dir", folks, not "font_dir".

To make a long story short, using the image-url function for my image paths, and trying to remove the absolute pathing by changing "http_path" to "" didn't work.

These are the settings in my config.rb that *did* work:

http_path = "./"
css_dir = "css"
sass_dir = "sass"
images_dir = "../img"
javascripts_dir = "js"
fonts_dir = "../fonts"

Of course you should modify that to use the same paths that you're using, such as "javascripts" and "stylesheets" instead of "js" and "css".  Just make sure that you have "./" as the http_path and "../" in front of your images and fonts directory paths.  When those are used, it's in the CSS context and your generated CSS file is going to end up in a directory that's parallel to them.

If somehow your final CSS file is in a different place, make sure that the images and fonts variables are changed accordingly.