The Build Script of HTML5 Boilerplate: An Introduction

Paul Irish · 85K views · 2011 · 28:11

Open on YouTube

Web developmentTesting, debugging & developer toolstutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it when answering questions about minifying and automating front-end asset builds, as a demo of the HTML5 Boilerplate build script in action.

Recommended by 1 people across 1 different months, 2011 to 2013.

What it is

Paul Irish walks through the ANT-based build script that ships with HTML5 Boilerplate, which concatenates and minifies CSS and JS, optimizes images and handles caching-related tweaks. It is a 28-minute screen-recorded introduction from 2011.

What people said

Recommends Ben Hughes · 2011-05 · Stack Overflow · on “Any recommendations for a CSS minifier?”

Have a peek at the latest HTML5BoilerPlate [LINK] by Paul Irish - it contains a build script to minify all your assets (including PNG's and JPG's). You can see a demo video here [this video] .

Cites purinkle · 2011-03 · Stack Overflow · on “How do I get my iTerm prompt to display differently when I'm in a Git branch?”

I'm trying to get my iTerm prompt set up the same way as Paul Irish [this video] So far I have the following in ~/.profile : # Add git branch name to prompt parse_git_branch() { git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/*\(.*\)/ on \1/' } PS1='\n\[\033[0:35m\]\u\[\033[0;32m\]\w\[033[0m\]$(parse_git_branch)\n\$\[\033[0m\] ' I don't know how to make just the branch appear in a different colour and not the preceding "on" As well as this there are other features such as: Displaying an "o" at the prompt when not in a git branch Displaying a "±" when in a branch Displaying the date at the end of the line Any help would be appreciated

Cites No Results Found · 2011-04 · Stack Overflow · on “Serving php as css/js: Is it fast enough? What drawbacks are there?”

@Udo G: I actually had it backwards, apparently the problem is that the file may not be cached at all. HTML5 Boilerplate intro on YouTube [this video] mentions something about it at 4:30. Another blog post [LINK] that mentions it. And then there's this on the google page speed site [LINK] (scroll to the bottom).

Cites Aurelio · 2013-03 · Stack Overflow · on “LESS deployment and build-automation”

No build script will be able to merge a css file with a js file as in your example. They are two completely different languages serving two completely different needs, and they need to be kept apart from each other. As Less is, in the end, just CSS it makes no sense to merge a Less file into a js file. Moreover best practices suggest to put css links in the head of your document (as Steve Souders suggests here [LINK] ) and javascript code at the end of the document, just before the closing body tag (again Steve Souders, here [LINK] ). If you follow these rules (which is strongly recommended for performance) you'll end up placing css links far away from your js scripts in the html, like so: <

Cites Aurelio · 2013-03 · Stack Overflow · on “Workflow/tools for frontend javascript development/test and production?”

I am also looking for a similar automation process. I am currently using a neat ANT build script provided with the HTML5 boilerplate (see it in action [this video] ). I am also taking a look at Grunt.js, as referenced in the first answer here below, but currently every tutorial around seems to reference the old version of it. Still, you might want to give it a go. this seems to be a nice solution for you, as it can be customized according to your needs.