Front-End Task Automation - Part 1
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.
Node.js and npm
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
The installation would then look close to this:
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.
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:
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:
"description": "my description",
"test": "echo \"Error: no test specified\"
&& exit 1"
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.
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.