Work on a web integration project includes a lot of repetitive and not-so-interesting tasks. The following articles describe several very useful tools that can significantly facilitate and accelerate our work. Before we start with individual tools such as Bower, Grunt, Gulp and Yeoman, let’s talk about what these tools are based on.

Also, you should not miss the previous part of the article series about web integration – Version control system and web integration projects. It is a must-read!

First, it should be noted that Bower, Grunt, Gulp and Yeoman are modules of Node.js and will be further explained in the following article. Node.js is a powerful event-driven framework for JavaScript, based on the V8 JavaScript engine from Google, which is used in Google Chrome. Therefore, we install these tools using npm (node package manager), which is the default package manager for Node.js.

Node.js and npm

Node.js is an event-driven I/O framework for the V8 JavaScript engine. In other words, it is a V8 engine enriched with functions allowing scripts to access files or network functions. This means we can create a server listening to a certain port almost the same way as we create, for instance, event handlers in a browser.

Npm (node package manager) is a package manager for Node.js and is installed together with Node.js by default. In Node.js, modules (packages) are installed the same way as, for example, software in Linux via APT. Modules can be browsed at npmjs.org.

It is important to say that the operation of most of these tools requires us to be at least partially familiar to the command line, because this is the usual way these tools are operated / installed. There are also alternative ways for some of them which will be discussed in the conclusion.

Npm is operated via the classic command line and all modules are installed by a simple command npm install. For example, if we want to install the module coffee-script, we use in the following command:

npm install coffee-script

A directory named node_modules was created in the project directory and contains locally installed modules used by the given project. If we want to install a module globally, we use the parameter -g. The module than will be installed globally and can be used in multiple projects.

npm install coffee-script -g

The previous example shows that also mkdirp module has been installed together with coffee-script, because the module is dependent on it.

During installation, we can refer directly to a module from the npm registry or install modules from Github, local modules, modules available at URL, etc. Npm offers much more, as can be seen in the project documentation.

Package.json

If you look into a project or module, you will probably find the file package.json. This file contains basic information about a project, such as name, version, description of dependencies on other modules (including version), etc. This very file allows the installation of given module and its dependencies. If we use the command npm install in a project, npm downloads all dependencies into node_modules folder, including other dependencies of modules and so forth.

To create a new project (package.json), we use the command:

npm init

This, after a brief questionnaire, creates a file package.json in the project, which provides a description of the project. Its content is shown in the picture above. The installation of modules in a project is then performed by the command npm install <pkg> –save, as we are advised by a hint during project creation.

The installation of coffee-script module directly into our project is then executed in the following way:

npm install coffee-script --save

And the corresponding package.json:

{
"name": "my-project",
"version": "0.0.0",
"description": "my description",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\"
&& exit 1"
},
"repository": {
"type": "git",
"url": "https://bitbucket.org/my-project"
},
"author": "",
"license": "BSD-2-Clause",
"dependencies": {
"coffee-script": "~1.8.0"
}
}


One can see that coffee-script module was added to the dependencies section. This way the project is ready to be shared, for instance, by a team, where other members only install the remaining modules used by the project via the npm install command.

Conclusion

We have briefly described what the tools, which we will get to in the next part of this article, are based on and shown the basic principles used by all modules based on Node.js and npm. In the next part, we will finally get to the particular tools that can significantly facilitate work on a web integration project. That includes Bower – a simple package manager for front-end components, Grunt and Gulp – automation tools for front-end tasks and Yeoman – a scaffolding tool for generating complete projects.

You can now follow to the next part – article called: Front-End Task Automation – Part 2.