 Welcome back to the channel. In today's video, I'm going to show you how you can make a very nice build process for yourself. Now, I have a plugin that I'm developing here and you can see that the CSS is starting to grow on me and it's still growing. The plugin is still in its development stages, so I need to be able to manage all the CSS very well. And then when I look at the JavaScript, you'll see that it is quite a huge bunch. We are having over 480 lines of code and this is becoming a huge mess in a very simple time. And I'll start messing up very, very soon because coding is becoming better and better every other time. We are having things like TypeScript, which can help me fix some of the issues that I'll have in the near future, but I can be able to fix them before I actually go to production. We have things like SAS or less or other languages that we can preprocess to help us work with our particular CSS. If you want to see how that process is built, then this is the video for you. So I'm going to teach you how to use Gulp that will convert your SAS to CSS and then it will get your TypeScript into JavaScript. So let's start making that build process to help us with our plugin. So the first thing that I'm going to do is I'm going to copy our file that we have here and I'm going to go into our assets and I'm going to create a new folder called SCSS for our SAS. Then I'll paste that folder in there. The next thing that I'll do is I'll create a new folder which I'm going to call build because we want everything that we build eventually to come in here. So since we have our style here, I'm going to convert this. I'm going to rename this and I'll change it to SCSS. So you'll see that we're actually working with our CSS and it looks nice, but we can be able to do things like nesting of our CSS. Like for example, I shouldn't have to write this here and then write it again here and then write it in here and write it all again. So what I'm going to do is I'm going to just nest this CSS by making new brackets in here. I'll cut this. I'll paste this in here. And after I write this, it will be able to give us what we initially had here. So let me push this into our SAS file. If this is not looking so neat. And then I can also add this here, press Enter. We'll cut this and then we'll paste it inside here. Of course, this is also another level deep. So I'll hit Enter here. Hit that into Enter. Then I'll push this up a level so that we are nesting this properly as we need it to be. So the next thing that I'll do is clean out this here. I'll then go to the part that has the biggest this TSM model content. It has a lot of things that need to be nested. So I'll hit Enter. I'm going to just get this and push it up. And then I'm also going to just take off this model content from here. And then I'll select this. Of course, I'll push it up. Ideally, I should also be nesting this since I want to. You'll see that as we get all this content and push it in, we're starting to have much, much cleaner code in here. Now, if you're new to SAS, this might be looking a little bit weird for you and you're thinking what's going on. But that's okay. If you've used SAS before, you can actually skip to the part where we start building GALP to help us fix the SAS in here. If you're new to SAS, let me know in the comments if you'd like to see videos about how to use SAS and how to make it work for you really, really well and make you write better CSS. Now that we have our SAS file in here, I'm going to start building our process in here. So I'll come to the root of our folder. I'll open up my integrated terminal right here. And what I'm going to do is I'm going to check for the node version that I have. And you'll see that I have node installed, which means I can use simple commands like NPM. If you do not have node installed, you can go to nodejs.org, download the version that's for your operating system. For example, mine is Mac. So I can click to download this and then install it on my computer. So we'll hit this to download. I'll save this file on my computer. And it's a very small file which you can download in a matter of minutes. So I'll fast forward to the end. Now that this is done downloading, I'll click open to just install it on my computer. And then I'll click continue. I'll hit agree here. And then I'll install it on my computer. Of course, it asks for my password. And you'll see that now node has finished installing. I'll go back into my terminal. And what I'm going to do is I'll type node-v. And you're going to see that previously I had version 12, but now I'm on version 14. So we'll hit clear here. And then what we're going to do is we're going to type NPM init-y. And that will allow us to get a new file in our folder called package.json. Now, of course, this comes with the default information allowing us to do a couple of things. So it will give us the name of our package. It will take in a version number. It will give a description which can always add. We have some scripts. We have a repository and we have all these things. So right now I don't need this main.js. So I'm going to take it out. We don't need the scripts right now. So I'll take it away and I'm going to hit save. So once we are done with this, I'm going to open up my terminal again. I'll type clear to clear my terminal. So I'm going to type NPM. And what I want to do is I want to install and I want to install a dev dependency. So I'm going to do save-dev. And then I'm going to install gulp. I'll hit enter. And that's going to take a little bit of time just installing gulp. And one of the things we are going to see is our package.json changing just to store that particular gulp dependency that we have installing right now. And you can see that gulp has been added here as a dev dependency. And we have a new folder here called node underscore modules. So I'm going to add a number of other packages that I'll be using in my gulp. So I'm just going to get that command that I had above. And I'm going to add gulp dash sas. So I'll add some other packages that I will need like CSS nano, which I will need. I'll type a space. I'm also going to need gulp dash post CSS, which will help me to process my CSS and then minify it automatically. Then I'm going to need post CSS as well. And after writing gulp CSS, so I'm just going to hit enter and allow those dependencies to also install. So I'll fast forward all the way to the end. Now that we have all our dependencies right here, we are now good to go. We can start writing our build process. Now the first thing that I will do after adding my package of JSON and downloading my dependables, I'm going to come here in the root folder and I'll add a new file called gulp file.js. And inside here is where we're going to write our JavaScript and it will allow us to convert our particular SAS into CSS. So the first thing that I will do is I'm going to use cons gulp. Cons gulp is actually equal to and I'm going to require and what I need to get from there is actually gulp. So I need to get gulp, which I installed in my modules. I'll duplicate this because I'm going to need it again. And the next thing that I need to get is I need to get post CSS, which we added in gulp post CSS. If you remember our package.json had that. So these are the files that we're importing. The next thing that I need to import is SAS and we added that through gulp SAS. The other thing that I added is CSS Nano. That's going to help us with some beautiful CSS stuff. So I'm going to have CSS Nano right in here. And because I love to keep the WordPress standard, I'm going to have all those in one straight line so that it looks nice and tidy. Then the first thing that I'm going to do after doing that is I'm going to write a function. Now I'm using gulp version four, which allows me to just write a function be style. Of course, after writing our function, we add our curly brackets. And inside this file here, I'm going to select the plugins that I'll be using equal to. I'll use square brackets to have an array. And then I'll type we need CSS Nano right here, and it will just be a function and that function will be called. So that's done. Now the next thing that I need to do in our style function is I want to return and what we're going to return is gulp. And in this gulp, we want to get the source of our files. So gulp, of course, since this is a function, we need to pass in a parameter and say we want to go to the root folder and we want to be able to go to the assets. In the assets folder, we want to go to SCSS. That's where we're going to find our SCSS. And then slash, I'm going to add an hysterics to be able to get all the SCSS files that are actually going to come. Now you will see that I'm starting to have a couple of errors and because I have not wrapped all these pieces inside quotes. So I can use single quotes or I can use double quotes. I prefer single quotes, but it doesn't really matter. So what we have done here is we've located our file and what we want to do is we want to pipe in the pipe. We're going to pipe and we want to add SAS in there. We want to use the SAS function in there to compile our SAS files. And after doing that, we're going to use the word pipe again, which is a keyword that helps us to keep on chaining a number of functions in there. So we're going to use post-CSS. And in the post-CSS, we're going to pass the nano, the CSS nano. So that's where we're going to pass in the plugins. I'm going to wrap this so that you can see that we had this plugins array right here and we are passing it in here as part of our post-CSS. So after doing that, we then want to pipe. That is to add another function. And the function that we want to do is we want to set gulp.dst for our destination. And our destination is going to be like what we had there. We're going to use single quotes. And then we're going to go to the root folder. We'll go to assets and we want to go inside the build folder. And we want to go inside the CSS folder. And that's where we're going to add our CSS file after it has finished running. And then at the end, I'll put a semicolon to say I am done writing this function. So after writing that function, I'm going to just export it. So I'll say exports. And then I'll say dash style. I'll add our equal sign. And then I'll say that is going to be equal to style. So basically we are exporting this function so that we can be able to import it in another file or to use it around inside our own file. So after doing this, I'm going to hit self. So when I open my integrated terminal and then I run the keyword gulp and then I run the function style. You will see that it tells us that the function gulp is not available. So what we need to do is we need to install npm install. And we're going to install gulp CLI and we want to do that globally. So I put a dash j to say install it globally so that I can use the keyword gulp in my command line anywhere across my computer. Now when I hit enter, I'll wait for that to install. You'll see that our installation failed and that is because we don't have permissions enabled. So you can do the same installation. But this time we're going to add the word sudo to grant our computer administrative rights. When I hit enter, it's going to ask me for my password which I'll type in and hit enter and then allow the installation of all the files that are needed. So I'll just wait until the end. And all our packages are installed and we are good to go. So I'm going to type gulp right here to get the version and we'll see that we have the CLI gulp in there. So now I can type the word gulp style hit enter. And I'll open our build folder right here and gulp is telling us we have an error and that error is coming from a module post CSS that we don't have here. So what I'm going to do is just come here and say npm install dash dash save dash dev because we just need it for the development. And I'm going to say we need to install post CSS. So I'll hit enter and wait for the installation to happen. And that does it. So now when I type gulp style and hit enter, you're going to see that our style is actually building. And if we look here inside our build file, you're going to see that we now have a new file called style dot CSS. It's minified very well for us because we're using the post CSS. But above all, you'll see that all the styles that we added in here are now being thrown out correctly. So this minified version of CSS actually helps us to have a performance style sheet in comparison to what we had before. So if I go back to my post CSS and then I just remove this particular command of piping the post CSS and then just leave only the source coming in and then building it and hit save. If I come back here and run our gulp style again, you're going to see that if we go to the style dot CSS, you'll see that our CSS is actually not minified, but we are having it coming out well compiled as it should be. So if you prefer not to compile, then don't add the post CSS stuff. Don't add post CSS. Don't add CSS nano to minify your particular file. And you can actually have this on separate lines because JavaScript doesn't really care about the spaces that you have inside your instructions so that you can be able to read this easily. So you know your piping CSS to do the SAS compilation. You have the post CSS coming in here to minify and then you have the destination to push that into the file that is coming out right here. So if you are enjoying this, don't forget to hit the thumbs up on the video. Don't forget to hit subscribe in order not to miss out on any of the upcoming videos. Now that we have our SAS being compiled, every time we add some new content to our SAS file, let's say we are going to move some of these other fields inside here. So let me move this right here and save. You'll actually realize that we do not have anything happening inside our style. It's not being compiled. We do not have that working the way it should be. So in order to add another process to automatically watch for our SAS and compile it to what it should be, all we need to do is we're going to come back here and I'm going to write a new function which I'm going to call watch. So I'll come here and write a function. And the function we're going to call it watch and add our opening brackets and our closing as well. And then I'll come in here. And the first thing that I'll do is I'll duplicate this and say we're going to have a new function called watch. I'll reduce this so that we have more real estate. So we've exported our watch function and now we need to write it to see what it should be doing. So we're going to type gulp.watch and that's a function. And inside watch, we want to say, let us watch for any of the files. So I'm going to copy this and say, let us watch for any of the SAS files that are added inside this SCSS folder. And what we want to do is now we want to add the style function to them. We're going to combat them from SAS into SCSS we shall minify them and then we shall throw them out on the other end. So I'll save this and you're going to see that when I go to my terminal and then I run gulp watch and hit enter it's now going to convert our SAS into CSS and it's going to keep on watching. It's not going to stop. So it's converting that if I come here and open a new file and I'll call it techie.scss and then I write something like maybe we're going to say everything you will see that it automatically compiles our techie into techie.css even before I start writing any other commands in here. So it's actively watching for any new files any changes the moment those are saved then it will make its compilation from SAS into CSS. I'm going to just delete this because we don't need it it will be an overhead over our file but if I look into the style.css you'll see that it has already converted this and then it has output the file with the rules as they should be. So in the next section of this video I'm going to show you how we can actually use TypeScript from our JavaScript and then compile it into JavaScript and then enjoy the benefits that TypeScript gives us in our JavaScript file. So in our build process right here I'm going to open a new folder which I'm going to call TS for TypeScript and I'm going to move our main.js inside that file. Now I'll rename this file into main.ts to show that it's a TypeScript file and automatically you start seeing TypeScript shouting at you and letting you know that there are particular things inside your file that I do not understand that probably should not even be there. So that's one of the benefits of TypeScript just telling you that there are a number of things that I see and there are problems and you need to fix them quickly. So for now I'm going to just remove everything that we have in here and I'm going to console.log and I'm going to console.log a variable called wording and when I save you'll see TypeScript is already telling me there is this wording that I do not understand. It's a variable you have but you've not defined it so in here I can actually come and say const wording and you can see TypeScript is helping me show that that's available. I'll say it's equal to and I'm going to say my wording is running dot dot dot and then I'll put a semicolon and you'll see that we no longer have any issues in here. If I had gone with JavaScript alone and didn't have this wording defined I could have had issues in production. Now TypeScript allows you to see some of those things way before you actually take your code to production so you can fix some of those bugs. It has much more powerful usage rather than just defining variables. So if you already know what TypeScript is about let's continue the video. If you do not know what TypeScript is let me know whether you'd be interested in a video about TypeScript and I'll be able to make one for you and help you see the benefits that come with TypeScript. So after adding our TypeScript the browser does not understand TypeScript and what it is so it needs to be able to see something like JavaScript. So we are going to use our gull yet again here to help us to convert our TypeScript into JavaScript and the way we do that is I'll close all the other files and then I'll just open the gull file so that we can work with it because that's where we're going to add our rules for TypeScript but in here at the root folder we're actually going to have a new file which I'm going to call tsconfig.json and that's going to help us with our TypeScript. Now this JSON file is actually going to have a couple of rules JSON file is going to need those brackets to start off with and inside here we're going to write a number of rules for example the first rule we shall do is come in here and say we want to add the compile options and those compile options what we are looking for is we want to get the target and you can see since VS Code is actually made up of TypeScript it's built in JavaScript it's already picking whatever we need and then throwing and giving us a hint of whatever we need to write I'm going to change this to ES5 because what we want at the end of the day is to compile our TypeScript into JavaScript that can be read by the browser so I'll have ES5 as our target and I'm going to say please allow please allow JavaScript and I'll say that should equal to true so we should be able to write ordinary JavaScript and then we should say the declaration that we're going to have is going to be false and then I'll say we need to have our output directory and what we want to do is we want to add that to assets and we want to add it into our builds folder right here and we want to add it inside the JavaScript folder so you can choose your structure the way you want it to after our output directory we want to have our library I'll hit enter and that's going to be an array of options we're going to say we want to write ES7 and then we should be able to also bring in the DOM and after getting in the DOM the next thing that we want to do is actually come out of this loop add a comma and we want to say please include want to include and we shall use array brackets and we want you to include the files which are under assets and we want you to get the TypeScript folder right in here and we're going to hit save right here for our TS config folder and we have an error here TypeScript is already screaming at us this include should not be under the compiler options rather it should be outside of them and then when I click save after adding our comma right here you'll see that TypeScript stops screaming at us and now we know that we are doing the right thing so after adding our TS config file in here the JSON we're going to come back to our gulp file because we want to use gulp we also convert our TypeScript we want to be able to watch those files so that we can be able to make changes over and over again so in our gulp file the first thing we want to do is we want to be able to import gulp we want to import gulp TypeScript so I'm going to just change this right here and say TypeScript and you're going to realize that this is greyed out because our VS code TypeScript is recognizing that we don't have this file imported anywhere so I have to come back into our command line here I'll break out of this watch instance and I'm going to say npm install dash dash save dash dev because we want it as a dev dependency and we're going to say gulp type script I'll hit enter and that will install our gulp TypeScript and now that we have that package installed for us I'll come down here and I'm going to say let our TypeScript project I'll reduce this so that we can have more real estate our TS project right here is actually going to equal to what we have here as TypeScript so I'll type TypeScript and I'm going to say dot and we're going to say create project and in that we're going to say the declaration should actually be false we're just emphasizing what we already wrote in our TS config file and we're going to say let's write a new function down here and say the function is actually going to be TS short for TypeScript and then I'll add our curly brackets in here I'll add TScript in here so that it can be a little bit better to understand what's going on so inside that I'm going to inside this function I'm just going to I'm going to return and what I want to do here is bring in gulp and say gulp should get the source and that is basically the files that we are looking for and we're going to say go to the root folder look for the assets folder and then inside there you're going to look for the TypeScript and you're going to look for all TypeScript instances all TypeScript files so after doing that we want you to pipe so we are telling it to pipe after getting all the TypeScript files you should be able to get the TypeScript project in here as a function and run it so basically saying there should be no declaration in our TypeScript and then after doing that you should be able to pipe and what we want you to do is we want you to get gulp again and then you're going to get the destination folder and we want to send our files from where they are here in TypeScript and we are going to send them inside the assets folder inside the build location and we want them to be inside the JavaScript folder so I'll put slash js so that we are going into the build and then we'll get the js folder in there so the last thing that I'll do here is duplicate this so that we can change this and say this is going to equal to T script because we want to export that T script function and what I'm going to do is come back here inside our watch function I'll duplicate this and I'll say we want you to watch this TypeScript folder so I'll copy this and say whenever you go into the assets into the TypeScript folder look for any TypeScript file we want you to run the T script function at the end of the day so I'm going to save that so let's check our terminal in here I'll clear my terminal just to make sure that we are doing the right thing so I'm going to go to npm install dash dash save dash dev and then I'm going to install TypeScript I'll hit enter that will allow our project to have the dev install of TypeScript and then now we can be able to run gulp watch I'll hit enter and now you can see that it's watching for both the files so what I'm going to do here is going to change wording into coding I'll save this and you'll see that it runs our T script function in our build folder you're going to see we have a new js file and you're going to see that we have main.js and you can actually see this in es5 you can see that we are writing this properly and if I do anything in our sas files right here let's say hit space enter save you'll see that it runs the style because it's watching for the sas files so whatever you do here if you make changes to your TypeScript it will run the TS script if you make changes to your sas files it will then run the style function if you enjoyed this video don't forget to give it a thumbs up I hope this was really helpful to help you do your TypeScript and your sas in your projects feel free to fork the project and add it to your own code don't forget to share this with your friends who are struggling to get TypeScript and sas into their projects and subscribe to the channel for any new videos that will be coming otherwise enjoy whatever you're coding