Improve your workflow with GruntJS

Dominic Mercier
Jan 18, 2013 · 5 min read
Image for post
Image for post

GruntJS is a task-based command line build tool for JavaScript projects. It simplify most of the painful and repetitive tasks of front-end developers. It can automate JavaScript files concatenation and minification. It can also compile and compress Less, SASS and SCSS file automatically. Needless to say that GruntJS completely changed the way i work.

Having a Flash background, i get used to compile all my code into a single package with minimum file size. All my classes were well structured and it was easy to follow the code from project to project using this structure.

With JavaScript, i tried to keep the same workflow to be able to maintain my projects easily, but without any built-in packaging tool out of the box, i was a bit lost. My scripts were splitted into modules, libraries and helpers to speed up my work. But one big problem appear. How to package these files into a single one to prevent loading dozens of javascript files at runtime?

I’ve first found Codekit. I’ve used it since it’s Beta and was happy about it, but i soon see a major fallback to this approach. All my projects became dependant of this proprietary software… which is not the way i want to work with an open platform like the web.

By the way, Codekit is an amazing product and you should give it a try to figure out if it best fit your needs.

Then, i’ve take a look on GruntJS after viewing some buzz about it on Twitter. Not being a natural user of command line tool, i was not love at first sight but the examples seems easy to follow and i decided to give it a try. First, i had lots of problems installing the software and lost at least 3 hours to figure out the problem. (After a lot of googling, the problem was from an old install of Node and NPM). But, after the rain came the sun, and it was a sunny day oh yeah…

You first need to configure your task in JSON format, which is a pretty simple. Than run a simple grunt task from the command line.
It was a first timer for me. Running a command line from the Terminal without any bug on the first run, i couldn’t believe it.

I’ve then wanted to implement Grunt on my current project. (A small HTML5 interactive header with 3–4 javascript files to merge and compress together.)

Getting started

Then, navigate to your project directory and install grunt by typing npm install grunt — save-dev.

This command will install grunt for your project and save project dependencies in package.json. Check the file to see it automatically updated. You are now ready to go.

Merging Javascript files

To run the task, just go to your grunt file directory in the Terminal and type grunt concat.
Grunt collect all files in the /src/js folder and merge it into /dist/js/application.js.

Pretty nice… but we can push it a little more.

Compress (aka minification) JavaScript files

Than type grunt min from the command line.
Grunt run /dist/js/application.js into is compressor program and output an optimize/ultra light file to /dist/js/application.min.js.

During the development process, you include the merged javascript file into your application and switch it to the compressed one when switching to production. It’s that simple.

I then wanted to do the same thing with CSS.

Compress CSS files

Before running the task, you need to install the grunt-contrib-mincss module (developed by the GruntJS team).
Do to so, run the following command in Terminal: grunt install grunt-contrib-mincss — save-dev. This will install the module into your project in order to use it.

Then type grunt mincss.

Grunt will run /src/css/style.css through the newly installed module and output /dist/css/style.min.css.

Automating the process on files changes

Each time a JavaScript or CSS in the /src/ directory change, Grunt will run the corresponding task. It’s pure magic.
To run the watch task, type grunt watch. To watch JavaScript files only, type grunt watch:scripts. To watch CSS files only, type grunt watch:styles.

Launching and registering multiple tasks

Then you type grunt to run the default task or grunt debug to avoid javascript minification.

Pushing the boundaries even more

Conclusion

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store