Improve your workflow with GruntJS
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
First thing first, you need to install Grunt on your system before doing anything. I recommend you to look at the Grunt’s getting started guide on GitHub to install the software. When done, you need to create a package.json file.
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
Merging javascript files is one of the most important task of a javascript developer. It ensure that all your scripts are loaded in the right order and speed up page loading by loading a single file instead of multiples. That being said, here is what the grunt file looks like.
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
Merging is cool, but we can make our code loading even more fast by compressing the source through YUI Compressor or Google Closure Compiler.
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
Compressing CSS files (or any other pre-processor languages such as Less, SASS or SCSS) is also pretty straightfoward.
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
These tasks are really useful to keep high quality deployments. But what about development? Typing grunt concat each time you want to test your code could drive anyone crazy.The awesome team at GruntJS create a module that watch the files you watch and run the desired task. That’s a huge time saver! Here is what the grunt file looks like:
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
You could launch multiple Grunt tasks at the same time by typing grunt concat min mincss.
You could also register a collection of tasks to run by typing shortcut. Very useful for building project for various deployment phase.
Then you type grunt to run the default task or grunt debug to avoid javascript minification.
Pushing the boundaries even more
What you could automate with GruntJS is limitless. There is so much modules to experiments with on the GruntJS website that you could spend your whole weekend on it. I’ve tried some of these and they will be part of my workflow from now:
- node-spritesheet Sprite sheet generator for node.js and task for grunt.js
- grunt-contrib-less Compile LESS files to CSS
- grunt-smushit A Grunt task to remove unecessary bytes of PNG and JPG using Yahoo Smushit
- grunt-rm Remove file
- grunt-text-replace General purpose text replacement for grunt. Allows you to replace text in files using strings, regexs or functions
Conclusion
I hope you like my article and you will have fun with GruntJS. It as been a invaluable tool for my since i’ve tried it. If you see error in my code demo or have suggestions to improve this article or my writing, please leave me a comment.