The Node build script is different from the Ant build script in the following two ways:
- It installs universally and does not need to be copied from one project to the other.
- All projects should be initialized with the Node build script. It is significantly more troublesome to add it on to a project that is already underway.
The Node build script requires Node, so verify you have Node installed by entering the following command:
node -v
If you do not have Node already, you can install it from nodejs.org/ (or by using package manager from github.com/joyent/node/wiki/Installing-Node.js-via-package-manager.
Grunt (gruntjs.com/) is a Node-based command-line build tool on which this Node build script is based. The Node build script provides HTML5 Boilerplate optimized tasks that plug into Grunt.
This requires using a package.json file along with a grunt.js file within your project folder, which can be set up when you initialize your project.
In your command-line tool, first install the Node build script package, by entering the following command:
npm install https://github.com/h5bp/node-build-script/tarball/master -g
The Node build script can also be used as a part of a bigger build setup. If you are inclined to using it differently, take a look at all the possible ways of doing so here at github.com/h5bp/node-build-script/wiki/install.
Once installed, you can create your HTML5 Boilerplate project folder by initializing it.
You can choose from various options to set up a project folder for yourself. Let us use this to set up a temporary project, to learn how to use this script to start your HTML5 Boilerplate project.
Create a folder where your HTML5 Boilerplate project should be. Navigate to it within your command-line tool and enter the following command:
h5bpinit
This will start setting up a whole set of command-line interactions for you to choose from. It is mostly used to set up information for package management that will be used by Grunt.
Once you have done that, you have three options to choose from for setting up the files you want to start with; these options are as follows:
[D]efault: Standard set of files for HTML5 Boilerplate.[C]ustom: Get all the standard files with the option of choosing to renamejs/,css/, orimg/folders. You would typically want to do this if your files are going to be used as templates for other systems such as Drupal or WordPress.[S]illy: Prompts to rename every folder/file in HTML5 Boilerplate. You are least likely to use this option, unless you are a semantic perfectionist.
After you choose the type of installation you want to do, there are also more questions that are asked. Note that if you press Enter, the default value as indicated within parenthesis will be set.
This will then download the latest version of HTML5 Boilerplate from the Github repository for you to start as your base.
It is not impossible to use the script with an existing project, but it's just a bit more tedious. There is work underway in the project to make this happen at github.com/h5bp/node-build-script/issues/55, but until then, the following is how we can use it with our Sun and Sand website:
- First, create a temporary folder, and execute the Node build script to initialize an empty project from the command line as described in the earlier section.
- Then, copy only
package.jsonandgrunt.jsinto your project folder.
You can see the code in the nimbu.in/h5bp-book/chapter-7-node-init/ folder to see this in action.
Navigate to the Sun and Sand project folder (that you initialized it in the previous section) in your command-line tool and enter the following command:
h5bpbuild:default
This will combine the files and the results are published in the publish folder just like the Ant build script. You can also use these other build options like the Ant build script.
If you would like to leave out compressing images when building your project, then use the following command:
h5bpbuild:text
If you would like to additionally minify HTML files, then use the following command:
h5bpbuild:minify
The results are similar to what you would find with Ant build script; the following screenshot shows the result of the minification process:
There are some additional options available that you don't get with Ant build script.
This will open a local server instance you can immediately preview your website on. This is useful when you want to test the pages where protocol-relative URLs are used to link to files. To do this, simply navigate to your project folder in the command-line tool and enter the following command:
h5bp server
You will see the server being started for both the publish folder and the intermediate folder, as shown in the following screenshot:
Then, open http://localhost:3001 to view the published site.
Using this command, you can see your page reload on browsers it is open in as soon as you have made changes to any asset within the project. This saves you from refreshing the page manually to see the change. To do this, just navigate to your project folder in the command-line tool and enter the following command:
h5bp connect
It is fairly trivial to initialize an HTML5 Boilerplate project with Node build script and then convert it into a template you are building for Drupal or WordPress. First, make sure you choose the Custom option when executing h5bp init. Then, when setting the folders, set inc as the folder where your stylesheet will be, and images as the name of the folder that would contain your template images. When you are prompted again, enter in the same values and the project framework will be generated for you. Make sure you replace index.html with your template files.
Once you have done this, open the grunt.js file in your project folder and confirm that the stylesheet's folder is set to the parent folder by using the following code:
css: {
'style.css': ['*.css']
},Make sure that only JavaScript files and stylesheets get prefixed with the SHA filenames, by editing or removing images from being renamed. This is done by using the following code:
rev: {
js: 'js/**/*.js',
css: '*.css',
},The script also needs to know the new location of the images folder. We can do this by setting the source and destination folders for images, as shown in the following code snippet:
img: {
dist: {
src: 'images',
dest: 'images'
}
},