I encountered one issue with NPM where it didn't create a "npm" folder in the user's roaming profile. I didn't encountered this issue when installing node.js on my laptop or Surface Pro 3, but it was an issue with VMs hosted by Azure. Fortunately as I had done a run through of my demo I was aware of this and how to fix it.
The demonstration covered installing and configuring the following packages:
- grunt-contrib-jshint
- grunt-contrib-csslint
- grunt-htmlhint
- grunt-contrib-copy
- grunt-contrib-clean
- grunt-contrib-concat
- grunt-contrib-uglify
- grunt-processhtml
The feedback I received indicated the audience felt confident that they would be able to start working with Grunt without any difficulties and believed that they would be able to use it for automating their own build tasks. A common suggestion was to include a brief introduction of Grunt before getting into how to use it. I have to agree, that I did gloss over this so this is something that I will incorporate if I get the chance to give this demonstration again.
The website that I used for the demonstration can be downloaded from the following links:
The starter version
is a basic website that contains a single HTML page and a few JavaScript and CSS files that can be processed using Grunt. The HTML page contains two buttons that display alert messages when they are clicked, which provides an easy way to demonstrate that the JavaScript is still working post build. I decided to keep the website as simple as possible to ensure that the focus was on using Grunt and not what the website was doing. The complete version contains the package files
(package.json), the grunt file (gruntfile.js), and a modified index.html. I have
not included the packages, so you will need to run "npm install" to
download them when using the complete version. I have created two tasks that can be executed via the following commands:
- "grunt default" or "grunt": this task will lint your JavaScript, CSS and HTML. I suggest running it with the "--force" option so you end up with a full list of all the linting errors, rather than the task prematurely aborting as soon as it detects the first one.
- "grunt release": this task will copy the website into a release folder, concatenate and minify the JavaScript files and update the index.html file to reference this single JavaScript file.
