This course has been updated! We now recommend you take the Full Stack for Front-End Engineers, v2 course.
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.
>> 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.
[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.
>> 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: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.
>> Jem Young: So right-click that,