FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 What Is Gulp?

Let’s begin with the most obvious question: 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.

Related Links

1.2 What Is Gulp?

Hello and welcome to this course. Let's begin with the most obvious question, what is Gulp? 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 wanna call it, there is one characteristic that stays the same, automation. So basically you would use Gulp to automate stuff that you would normally have to do manually. For example, 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. Now 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 in between these tasks. That is called piping or streaming. Now if you search the web for a definition for piping you will probably get something very technical. So I am gonna 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 an SCSS file and compile it into a CSS file. The Uglify plugin will take a normal JavaScript file and it will minify it. 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 a different type of file in the end, e xactly what I said with the Sass plugin. You start with an SCSS file, and you end up with a CSS file. Now, 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, 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 these plugins, that stream suffers some changes. So what you can do for example, is start with the SCSS files, 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 autorefixer, right? So Gulp will take that data stream, it's gonna run it through the autoprefixer plugin which accepts CSS a file. And also returns that CSS file, but in between it adds all the necessary vendor prefixes. So it also changes that file contents. And finally,you can minify it for example or you can write it to a disk. So that's essentially how piping works, right? 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 this inter-medially points which perform certain operations on that data stream. So hopefully you got a basic understanding of what Gulp is. As we're gonna built this entire workflow, I'm sure things will get more clear for you, but for now, that's a very quick definition of Gulp. Now in the next lesson, we're gonna have a look at the Gulp setup, we're gonna talk about node, the terminal, how to get things up and running. I'll see you there.

Back to the top