www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

What Is Gulp?

What is Gulp? One description is that Gulp is a task runner. Another would be that it’s a toolkit for automating time-consuming tasks.

Whatever you want to call it, there’s one characteristic that remains true: automation. Let’s dig a little deeper…

What Is Gulp?

//fast.wistia.com/assets/external/E-v1.js

 

What Is a Task Runner?

Basically, you use Gulp to automate stuff that you would normally have to do manually, such as manually compiling Sass, manually optimizing images, manually refreshing your page in the browser, and so on. 

Well, these three actions can be consolidated into independent tasks. Then you would take those tasks and have Gulp run them automatically. That’s why tools like Gulp and Grunt are called task runners.

Piping

A very big difference between Gulp and the other task runners out there is the 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 between these tasks. That is called piping or streaming.

If you search the web for a definition for piping, you will probably get something very technical. So I am going to try to simplify it a little bit. A Gulp workflow works with several different plugins that perform various operations on certain files. 

To give you an example, the Sass plugin will take a Sass or SCSS file and compile it into a CSS file. The Uglify plugin will take a normal JavaScript file and minify it. 

So the thing with piping is that you can take a set of files and run them through a set of plugins or through one plugin. And you would get a different type of file in the end, exactly what I said with the Sass plugin. You start with an SCSS file, and you end up with a CSS file. 

Data Streams

Normally these types of task runners will write temporary files to the disk. Well, Gulp doesn’t do that—it uses data streams. 

So the contents of that file are 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 these plugins, that stream goes through some changes. 

So what you can do, for example, is start with the SCSS files and pass them down to the Sass plugin. Now, the Sass plugin accepts SCSS files and returns CSS files. So the data stream that you 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 run them through an autoprefixer, right? So Gulp will take that data stream, and it’s going to run it through the autoprefixer plugin, which accepts CSS a file. And it also returns that CSS file, but in between it adds all the necessary vendor prefixes. So it also changes that file’s contents. 

And finally, you can minify it, for example, or you can write it to a disk. So that’s essentially how piping works. You pass data at the beginning of the stream, and you get a different type of data at the end, and in the middle you have these points which perform certain operations on that data stream.

Watch the Full Course

So hopefully you now have a basic understanding of what Gulp is. To get a clearer picture, you could take the full course, The Web Designer’s Guide to Gulp, in which we go through how Gulp works in a whole lot more detail.

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 440,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.