 Welcome to the event of the weekend. Today we're going to talk about optimizing your theme or plug-in development workflow with Gulp.js. I'm going to start by talking a little bit about myself. Who am I? I'm a code monkey. So semi-evolved chimp that made it this far. WordPress and open source software enthusiast, obviously, or I wouldn't be here. I'm also a teacher, a bitch, a lover, a child, a father, a sinner, a saint, and apparently a Meredith Brooks fan. So that's a little bit about who I am. I've been dabbling with WordPress for the past, I'd say six, seven years. And I've been in web development for the better part of ten years. So let's get right into it. What's Gulp? Does anybody already use Gulp here? Show of hands. All right, good. So a lot of people. Grunt, any Grunt fans? All right, good. So hopefully you'll convert after this talk. So for the other people who have no idea what Gulp is, well, they describe it as a toolkit for automating painful or time-consuming tasks in your development workflow so you can stop messing around and build something. So if that sounds good, it's because it is. So what can you do with Gulp? A lot of stuff. Not all of it is shown here. For people who started using CSS preprocessors, you can do SAS, less stylus, whatever floats your boat. In the demonstration that will be a little bit later, I'm going to show you how to do it with SAS. Because I'm a SASy guy myself. You can also do the source smally thing, where you make the whole source code smaller. Image optimization, debugging, translation, packaging. I've used it to, like, FTP right into the server. If you're more of a cowboy coder and you don't use Git or stuff like that, you can use it for that. So it's pretty versatile. You can have a lot of fun with it. I'm sure there's plenty of creative ways to use it that I didn't even think of. What you should know about Gulp, it's a command line tool. If you're afraid of the terminal, don't be. It's not that scary. I know it's dark, but, you know, you just have to know a few keywords and you should be good. So if you don't have Node, you're going to need that. Node comes with the NPM package installer. So you're going to need that as well. So bundled up. And why don't you install Yarn while you're at it? I just...it's better. So how does it work? Two lines. So you got to install it and then you can... Oh, this is nice. Okay, cool. You can see. So you have the Gulp help command, obviously, which will show you how to use it. I don't know like all the different parameters you can use in there, but I'm sure there's plenty of interesting stuff. The main usage is just Gulp and you're going to use like you can put in your tasks. So the way it's built inside a file, it's called the Gulp file, you're going to create tasks which are going to be run whenever you run that command. Does that make sense? Cool. So let's get right into it. I made a really simple Gulp file. Like dead sample. I have the little pointer here, so I'm going to use this. So first you're going to want to install these prerequisites because like these are going to be installed in your dependencies. That's why the little, like the over here, it's for telling your package manager to put the dependencies in your environment, in your development dependencies. And then you have your file here. So it's very basic. You are going to require Gulp. So if you're familiar with JavaScript, I don't think this is sorcery or anything. You just require Gulp and then you require the SAS package for Gulp. So Gulp has a bunch of plugins. If you actually look like on the NPM website, you just search Gulp and there's like pages, upon pages of like different plugins you can use it with. So this one's to compile SAS source code. And then I built a task. So the first parameter is the name of your task. If you write default, the default task just runs when you write Gulp. So you just write Gulp in your command line and it's going to run. So what's it going to do? It's going to go inside your file. Inside your file structure, go look into the SAS directory and get any SCSS files. And then that source command in the Gulp object creates a stream, which you can pipe through different things. And the first thing we do is we pipe it through the SAS plugin. So it takes all your SCSS and makes it into a nice CSS file that the browser likes. It doesn't like SAS files, apparently. Not yet. I think I've heard like last year that it was planned. So hopefully in the meantime, this stuff, and then you pipe it into a destination here so you can basically compile it and then it gets written to whatever directory is in there. So when you do this here, it does all that stuff. Makes sense? All right. So this one's really basic. While I was doing research for this because I've built a few Gulp files myself, I figured that other people have also done this, obviously. And I found a really neat Gulp file by... I don't know if I'm going to get his name right, but I think it's Ahmad Awais. So this is kind of based on his work. I added a few things in there. But if you run those commands in your terminal, you can put that straight into either your theme folder or your plugin folder, and it's going to download the Gulp file. I put all the configuration for the Gulp file was straight in the Gulp file. I didn't like it. So I took it out, put it in a YAML file. So that's the second file. And then you're going to want to download a package.json, which contains all the dependencies you're going to need. And then yarn is going to download those dependencies. And then once you run Gulp, all this stuff happens. So it's going to watch your source files. So it creates... First thing, it creates a proxy with Browser Sync. So pretty neat. You're coding. You save, compiles, gets injected into the browser. So you don't have to always refresh the page, which is nice. I think Browser Sync also has like a scroll sync so you can have it open on different devices. So you have it on your computer, have a tablet beside a mobile phone, and you start scrolling on your computer and everything is kind of synced. So that's pretty sweet for testing. So, you see, you're already saving a lot of time right there. SES, the CSS conversion, of course, it's going to catch any errors in there in your syntax, so you're not going to go in the browser and be like, why is this not working? It's going to tell you. There's an error in there. As the auto prefixes, you know how sometimes you're going to add prefixes for different browsers like Maz or WebKit or whatever. It takes care of that, so you're not taking care of the details. It creates the source maps, so even if you have the minified file in the end, you can still see in the browser when you're looking at the source where the actual code you wrote is in your source code. CSS minification and it merges a media query, so a lot of different things happening there on the CSS front. JavaScript, it concatenates, aglifies, vendor, and custom GS files. It's going to check for errors as well, so if you have any errors, it's going to tell you in the terminal. You can have images as well, so it's going to compress those images right there. It watches for changes, so as I said, it's going to compile every time you save. It's going to compile into a file. Same thing with PHP, so if you make any changes in your PHP, it's going to library load. Corrects lining endings for, well, that was hard to say, for different file systems. And Jax CSS already talked about that. Another nice feature generates the pod file for translation, so when you save your PHP, say you use the wonderful translation functions that Brian was talking about earlier, well, you save and then creates the, adds the necessary strings to the pod file, so you can just get on with the translation and not be worrying about it. And I added a task as well to package the whole thing, so say you don't want to manually take the files and say, okay, I don't want this file. Well, you just, in the configuration, you tell it which files to add to your package and it creates a nice zip file, which you can just upload either as a theme or a plugin or whatever. So it does all these nice things. Pardon? That's a good question. It should work. It doesn't. All right, well, maybe I can give you the, because this is just short links to the Git repo, so the Git repo is here if you want to get the full files. They're all here. So it's basically this file, this file, and this file, which you can copy. So, yeah, it was kind of short, so I'm going to make a demonstration because I was kind of looking forward to demonstrating this. I hope it works. So that's the fun thing about demonstrations. They always work the first time. Let's start with this. Oh, wait, I have it here. I think Biddo is down. That's great. I love it when it happens. Well, I have no internet connection, which is probably related. So I'm going to go ahead and connect to the internet, which will probably help get a lot of those demonstrations. It's like Hover 2018, right? All right. Let's go ahead and log in. Hopefully, now it likes it. I think something's happening, or it just looks like something is happening. Is it going to resolve or something? Okay, I'll just do the old-fashioned way. So copy these things. Just want the raw file. This stuff. Just want to save it. I was fully prepared for this eventuality, as you can see. So let's go with this. I'll load this as well. I was hoping to go through this file with you guys to see what's actually going on behind the scenes. Hopefully, at the end, you're all gulp experts and you're going to save a lot of time. So that's not a text document. That's a YAML file. Thank you. All right, so I'll just skip the first curl requests and just install the dependencies. All right, that works. Good. So I'm just going to install all the dependencies. We're going to have a nice node modules file with an infinite amount of different dependencies. So as you can see, lots of stuff in there. It's going to do the linking. The reason I use Yarn is because I always have problems with NPM and really long file paths, which Yarn kind of solves. I saw it hand up. Yes. Well, it's just the package manager, so it just deals with dependencies better than the NPM, like package manager. I found it's faster, yeah, as well. I think it can run multiple requests at the same time, whereas NPM kind of does them one after the other. All right. And then we have gulp. Oh, I also have a little task here. So I set up the, like inside the config file, like all these directories where I, like I set up my folder directory. By all means, set up your own. If you have like a preferred, like directory configuration or whatever. Mine is there, and if I'm not mistaken, the task is directories. So gulp directories. It's going to create all these nice source directories. So now I have all my different directories I can work in. So all the source code goes into the SRC directory. Have the source images, JavaScript, and SCSS right now. Right now there's nothing in there. So let's start adding some stuff. I'm going to take this one. By the way, like the way it's set up, if you have a style.scss file in there, it's going to crush this one. So if you're working like on a theme or something, and you have a lot of stuff in there, you're probably going to want to copy it into the other file here. Just like a little warning I thought I'd tell you. I'm nice like that. I'll just copy with whatever's in there. It's an astro child theme, so I'm going to save that. So yeah, let's start this stuff. Gulp. So now it's running. Let's make some changes. Not this one. It's like the best code. The most useful demonstration. So I think I have it running here. The thing is, for the demonstration, I'm going to have to change the configuration around here. So I'll just do that real quick. I'm set up with the local by flywheel. Who uses local? Okay, not that many people. For local development, it's awesome. I love it. So shout out to flywheel. So let's change this. I think I have a WooCommerce test. My local is not open. Let's open this. I'll just copy the URL here in my configuration. So this is probably stuff you should be doing if you're going to work with this. WooCommerce.local. This. I think the rest is fine. Hopefully this time it works. It's just really slow. All right, we got it. So we're connected. We've got browser sync connected in there. So if I make any changes, I think the theme right now is not activated. I'll just go activate it back here. This child theme. We've got maintenance going on. I love it. We have like a .maintenance file in there or something. I hope this is the right password. It's going actually pretty well. I'm figuring. All right. Themes. So this one. So as you can see, we can't see anything right now. Which probably has to do with this. So hopefully we can have it in real time. This is entertaining. Okay. I'm sure it's a cash problem. Try this again. Have I mentioned this is my first talk? So it's really going well. All right. It's getting there. Give it time. See, okay, it's getting. We're getting there. So if I change stuff in here, it's supposed to do stuff. Or it is. It's just not doing what it's supposed to. Let's try something like this. So it's not working. As you can probably tell right now, usually it goes really well. So this is demonstration. Demonstration is 101. I'll get back to the slideshow and just do some credits and maybe have some questions or something. So as I said, a lot of different people are talking about this. You have my repo there. You have the original repo from which it was forked. SitePoint has an interesting guide on it. So if you want to use it for your workflow, I'll probably be looking into and fixing the whatever issue is going on. So you can keep, like, do the watch thing on GitHub. There's a little I and you can just click on it. So you guys have any questions? Not to do with the demonstration. Yeah. Question. Grunt. Well, grunt is a task automator kind of like gulp except I know practically nothing about it. I just know that it's, I found it very complicated when I was looking into the like files, like gulp file versus a grunt file because I think like grunt file is like a huge JSON file whereas gulp is just you're right JavaScript which is easy in my view anyways. I hope that answers your question. The question was I talked about grunt but you didn't tell us what it was so I just did in a very short way. You guys have any other questions? Yes. Yeah, well probably I mean I'm just surprised it's not working but because it seems like it's not doing the compilation or it's not. Yeah, I don't know if it's, let's try it. I can use the, let's just see what package it makes. Look, I'll just show you the like the package task. So, so now I have a nice package here which has like all the source files in there like this. So, yeah, one of the things you can do with that. That works. All right, any other questions? Yes. For browser, the question is gulp apparently makes it easier for browser compatibility like are you talking with like CSS? Yeah. Yeah, well that's what the auto prefixer does here. So like these are all the tasks in there. And this one is for the styles. So it takes all the source files and creates a source map, dumps it into the sass and then here you have the auto prefixer. So like it takes all the stream and adds any prefixes depending on like how you configured it. So you can say like say I want to affect all the last two browser versions or like in this case it's supposed to add all the prefixes for last two versions. Anything that's above 1% usage like on the can I use website. IE 9 and up. Internet Explorer mobile. So like you can you have all these and you can add them. So yeah it does that because of this. That answers your question. Great. You guys have any other questions? Yes. I've heard about Webpack. I just haven't gotten around to it because I don't know I like gulp. And you know why change something that's not broken? But apparently it is now. I'm going to have to change it. But yeah Webpack. I mean it does stuff. Any other questions? Non non non pertaining to Webpack? Or grunt? That's why I'm talking about gulp. Like I know what I'm talking about. It just doesn't work. It will. Like yes. I don't know of any other tools. The question was if there are other tools that do the same does the same thing as browser sync. I think live reload. There's like live reload browser sync. I don't know that many other options. Maybe there are. I guess that would be something to look into. Well I see you guys I hope you like the presentation. I hope you like the demonstration. And I'll see you guys around.