What are Gulp and Grunt? Know Both Automation Tools.

Hello and welcome to this blog. Let’s start with the most important question What is Gulp? A Gulp is a task runner or at least that’s one description. Another description would be that it’s a tool kit for automating time consuming tasks. Now whatever you want to call it there is one characteristic that stays the same: “Automation”.

So basically you would use Gulp to automate stuff that you would have to do manually for example: manually optimizing images, manually refreshing your page using the browser and so on. Well! These 3 actions can be consolidated into independent tasks. Then you would take those independent tasks and have Gulp run them automatically. This is the reason why we call tools like Gulp and Grunt as Task runners. Now a very big difference between Gulp and the other task runners out there is that, it is a way it handles file operations.

Gulp will essentially pass a data stream from one Plugin to the next without actually writing that stream in a temporary file, in between these tasks. That’s called Piping or Streaming.

Now if you search the web for the definition for piping you will probably get something very technical. So I am going to simplify it little bit.

A Gulp workflow works with several different Plugins that performs various operations on certain files. To give you an example: consider a Sass Plugin would take Sass or SCSS file and compile it into a CSS file. The uglify or if we take a normal JavaScript file, and it would minify.

So the thing with Piping is that you can take a set of files and you can run them through a set of Plugins or through one Plugin and you would get different types of file in the end. Exactly what I said with the Sass Plugin when it converts it into SCSS file and you end up with a CSS file.

Now normally these types of task runners would write temporary files to the disk. Well! Gulp doesn’t do that. It is a data streams so the content of that file is actually preserved in a buffer. It’s a stream of data basically and it’s just passed on from Plugin to Plugin until it reaches its final destination and in between in these Plugins that streams suffer some changes so that you can do for example: start with the Sass file pass them down to the Sass Plugin now the Sass Plugin accepts SCSS files and returns CSS files.

So the data stream that we get after the Sass Plugin is different from the one that entered the Plugin and then you can do more things with that. Maybe you would run them through an auto pretext right? So Gulp will get that data stream it’s going to run it through the auto pre texted up Plugin which accept a SCSS file and also returns a CSS file but in between it adds the entire necessary vendor prefixed so it also changes that file content.

And finally you can minify file for example or you can write it to the disk. So that’s way Gulp helps in Piping works right?

You pass data at beginning to the stream and you get a different type of data at the end and in the middle we have these inermediator points which perform certain operations on that data stream.

So hopefully you get a basic understanding of what a Gulp is? As we are going to built the entire workflow you will get to start to clear the things more for you, but for now that’s very quick definition of Gulp.

Now let’s discuss another task runner: Grunt

Let’s see how Grunt development can help you in your workflow?

Ok! Before we start talking about Grunt.js there are a couple of things I want to point out: You probably should be familiar about it before you start and the first one is Node.js or the node package manager that’s because we are going to install Grunt using the node package file manager. We will learn about it in our next blog.

Secondly you got to know a bit of JavaScript because we are going to create a file in this blog which is going to control all of our tasks and that is going to be written in JavaScript.

So alright? What do task runners do? Well! It performs repetitive task for us among those entire thing for us. Some of those tasks could be something like prefixing CSS rows so when we write CSS so we have a particular row which is something like I don’t know box sizing which may need to reinvent the

Prefixes because it’s not fully supported in all browsers that we should give a type in mark-box sizing- web cage-box sizing etc. We don’t want to do all that we want something to take care of those and Grunt can do that.

So it saves a lot of time it can also compile Sass files into CSS or reverse and when you write to Sass browsers starts on the server side files when you compile into CSS first and the other could download a another tool to do that for us.

It would be used anyway why you don’t see that. It can also minify JavaScript and CSS files and for example consider here is a jQuery script library and it’s not compressed in any way and it has lines of code up to 11000 lines of more or whatever its size, so we can upload this file to server this when a user requests it or we could compress it into something that looks like a code formed by squashing everything into 3 to 4 lines.

And it’s going to reduce the file size plus changing the name of few variables and functions to convert them into smaller variables and it’s just going to load quicker when you request for it from the server. So Grunt.js can take care of that kind of things for us and CSS files as well and it can also even modify files for us. So I put up a website where this has been I don’t know some 50+ requests for different jQuery library files or JavaScript files, CSS files. I am going to hate to serve this 50 times and it’s going to take a while to complete all those requests and get them back to your browser.

Now ideally what we are going to do is that we can candy although seems CSS files into 1 or 2 files and just load those files in the website. So which is taking may be 4 or5 requests rather than 50+, so that list is bigger for websites as well and Grunts can take care of that all as well.

So I think Grunt does a good job and also let’s ask one of them is Gulp which is like of a task runner. Grunt is still a heavy game player as a lot of support for it and I think it is really cool!

So I have got some of the folders, I have got CSF folders; I have got a JavaScript folder these are just the files that are going to use in this playlist. Because we can be going to each of these kinds of tasks here how to use Grunt with them and we are going to demonstrate that, on these files.

Now I have uploaded them for you on my GitHub page, consider that we are in that repository which I have created for this playlist.

It’s called exampleplaylist; if you want to read my article on node.js then you can click on the link here: What is Node.js?

This is all about Grunt and Gulp. And I think you all find this information is useful! If you have any question or query then please leave it in the comment section below. See you in the next blog.

Visit- JSP/Tomcat Hosting

People also Read–

How to make a simple hello everyone application using node-js on Plesk onyx for windows