Develo Design

Develo Design Menu

Using Grunt To Streamline Magento Development

Want to know GruntJS and how it can automate huge areas of your Magento workflow?

Why Would You Want It?

Simple. Automation! Every good programmer knows automation is key to a well-oiled development process from build to testing. At Develo, we’re always seeking new ways to improve and optimise our workflow to benefit our customers.

What is it?

If you’re not too familiar with Grunt or maybe you’ve only skimmed the docs and not got your hands dirty with it then here’s a quick intro.

Grunt has over 4000 packages capable of everything from basic shell commands to test automation, web serving, image optimisation, CSS and JS minification and loads more. Check out the Grunt plugins page for a full listing and to get inspiration for what you can automate in your own Magento development process.

At Develo Design, we have our own Magento 1.x Grunt file which we keep updated and tweak per project and if you’re impatient to see then jump past the list to the title below. We customise it and tweak it depending on individual cases, but it remains largely the same.

  • Here are just a few ideas of what Grunt can do to streamline your Magento development:
  • Lint and test your custom JS/PHP/CSS on any file changes.
  • Automate javascript minification.
  • Automate Sass compilation.
  • Check your local PHP code pool for style guide compliance.
  • Force linting of the entire project before a git commit (slight cheat here – as this is a Grunt plugin that generates githook to run your tasks).
  • Minify/Uglify JS.
  • Minify/Optimise template images.
  • Get the latest copy of your staging server database with deployments.

Develo’s Template Gruntfile.js

 

Getting Grunt Working On Your Magento Store

You’ll find it easier working from our existing Grunt file and tweaking it to your needs. You may all be working from with different setups, but here I’m concentrating on OSX developers and first covering the basic precursors. Skip any you’ve already done.

Install NodeJS and NPM from the NodeJS site then install Grunt:

npm install -g grunt-cli

cd to your Magento’s root folder.
Grab the package.json, localdb.json and Gruntfile.js from Develo’s online repo

wget https://raw.githubusercontent.com/develodesign/Magento-Gruntfile/master/Gruntfile.js & wget https://raw.githubusercontent.com/develodesign/Magento-Gruntfile/master/localdb.json

To install all the packages this Grunt file (assuming you’re using the Develo one) will need:

npm install

After that’s finished you can test your Grunt file out by running one of these commands (others may need tweaking for your project):

grunt clean grunt phplint:local

# if you want the githooks functionality run

grunt githooks

Now be sure to check out the Grunt file and tweaking the paths and packages to your requirements.

If you ever want to know what commands are available to your Grunt setup simply run the command

grunt --help.

The Possibilities are Endless

This article merely scrapes the surface of what Grunt is capable of doing for your Magento development. Just skimming through the available Grunt plugins it would be possible to:

  • Backup and restore your Magento database
  • Run arbitrary SQL on your DB
  • Run vagrant commands to your Vagrant box without first SSH’ing in.
  • Compile any number of CSS pre-processors

Check out Develo Grunt file on Github

Share

Loading Disqus Comments ...
Loading Facebook Comments ...

Post Comment

Your email address will not be published. Required fields are marked *

Discuss My Project

We want to hear about your project! Provide us with a few details and we’ll get back to you for a chat.