Grunt, a tool for building javascript projects

Original author: Jack Franklin
  • Transfer
Grunt is a tool for building javascript projects from the command line using tasks. The release was released recently, the author of Ben "Cowboy" Alman , the project is on github . In this article, I will cover the basics of Grunt, its installation and use.

Please note that at the moment Grunt is in beta status and is actively developing; when writing this article, version 0.3.9 was used .

Installation


Grunt installs as an NPM (Node Package Manager) module. If you do not have node.js and npm installed, then you need to install them. You can do this from the official site node.js or, if you have a Mac, use homebrew. Then you need to install npm - the package manager for node (you can draw a parallel between npm and ruby ​​gems). Please note that if you install node.js from the official site, then npm is included . Separately, you need to install npm only if you built node.js from source or used homebrew.
Directly installing Grunt is done with a simple command npm install -g grunt. Flag-gmeans installation globally, that is, Grunt will always be available from the command line, since it is installed in the root folder node_modules. If you want to run Grunt only in a specific folder, then being in it, execute the same command without a flag -g. After a successful installation, the console output looks something like this:

If you see a similar picture on your screen, then Grunt with all the dependencies is installed and we can start creating the project.

Initialization


First you need to initialize a new project. Grunt contains several handy templates for initializing type projects commonjs, jqueryand node. For an example, let's create a jQuery project. Create a folder for the project and execute in it grunt init:jquery. You will be asked a few questions. Grunt shows the default value in brackets, and if you do not want to change it, just press enter. It looked like this for me:


The first file that we will look at is grunt.js(it is also called gruntfile). Its content may not seem entirely understandable, do not worry about it. Most importantly, Grunt added a section to the file qunitand created a foldertestin project. He also added instructions for combining files and tracking files. The latter means the automatic launch of tasks when any file changes:
watch: {
    files: '',
    tasks: 'lint qunit'
}

This task uses files from config:lint.files, i.e. refers to the following section of the config:
lint: {
    files: ['grunt.js', 'src/**/*.js', 'test/**/*.js']
}

Grunt will automatically run tasks lintand qunit(which do exactly what you thought) as soon as any of these files change. Very elegant! I will demonstrate this later.
At the end of the file you see the following:
grunt.registerTask('default', 'lint qunit concat min');

This instruction for Grunt, that if you run with no parameters need to do lint, qunit, concatand min.

Launch


Type in the terminal gruntand press enter. Unfortunately, this did not work for me as expected:
Running "lint:files" (lint) task
Lint free.
Running "qunit:files" (qunit) task
Testing jquery.jsplayground-demo.html
Running PhantomJS...ERROR

Installing PhantomJS is quite simple, the instructions are here . PhantomJS is a console engine for Javascript ( article on Habr. , Comment of the translator ) which will allow us to run qunit tests. After installing PhantomJS, the console output for the command gruntwill be:

So, what did this script do:
  1. launched code verification through JSLint
  2. automatically launched Qunit tests without opening a browser
  3. combined all the files into one (although in this example we have one file already)
  4. minified the merged file

I don’t know how for you, but for me this is a cool result for just one team!
If, say, I want to run all these commands every time I change the files, I just need to edit it grunt.js. Find a section watchthat looks something like this:
watch: {
    files: '',
    tasks: 'lint qunit'
},

I can add tasks here concatand min, but as you remember, we have identified a task defaultthat performs all these actions. Therefore, when changing files, I can simply run default:
watch: {
    files: '',
    tasks: 'default'
}

Of course, in reality it’s too much to run concatand minevery time you save it, I just wanted to show that it is possible. You can create several tasks, one for launching by default, another for starting at release, a third for starting during development, etc.
Now let's take a look at the js file that was automatically created in src/jquery.jsplayground-demo.js. Inside there is an indication of the license, copyright and a link to github - all this is added automatically by the team grunt init:jquery. Now let's make changes to this file to see watchin action. Firstly, you need to run watchin a terminal: grunt watch. Now let's make a change: I'm going to introduce invalid javascript so that we see a JSLint error. I printed a line in the filesome rubbish stuffand saved it. Output in the terminal automatically updated:


Now I'll fix it, but also to remove all the jQuery code, except $.fn.awesome. Grunt automatically generated several tests, so when I save the file, you will see how the tests fall. Since the tested code will be deleted.


And now I will remove the extra tests, and all the tasks will be successfully completed:


Just imagine how convenient it is to work on the project, running grunt watchand knowing that all the code is tested, verified and minified.

Conclusion


I hope this short review inspired you to use Grunt. Personally, I used it on several recent projects and was pleased.

Note translator: I also advise you to look at the grunt-contrib project , it contains the most common tasks during assembly. Good luck!

Also popular now: