Gulp is quickly becoming the the leading task runner over grunt. If you are currently using Grunt or even worse, an ant task, then I highly recommend this topic for you. In this write up, we will quickly discuss Grunt, Gulp, and Gulp syntax.

Grunt

When Grunt first came out, it was a huge time saver. I started using Grunt, and was surprised by how much of a benefit it had over my ant task xml. It was much easier to write and more targeted for my front end specific tasks that needed to be auto ran: scss, testing, minimization. Grunt quickly became my go-to for writing tasks with ease. After a while Gulp came into the market. Then, as any good developer, I started to experiment with it, and found it was much easier and faster.

Let’s take a look at how Grunt works. In Grunt, we currently have tasks that run in serial with lots of I/O. Grunt is also configuration-based meaning the code that you write looks more like a configuration file than actual code. I have seen Grunt files grow huge quickly with only a few tasks because of this. Grunt is not all bad. Many projects still use Grunt, and I am not about to convert them to Gulp unless speed was a huge concern. Let’s take a look at how Gulp differs.

Gulp

Gulp’s approach to writing tasks look more like code and running tasks in parallel. Writing in the Gulp file, it will look much more like code than configuration, so it can be harder for people that don’t typically write code. Gulp uses streams and having tasks run in parallel. This is done by utilizing the node.js engine. Wow! It sounds great, but what do you mean?

Streams in Gulp are basically Linux pipes, so if you understand that then you’re good to go. Otherwise, it basically does all of the computations before it writes to the disk. This is drastically different from writing temporary files for each task. The full task is now a workflow when you start using streams. In Grunt, a task would be a build step. This might be a little hard to figure out if you don’t understand streams, but it is worth it to understand. The streams are ran utlizing node, and more information can be found here. Streams are great at saving I/O, but they can also be ran in parallel with other tasks.

Gulp syntax

Let’s dive into some code and start explaining all of this. All tasks default tasks will run in parallel: each task will run at the same time not having to wait for previous one to complete. Let’s take a look at how to start a task. The below task will run ‘bar’ with no dependants:

gulp.task(‘bar’,function() { ...

One might say, “Great! Looks simple, but sometimes I have tasks that depend on each other.” This is not an issue. Tasks can also specify the order in which they will be run by simply making them: return a stream, promise , or calling a callback. Saying that task ‘foo’ is one of the following then it will be ran before ‘bar’ using the below code:

gulp.task(‘bar’,[‘foo’], function() { ...

As you can see from the above code samples, it is very straight forward and looks more like code than a Grunt file. Now let’s talk about how streams work and briefly touch on more gulp syntax:

gulp.task(‘css’, function() { return gulp.src(‘src/scss/*.scss’) .pipe(scss()) .pipe(gulp.dest(‘app/css’); }

The above code returns when the stream has finished. As mentioned above, that is setting this task up to be a dependent task. Now to go over what that full task is doing. Basically the code will open your build files that are inside of src/scss and convert them to normal compressed css files then drop them into your ‘app/css’ directory. As a side note, scss is a Gulp plugin that you would install normally with npm install gulp-sass --save-dev. In case you were wondering, there are just as many Gulp plugins as there are for Grunt that have already been built. Let’s introduce gulp.watch since you’re going to want to use that in your upcoming Gulp file:

gulp.task(‘watch’,function() { gulp.watch(‘src/scss/*’,[‘css’]); }

The watch task is set to a specific directory and runs the css task on any changes. Putting it all together in order to build your css and then watch for changes would look something like this:

gulp.task(‘dev’,[‘css’,’watch’]);

One can see that Gulp has a lot of features that Grunt lacks. Gulp is not limited to just the above, and we have only touched the surface on what it can do. The basics have been explained enough to get you up and running. Hopefully in the next project that I pull from you has a Gulp file rather than a Grunt file or at least has inspired you to try it on your own.