A few years ago, in the early days of web development, when front-end development only revolved around HTML, CSS and native JavaScript; technologies changed rarely and the front-end development wouldn't be given as much importance. A couple of years down the line, and we have AJAX; "whoa, we could update content without refreshing" and web services. A few more years down the line and we have jQuery, NodeJS, Grunt, Angular, Gulp, SASS, LESS, Compass...etc. The front-end web development scene is growing at a blistering pace, making it difficult to keep up, especially when some of these new tools have some prerequisites, such as Ruby or the command-line; both of which you have never used before (apart from ipconfig).
Hopefully after reading this short blog, you would be comfortable enough to include some of these technologies in your own projects and start reaping their fruits.
Node & npm
We have mentioned NodeJS before, it's awesome, it's fantastic and all the cool kids talk about it. But what is it really and how would it help you develop? Small recap: NodeJS is built atop of the V8 JavaScript engine, allowing you to run scripts on your server. That's all you need to know for now, because we will not be developing any apps on NodeJS for the time being, but merely need it to be able to install npm and run Grunt (yes, Grunt is an example of an app that runs in NodeJS).
To install Node, it couldn't be simpler, head over to http://www.nodejs.org and click on the big green Install button. If you're using Windows, you should be downloading a *.msi file. Next, next, next, next...you know the drill. Unless you removed it, you should have also installed npm; which is Node's own package manager, and added the Node install directory to your environment variables.
You know that you have set this up correctly, if when you type "node" in your command prompt (cmd.exe); you are not given an error message, "Bad command or file name...etc"
Grunt
With Node correctly set up, we can now start using Grunt. If you have not read Chris Coyier's article on Grunt, it's definitely worth looking at. Let's assume that you have your Visual Studio solution and project set up and you want to include Grunt in this project.
First off, create a package.json file which will contain some basic information about your project:
{
"name": "My-Super-Website",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1"
}
}
The name and version are self-explanatory, whilst the devDependencies details any dependencies that are required to run the gruntfile.js of this project. For now, our only dependency is of course Grunt.
Open the command prompt in the project's directory. There is a shortcut to this by Shift + Right-Click on the folder and selecting Open In Command Window. Once there, run the following:
npm install
npm install -g grunt-cli
You will notice that your project folder now has a sub-directory, node_modules. This is where the downloaded packages will be located.
Let's assume that we want to use Grunt to do something simple, such as concatenate a few JavaScript files together and then minify them. Once again in the command window:
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
The above two lines download and install two packages, concat and uglify and then updates the devDependencies in the packages.json to include the newly installed packages.
Next up, we need to create a gruntfile.js in our root directory. This will contain the logic of our grunt commands and will be executed by simply calling "grunt" in the command-line.
A gruntfile.js to execute the above two packages would look something like the following:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dev: {
src: ['scripts/*.js'],
dest: 'scripts/build/script.js',
}
},
uglify: {
dev: {
src: 'scripts/build/script.js',
dest: 'scripts/build/script.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat', 'uglify']);
};
Taking a look at the above code, we first call the package file which we will be using. We then set up the configurations for the 'concat' task. This takes two parameters, src and dest; which do as you would expect, take all the JavaScript files in the scripts folder and concatenate them into a single script.js file. We then setup the uglify task to take the file we have just created, and minify it and output the results into the script.min.js file. Finally we specify the npm tasks which we are running and register the tasks as a default. This final step is required because you could have multiple 'versions' of the same task, one for the dev environment and a different one for the production environment, and hence run different tasks accordingly.
"But this sucks, everytime I want to minify my JavaScript files, I need to open the command-line and call the "grunt" command; might as well minify them myself manually!" Fair enough, that's why we will be installing and setting up another package, called watch. As the name suggests, this will watch your folder for changes to files (including adding, editing or removing files). Once the watch notices a change, it could be called to execute a grunt task, meaning that we would concatenate and minify our JavaScript without having to do it manually.
Take a look at our updated gruntfile.js:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dev: {
src: ['scripts/*.js'],
dest: 'scripts/build/script.js',
}
},
uglify: {
dev: {
src: 'scripts/script.js',
dest: 'scripts/build/script.min.js'
}
},
watch: {
dev: {
files: ['scripts/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat', 'uglify', 'watch']);
};
This above is just the very basic of Grunt and in my next blog, I will write about how to turn your messy gruntfile into a piece of modularized awesomeness and how to include compass and sass as part of your gruntfile.
Hopefully you find the above extremely simple and straightforward, if not, just leave a comment below and I will try to help you out.
Take care!