Full Stack for Front End Engineers

Full Stack for Front End Engineers Exercise 15: Creating Gulp tasks


This course has been updated! We now recommend you take the Full Stack for Front-End Engineers, v2 course.

Check out a free preview of the full Full Stack for Front End Engineers course:
The "Exercise 15: Creating Gulp tasks" Lesson is part of the full, Full Stack for Front End Engineers course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, students build a simple Gulp task to minify CSS. Jem walks through a solution to the steps to make a Gulp task.

Get Unlimited Access Now

Transcript from the "Exercise 15: Creating Gulp tasks" Lesson

>> Jem Young: Let's build a Gulp task. This is what a Gulp task looks like. So, you give it a name, and you say I wanna do these things, and it executes them. That's what a task runner does. It runs tasks. So, let's create a Gulp task, cuz right now, you have some boilerplate Gulp tasks in there, but they don't do everything that you wanna do for a server.

[00:00:20] So,
>> Jem Young: You can go ahead and kill your Node server for now. So in your command line, on your computer, on your server, open gulpfile, so vigulpfile.js, note I'm not doing direct commands anymore, cuz at this stage you should know how to open your gulpfile GI. And there's a gulp task in there called clean-css.

[00:00:46] Go ahead and fill that out so that when we run clean-css all the CSS files in the distribution folder are deleted.
>> Jem Young: Because we're using less in this particular instance, you could also use SaSS. It's gonna rebuild that every single time. And our ultimate goal is so that if we make changes to the HTML, CSS, the JavaScript it's gonna rebuild all that, minify into one file, a CSS file and a JS file and then it's gonna restart your application for you.

[00:01:15] Okay so if you're an uber hacker, you'd probably just copy and paste it from the JSS one.
>> Jem Young: And then just adjusted it to change to CSS, that's all you gotta do. If you typed it all out by hand, that's also good too. And I am using ES6 syntax.

[00:01:38] So hopefully it's not too unfamiliar to everybody. If it is I believe there's a good course on ES6 on Frontend Masters and they will tell you exactly what's going on right now. But that's it, so we just made a Gulp task. The reason why I filled out most of these and just had you do this one, Gulp task is a good foundation for just getting stuff done on a server in a very concise way.

[00:02:02] This is all just JavaScript, so it's easier to reason about than if I said, let's just make a shell script or do this in Python. You can do a lot of powerful things just using JavaScript and Gulp. So, next.
>> Jem Young: We have,
>> Jem Young: This one, actually I think I'm just gonna copy paste this one.

[00:02:22] I think everybody's got Gulp pretty well and I'm gonna put this in the chatroom, let's take a say 10 minute break, 15 minute break? Your Gulp task should look something like this It all should look exactly like this cuz that's what I posted. But essentially all this Gulp task does is it runs less and it converts it into CSS, concatenates it all into one file and puts it into your distribution folder.

[00:02:50] The pattern of a distribution folder is generally a pretty good pattern where you know that all your production code is in one folder, and is the only place you're gonna look. And it's all minified into two distinct files, your JavaScript files, and your CSS files. So it's a good pattern to follow, but as always, this is your own server, follow your own pattern as whatever you're comfortable with.

[00:03:14] And let me just save this, oops. I think I forgot to put that into my yes, I forgot to put it in here. Now we just add this to the tasks.
>> Jem Young: Put less in there.
>> Jem Young: And we'll put the clean,
>> Jem Young: Css task in there and that's it.

[00:03:48] That is a pretty solid well rounded Gulp build system. Pretty straightforward. We're making sure our JavaScript's cleaned up. Our CSS cleans up. And we can concatenate and minify our JavaScript files and then we run our less. We can concatenate and minify that. And then we serve it up.

[00:04:06] Don't worry, we're gonna plug this all in and will all make sense for anybody who's confused. But again, Gulp tasks are a good way of just getting stuff done on a server in JavaScript.
>> Jem Young: So right-click that,