loading...

GRUNT JAVASCRIPT FOR BEGINNERS

aterefe profile image Abel Terefe ・2 min read

Allow me to Introduce Grunt

Grunt is automation created by Ben Alman. Many companies use grunt to name the same are Walmart, Microsoft, Adobe, jQuery, Twitter, Mozilla, Bootstrap. It is also a build/task manager written on top Node.js.Some advantages are that it can make your code run more efficiently. This article will discuss many things such as installing it on the terminal, the three components, concatenation, uglify, minification, and how they all tie together.

Installing Grunt on terminal OSX Mac

To use grunt you need to install it in the command line interface globally, so you can use it on many projects. The command line you enter is npm install -g grunt -cli. The -g stands for globally, the grunt allows it to be run in any directory. The grunt -cli stands for it to be multiple versions installed simultaneously. People use Grunt because of having the idea of having a common set of tasks that can be executed across many unique repositories. There are three components to Grunt, they are the command-line interface, a repositories Grunt file, great plugins.

Three components to Grunt

A repositories Grunt file

The Gruntfile.js or the Gruntfile.coffee file is a valid belong in the root directory that is right next to package.json. This file should be committed to the project source. The Grunt file has four parts the function, project and task configuration, loading Grunt plugins and tasks, and custom task.

The Command-Line Interface and The Plugins

Installing plug-in the terminal can be tricky. However, the easiest way to install the plugin is npm install --save -dev. For the I highly recommend downloading the module starting with grunt -contrib…. By doing that, the plugin that the creator made, and it is well documented. The three popular plugins are concatenation, minification, and uglify.

Concatenation, Minification, and Uglify

To download any of these plugins you would follow the command line to download plugin replacing the module with the respected plugin name. Concat will concatenate a specified amount of files into one. This will save time on reading pages. Minify gets rids of white spaces, which make the computer quicker to read. Uglify changes the variable and functions name up. By doing that, it will provide security and making it hard to understand what is going on. Most people use all there and by doing all that, it will create or app development to run faster and provide security.

Conclusion

There is still a lot you definitely should read about because Grunt is very effective, yet very complex. Grunt is a task and environmental runner, and is broken down three components are command-line interface, a repositories Grunt file, great plugins. Can use concat, minify, and uglify to make your code fast and secure. Also, I highly recommend to check out the grunt documentations.

Posted on by:

aterefe profile

Abel Terefe

@aterefe

A full-stack developer. Chicago Native! JavaScript enthusiast!

Discussion

pic
Editor guide