After the boom of Javascript and the emergence of Node.js, many tools have been launched and have become an essential part of any project. Such tools include: Grunt, Gulp, JSHint, JSLint, UglifyJS, NPM, Jasmine, Karma, Bower, Yeoman, etc. Most of the current cross-platform projects often use a combination of these tools and frameworks. Although it is almost impossible to keep up with each and every new tool that appears in the market, there are a few that really stand out and are the most popular in the development community. Let’s have a look at some of the hottest tools out there:NPM
NPM is the Node.js package manager. With NPM we can install various tools, which may be required for the future of our cross-platform development. These tools can be installed globally or for a specific project.
For example, the following command allows Grunt to be added to our list of dependencies (package.json):
npm install –save-dev grunt
npm install –save-dev grunt
Bower
This is another package manager, which is concentrated on the front-end of your application, while NPM focuses more on the back-end (server-related) packaging. Bower can be installed through the NPM:
npm install -g bower
Both NPM and Bower can be used together. Typically, NPM manages our own development tools, whereas Bower manages the libraries that will be used by our application. The good thing is that these managers use the package.json file (in the case of NPM) and bower.json (in the case of Bower), so we don’t have to worry about keeping all the libraries in the version control systems.
Grunt
Grunt is a task manager. Its aim is to automate tasks such as compiling our Sass/Less style sheets, compressing our files, testing processes for our app, etc. With Grunt, any type of task can be automated. Grunt is based on modules managed by the NPM. Grunt community-developed modules will usually have a prefix grunt- and official modules will have a prefix grunt-contrib-.
The following example demonstrates the integration of the official Grunt plugin UglifyJS:
npm install –save grunt-contrib-dev-uglify
Grunt tasks are defined in the Gruntfile.js file, which also contains the definitions for the configurations of the various Grunt modules that have been installed in the past.
Gulp
Gulp is very similar to Grunt, it is a build system to automate tasks. Gulp is based on a chain of tasks, which is far more intuitive than Grunt. To install Gulp:
npm install –save-dev Gulp
NPM also uses modules with the gulp- prefix, which in this case are configured through the gulpfile.js file. The main difference between Grunt and Gulp is that Gulp uses streams (yes, like in Unix) and Node.js incorporates a stream module named pipe(). Gulp tasks can also be concatenated through the pipe method.
Besides Gulp, there are many more other tools, which can be very useful too. As you can imagine, it takes some time to set the tools up before the start of the development process but it can be definitely worth the effort. However, all of this can be simplified with Yeoman.
Yeoman
The target of Yeoman is to lighten the integration process of the tools and libraries to our new project. Yeoman uses Bower to manage dependencies and Grunt to test and build the application. Yeoman has its own tool called “Yo”, which is used to build the skeleton of the application. This scaffolding tool is based on generators that can be found on its official website. There is a huge variety of generators, which ask simple questions in the console in order to generate the structure of the project and even some automated tasks.
npm install -g bower grunt-cli I gulp npm install -g generator-webapp webapp
There are still many great tools that I have not mentioned here, however these are some of the most famous when it comes to developing a cross-platform application. Do you dare to try?
Author of this post: Miguel Sanchez (@MikeOxprezz) Mobile Development Expert at SlashMobility.
