Node is a server-side JavaScript interpreter that changes the notion of how a server should work.
Its goal is to enable a programmer to build highly-scalable applications and write code that handles
tens of thousands of simultaneous connections on one, and only one, physical machine.Here we
go with practical implementation of node.
Installing Node.js
1. Download setup for your system from http://nodejs.org/download/, and click on install.
2. You will get a node.js command prompt.
3. *npm will also install with your node.js setup.
or
1. Go to http://nodejs.org/ , and click the Install button.
2. Run the installer that you just downloaded. When the installer completes, a message indicates
that Node was installed at /usr/local/bin/node and npm was installed at /usr/local/bin/npm.
*npm, short for Node Package Manager, is two things: first and foremost, it is an online repository
Now we have a command prompt of node.js like as:
Your environment has been set up for using Node.js 0.8.16 (ia32) and NPM.
C:\Users\{USERNAME}>
After Installing Node.js, we will create a build tool for our Applications, for that we will use a build-in
package Grunt by using npm.
We have a project gruntTool, inside it we install grunt package.
Installing grunt
1. Open node.js command prompt.
2. Reach at project directory or you can use mkdir for making new gruntTool directory.
C:\Users\{USERNAME}\workspace\gruntTool>
3. C:\Users\shai\workspace\gruntTool>npm install grunt
for installing locally in your project.
If you want to install globally in your system use
C:\Users\{USERNAME}\workspace\gruntTool>npm install -g grunt
If we install grunt locally it will create a folder ‘node_module’ in our project.
How to use grunt package
Now in windows if we run our run command grunt.cmd, it will give something like this :
<FATAL>Unable to find ‘grunt.js’ config file. Do you need any --help? </FATAL>
For using grunt full potential we needed a ‘grunt.js’ file in our project, for that we use grunt init
command. It gives us five currently available templates:
● jQuery: A jQuery plugin
● node: A node module
● commanjs : A commanJS module
● gruntplugin: A Grunt plugin
● gruntfile:A Gruntfile(grunt.js)
If your project does not belong to anyone you can use final one gruntfile, Because we are creating
a simple tool so we will go with final one.
With command :
grunt init:gruntfile
you will see something like that:
Running “init:gruntfile”(init) task
This task....................................................
…................................................................
…................................................................
“gruntfile”template notes:
….................................................................
….................................................................
Please answer the following:
[?] Is DOM involved in any way? (Y/n)
[?]Will files be concatenated or minified? (Y/n)
[?]Will you have a package.json file? (Y/n)
After answering these questions it will show done, without any errors. We get a package.json and
grunt.js file in our project directory.
In our package.json , we get the information about our version, name, type, dependencies, and
in grunt.js we get grunt.initConfig and grunt.registerTask. In grunt.initConfig we get some default
tasks such as min, concat, lint, jshint, qunit and watch.
In register Task we register out tasks as:
grunt.registerTask('default', 'lint qunit concat min');
So when we use command grunt.cmd (for windows) all four tasks are run by default.
Now we will create a source folder src, in which we have three separate folders for javascript,
html and css. These folders can have other folders inside them.
Our project directory will look like this:
gruntTool
|__ node_modules
|__ src
|__ javascript
|__ html
|__ css
|__ tasks
|__ target
|__ grunt.js
|__ package.json
|__ config.json
tasks folder: is for creating your own tasks.
config.json file is for creating token.
Create different Environment
Classify the tasks which we want to do in different environment. For example “DEV” and “PROD”
dev :
Concat JavaScript .
Remove temporary files and folders.
Copy css and html files from src to target.
Zip your target folder
Prod :
concat javascript .
Minify javascript .
Minify css.
Remove temporary files and folders .
Copy html from src to target .
Zip your target folder
We
can see there are some common tasks which should run in both cases so
how we can configure our tasks? We are going to configure tasks
according to their environments.
Concat javascript
We have something like
concat: {
dist: {
src: ['<banner:meta.banner>', '<file_strip_banner:src/FILE_NAME.js>'],
dest: 'target/FILE_NAME.js'
}
},
This is the task which is in-build in grunt, now we can divide this task for different environments as follows
concat : {
prod: {
src: ['<banner:meta.banner>', '<file_strip_banner:src/FILE_NAME.js>'],
dest: 'target/FILE_NAME.js'
},
dev : {
src: ['<banner:meta.banner>', '<file_strip_banner:src/FILE_NAME.js>'],
dest: ‘target/FILE_NAME.js'
}
},
Here, we can see our task is divided in different environment. And we can register tasks as:
grunt.registerTask('dev', 'lint qunit concat:dev min');
grunt.registerTask('prod', 'lint qunit concat:prod min');
For running our dev tasks we use command
grunt.cmd dev
For running our prod tasks we use command
grunt.cmd prod .
Register your config.json file
For tokenizing or making task for scalable we use a config.json file and register file in our grunt.js file as:
config : '<json:config.json>'
Minify css
We have various ways of minifying css, grunt build-in function min in only for the minification of javascript(till now).we will try two approaches for minification.
By using YUI compressor
2. Write a task in your tasks folder ‘mincss’ as :
var exec = require('child_process').exec;
grunt.registerTask('mincss', function() {
grunt.log.write("Minifying css using yuicompressor \n");
var cmd = 'java -jar -Xss2048k ' + __dirname
+ '/jar/yuicompressor-2.4.7.jar --type css ' // Explicitly download YUI compressor.
+ grunt.template.process('<%= config.data.src %>*.css') + ' -o ' + grunt.template.process('<%= config.data.dest %>main.min.css')
exec(cmd, function(err, stdout, stderr) {
if (err)
throw err;
});
});
we can see we are using exec in our task so we need to require child_process package, which we can install as npm install child_process .
3. Now we need to register our task in grunt.js file as:
grunt.task.loadTasks('tasks');
4. Now we can register our mincss task as
grunt.registerTask('prod', 'lint qunit concat:prod mincss');
Finally we are able to minify our css.One more thing we are using config.json file for our address which would look like as:
{
"data": {
"src" : "src/**/*"
"dest" : "target/"
}
}
but this is very complex, let’s try another one.
By using grunt-css package
1. Install npm install grunt-css .
2. Register your task in grunt.js file as
grunt.loadNpmTasks('grunt-css');
3. Now structure of cssmin task put in your grunt.js file as :
cssmin : {
files : {
src : '<%= config.data.src %>*.css',
dest : '<%= config.data.dest %>/main.min.css'
}
},
4. Register your task for environment as :
grunt.registerTask('prod', 'lint qunit concat:prod cssmin');
These are two ways of css compression. I personally feel that second one is better than first because of its less complexity.
Copy files
If we need to copy some files from src to target than, we need to install another package as :
1. npm install grunt-contrib
2. Load your package in your grunt.js file as:
grunt.loadNpmTasks('grunt-contrib');
3. Task writing :
copy: {
prod : {
files : {
"<%= config.data.dest %>" : "<%= config.data.src %>.html",
}
}
},
4. Register your task for suitable environment as:
grunt.registerTask('prod', 'lint qunit concat:prod mincss copy’);
Zip folders
Now for zipping a folder we need to install a new package as :
1. npm install grunt-contrib-compress .
2. Load your package for grunt.js file as :
grunt.loadNpmTasks('grunt-contrib-compress');
3. Task writing :
compress : {
zip : {
files : {
'<%= config.data.dest %>.zip' : '<%= config.data.dest %>/**'
}
}
},
4. Register your task for suitable environment as:
grunt.registerTask('prod', 'lint qunit concat:prod mincss copy compress’);
Clear temp files
During
the execution of various tasks, sometimes we create various temp files
or folders, at last we need to remove that folders and files from our
project. For that we use another package as :
1. npm install grunt-clean
2. Loading task as :
grunt.loadNpmTasks('grunt-clean');
3. *task writing:
clean : {
folder : "target/",
file : "temp/"
},
*
Syntax of task should be correct, src and target addresses should be
correct, because it is not a stable version and it sometimes deletes
your whole project. So everything should be written in correct way.
4. Register your task for suitable environment as:
grunt.registerTask('prod', 'lint qunit concat:prod mincss copy clean compress’);
Note:
Apart from that if you are using grunt-cli latest version of grunt than keep in mind following points:
During installation follow the following instruction otherwise it will give you fatal error.
Solution for v1.4
1. npm install -g grunt-cli
2. npm init
fill all details and it will create a package.json file.
3. npm install grunt (for grunt dependencies.)
