Making life easier, GruntJS (for beginners)

What is GruntJS

Most JS developers already use some kind of layout tools for their development, even if they do not know or do not use this term. They combine files during development, reduce JavaScript code to speed up page loading and convert Sass, or reduce the number of files in CSS for the browser, and much more. Most often these are different tools, which is not very convenient.

Grunt helps manage all these steps in one place and organize third-party components.

And why do we need this happiness?

All previously existing tools had their foundations in various areas of programming. Since they were not built primarily for JS developers, they had their pros and cons. Some require knowledge of other languages ​​or use separate XML dialects that you need to first learn, and then they are not so easy to set up.
So why not have a tool that is specifically designed for this purpose, which is written in a language that JS developers use daily, which makes using it easy for them? Grunt is written entirely in JavaScript and works on Node.js, it can be used on various platforms.

I hope to put nodejs, it will not be difficult. One note about this for windows users: to use the command line fully to manage nodejs and its packages, I advise you to put https://code.google.com/p/msysgit/ .
')
Grunt is still young, but has already undergone some significant changes in the recently released version 0.4. Now it consists only of a small command-line client and a display of the main task. All additional features are based on plugins, so you can customize it for the special needs of your project without any frills. Grunt and all plug-ins are added to your project directory to ensure that everything you need to build and maintain your project always remains in place. These modules can either be loaded along with the project, or if the development platforms will differ, then it is better to store all the used modules in a file, a primer file (on this a little further).

Although Grunt is still pretty early in the development stage, there are already a lot of plugins for (almost) all of your development needs:

Reduce JavaScript and CSS, integrate pre-processors for CSS and JavaScript such as Sass / Compass, Less and Stylus, CoffeeScript or LiveScript Sass / Compass, optimize the size of PNG and JPEG image files and automatically embed images, and much more.

If you plan to write large web applications, Grunt also integrates optimizations for Require.js and Google Closure Compiler and allows you to precompile Handlebars, Jade, Underscore, Mustache, Eco or Hogan templates. Also, there are already plug-ins for the most common testing frameworks such as Jasmine, Mocha, QUnit and Cucumber.
There are links to all available plugins on the Grunt website (and if someone publishes a new Node.js module with the keyword "gruntplugin", it is automatically added to the list).
As you can see, Grunt not only helps you create your project, but also acts as a central configuration node for external tools.

Installation and preparation for work

Now you have the first impression of what Grunt is, and it's time to start. First of all, make sure that Node.js is installed on your computer. There are installers available for various platforms that allow you to start right away. Open a terminal and type

npm install grunt-cli -g 

to install the Grunt command line tool.

Older versions of Grunt came with a set of predefined primary tasks. In order to make it more flexible and customizable, they were removed in the recent release 0.4 and can be installed as separate task plugins that will make it easier for you to start working with it.

First, create a file in the project root folder called package.json. If you are familiar with Node.js, you may already be familiar with this file, we will start with the most basic for our project.

 { "author" : "authorName", "name" : "FrontEnd-Project", "version" : "0.0.1", "devDependencies" : { "grunt" : ">= 0.4", "grunt-cli" : ">= 0.1.6", "grunt-contrib-watch" : "~0.3.1", "grunt-contrib-cssmin" : ">=0.5.0", "grunt-contrib-uglify" : ">=0.2.0", "grunt-contrib-concat" : ">=0.1.3" } } 

(package.json is a file with settings for nodejs. Put the file in the root of the project folder, open the console, go to the folder and execute npm install, all the packages and dependencies described in the file will be installed in your project folder. Detailed http: // package .json.nodejitsu.com / ).

Run Grunt

After Grunt and all the dependencies necessary for our project are installed, it's time to start with the Grunt setting itself. Thus, we add a file named Gruntfile.js to the root of our project next to the previously created package.json file. This is the main Grunt configuration file, which contains a list of downloadable tasks, and a description of their work.

The main configuration file might look like this:

 //    nodejs module.exports = function(grunt) { //   GruntJS grunt.initConfig({ //   GruntJS,        npm,     package.json   npm install //   javascript    jshint jshint: {}, //  concat: {} //   }); // ,    grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); //           grunt,   Enter grunt.registerTask('default', ['jshint', 'concat']); }; 

So, you see that all the necessary configurations are written in JavaScript. Basically, you need three different methods for working with Grunt:

 grunt.initConfig grunt.loadNpmTasks grunt.registerTask 

Each task can be invoked separately from the command line, passing its name as a command line parameter: For example, grunt jshint will perform only tasks aimed at controlling the programming style for compliance with the standards of your project. With grunt.registerTask, you define the default task to run when Grunt is called without parameters. It performs the listed tasks in the specified order, in our case jshint, concat and uglify.

Describe each plugin, it is a separate topic for conversation. Frequently used ones can be found here https://github.com/gruntjs/grunt-contrib . There you can find a full description and the latest version for frequently used GruntJS plugins.

Well, finally!

To start using Grunt, let's do the following:

1. It is necessary to install nodejs, find the installer for your system here http://nodejs.org/
2. If you have windows, I recommend to put https://code.google.com/p/msysgit/ for convenience.
3. We create in the project folder two files package.json and Grunfile.js, configure them, as we read above.
4. Create a folder for the project, or go to an existing one using the console, and run the npm install command to install Grunt, and all the necessary packages (which we previously describe in package.json).
5. Well, to launch Grunt, we execute the grunt command in the console.

With Grunt, JS developers have a very flexible tool at hand that helps automate repetitive tasks. After setting up, you can set up tasks on time, do this magic in the background, or integrate Grunt into your IDE or editor for encoding as an external development team (which works great in Sublime Text, for example).

Verification and testing code improves overall quality and helps you maintain a consistent coding standard, which makes Grunt also an ideal tool for teams working on large-scale projects.

Official site http://gruntjs.com/

Thank you for your attention, see you soon.