Gulp is a more recent and in my opinion, superior alternative to grunt. Gulp is code over configuration, and just looks cleaner and more familiar to coders.

Both of these tools are taskrunners so they both do the same thing. Gulp is simply faster, and requires less code to get you going. Gulp is also more flexible and efficient.

Before you decide whether to use GRUNT or GULP, let's first look at the code.

Example Grunt File

As you can see from the example below, grunt is basically a JS object that needs to be configured. The following code just sets up a watch and jshint. It doesn't do much else and it takes up a lot of room! You would need another 10 lines of code to use uglify or concat!

Example Gulp File

When it comes to gulp, first you need to set up dependencies. If you're using sass, minify, concat or whatever, you need to set up a variable to make sure it's available. And obviously you will need to use npm to install these modules first.

The second part of the gulp file are your tasks. You can run individual tasks, or run one task which runs several tasks in sequence. The "default" task is run by simply typing "gulp" in your terminal.

For this simple example we will only have three tasks. One to handle css and one for the javascript. The third task will spin up a server and serve the app. The default task will watch your css and js directories for changes, and update your browser.


Don't let anyone tell you which task runner to use. Use whichever one you like, but stay consistent between projects. This will make things a lot easier! But in my opinion, I like code over configuration. Which is the main reason I never liked Magento too much. Although Magento is very powerful, you have to configure every little thing in xml. This reminds me of the way grunt works. To me, gulp is more powerful, supported by more people, faster and simply more efficient. And the most important part, is that since it's code and pipe based, it makes sense to me when I look at it. Grunt files simply take more time to read and understand.

, , ,