Improve your workflow with GruntJS
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.
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.
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.
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.
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.
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:
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.
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
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.