Gulp 4 Crash Course for Beginners

hey everybody in today's tutorial I'm going to show you how you can use gulp for in your website workflow gulp is a great tool that you can use to compile your sass and your JavaScript files and the best part is once you set it up and you save all your settings in a gulp file you can simply reuse that file in all your future website projects sound good let's get into it so to start working with gulp the first thing you need to do is to make sure that you have node installed on your computer if you don't have it you can easily go to node.js org and install whichever version you need for your operating system once you have that installed and we can start setting up gulp ok so let's go to our code editor here I'm using vs code for my editor and what I have open is just kind of an empty folder just has an index.html file but let's just go down to this terminal section here and the first thing we want to do now is to install the gulp CLI the command-line utility and we're going to install that globally on our computer and it's called gulp - Co I and what gulp CLI does is it allows you to run gulp commands on your command line also if you need to use different versions of gulp in different website projects you can kind of manage all those as well so it's pretty handy to have okay once gulps installed we want to add our package JSON file so we can install all the other NPM packages that we need so to do that we'll just do NPM on it and I do - why so it answers yes to all the questions and then we have our just kind of simple package JSON file alright now let's install all the different packages that we want we can install multiple packages at the same time so we're gonna run NPM install save dev so each package will be saved as a dev dependency in our package Jason and we'll add all the packages here so we'll start out with gulp because we need gulp of course then we'll do gulp SAS that will be the actual one that compiles your SAS to CSS files go source maps which will map your CSS file your CSS styles back to your original SAS file so you can find it easier and then we'll run will add post CSS post CSS which in conjunction with other plugins like Auto free fixer and CSS Nano will run different things on your CSS files autoprefixer as the vendor prefixes to your CSS and then CSS Nano simply minifides your CSS files then we're going to add our JavaScript packages so we want gulp concat to concatenate or combine your JavaScript files into one then we want gulp uglify to minify your javascript files and then lastly we're going to use a plug-in called gulp replace and we'll use that to add a query string in our index.html file to help with cache busting so we got all those added and let's install those okay everything's been added and you can see in the package JSON file all these different packages are now listed okay now that our modules are added let's put them to work in our gulp file so we're going to go back to our code editor here and create a new file called gulp file jeaious and in this file we're going to add in all the tasks that we're going to be running in gulp let's start out in our gulp file by adding in all these different things that we want to do so up at the top we want to kind of import all the NPM packages as modules so we'll up here we'll initialize the modules then after that we're going to add in some variables this is so we don't need to keep retyping the same thing over and over I feel that we're gonna run all our different gulp tasks so we'll have our sass task to compile our sass files JavaScript tests you can catenate and minify our JavaScript files then we want our cache busting task so you don't need to clear your cache every time you make a CSS or JavaScript change then I feel that we're gonna do a watch task and what that means is that once you run gulp you will be able to it'll automatically be able to detect any changes you make to your files and it'll automatically rebuild everything so you don't need to type in the gulp command every time you make a single change then after that at the bottom we're going to have our default task and this is kind of the main gulp task that when you type it into the command line it'll run everything for you so these are the different parts that we're going to have in our gulp file ok let's just start at the top and move our way down so the first thing we're going to do is initialize modules and what this step is doing is essentially we are importing and let me just move that over there so we can see both we're importing the NPM packages that we installed as variables in our goal file and that lets us access all the functions and everything associated with those packages so we'll create a constant and we'll just kind of start from the top autoprefixer equals the choir auto prefix err so it's it's a little bit tedious but we just need to add in everything like this so then I'll CSS Nano ok that's all done and one actually one other thing we're going to do is for gulp we're going to actually explicitly import each of the actual gulp functions that we need to use so that way for example there's a function called source so instead of having to type gulp dot source we can just type source if we import them explicitly but honestly this is really just save preferencing it's up to you what you'd like to do you know you're gonna have to type it in somewhere so we have all our sort of standard gulp functions that we were using you know source destination watch and then series and parallel are two new ones that you may not have seen before if you haven't used before yet they are used in creating the tasks that we're running later on and you'll see the new syntax and I'll go through all that but for now these are all the different packages that we're going to be using in our tasks next up we're going to create some variables that we can reuse in the scope file so we'll add another constant and we're gonna make more than one variable so I'm actually going to add a little array here and we're going to save our paths as variables so you want are a CSS path and i'll show you this a bit later but we're gonna have an app folder with an S CSS subfolder and then we're gonna add a little glob here in case we create any more subfolders and then that's going to be any file that ends in s CSS and we'll do the similar thing for our JavaScript path here it'll be an app J s the glob and dot J s any J's file so this is helpful because then you don't need to keep rewriting stuff okay now for the fun part let's create our first task so we're gonna do we're gonna create our sass task here and we're going to do that by creating a function called s CSS task yes very creative I know and the first thing we want to do is we're gonna add a return statement here and then we're going to sort of one by one add in every step of this task that we want to use the first one is source because we need to tell gulp where to find our sass files and in the source we're going to add that new variable files s CSS path so and knows where to find our sass files and after that every successive step we're going to use the pipe function that gulp lets you that gulp has to let you add on multiple steps new tasks so after the source we want to first initialize our source maps and you want to do that before you run your sass your sass function so after source maps are initialized we're going to add another pipe and then compile our sass files as two CSS files then after that we're going to run the other plugins autoprefixer as well as the CSS nano and those are run under post CSS so we'll add our post CSS here then we're going to run autoprefixer as well as CSS nano so then our files will have the proper vendor prefixes as well as get minified so after this step we essentially have created the CSS file that we wanted so we can then finish our source maps and write the actual source Maps file and we just want to keep it in the same directory so we'll do that and then after that we're going to take all our final files and set the destination of them so what we want to do is we're going to create a dist folder and that's what we're going to keep all our final CSS and JavaScript files so that is done oops that is done here and I'm just gonna indent it that way and that's our sass task so we're going to use the same basic steps for a JavaScript task as well so we'll say function will just call this J s task and then we're going to do the same thing at a little return statement and then we're going to add in all the different parts of this that we need so source again we'll use our files J s path for a source and then we will add a oh is that right I think I did something wrong here there we go well add a pipe and then after we get our JavaScript files we want to concatenate you know if we have multiple files into one so we'll use our concat and then in the concat we are going to write in the final file name that we want so it's going to be all jeaious you can name it whatever you want then after that we will do Uggla Phi and then there's not as many steps with our JavaScript as we had with our sass but at the end we'll do again the destination set as the dist folder so there we have our main tasks alright for a cache busting task let's go through what exactly we want to happen so in our index.html file let me open that here we have our CSS reference up at the top and then at the bottom of the file we have our JavaScript reference and you can see that I've already kind of added this query string of C B equals one two three four both of those the reason that we want that is that your browser will automatically cache or locally save file assets such as CSS files JavaScript files and images things like that and one downside of that is that if you make a CSS or JavaScript change and you push it up to your website and you reload it in the browser it will not the browser won't automatically load the new version of the file unless something's changed or you sort of tell it to not cache so one way that you can kind of get around that is by adding a query string and if the query string changes the browser sort of assumes that that's a new file so they'll reload they'll refresh the file from the server so the way that cache busting works is that we're going to have this number string one two three and every time we run gulp we want that string to change to some different number you can make it a random number and what we're going to do is we're going to change it to a number based on the current time in milliseconds so it'll be kind of like this long number string so let's go back to a goat file and kind of make that happen so for a cache busting task we're gonna do the same thing we did before create a function will call this cache bus task and then we're going to have a return statement and add a source value of index.html because that's the file that we want to affect so once we have our index.html file we're going to use after we add the pipe we're going to use the gulp replace plug-in and that plug-in basically lets you find a certain string and then replace that string with a different string so we'll say replace and then what we want to do is we want to find anything that says see B equals any number so it could be one two three could be any kind of number and to kind of have that sort of conditional ability we need to use regular expressions or regex so to denote a regex string you start with a slash and then I want to add in what we're looking for so we're looking for something that starts with C V equals and then any number and the way you can type that in is you do backslash D and that will search for any one any one number it's like one digit of a number but because we want the number to be you know any a long number of digits we're also going to add a + /g for global so that means that it'll kind of look for any number two you know kind of an nth number of digits and then that's what we're looking for in the first parameter and the second parameter is what we're going to replace it with so we're going to replace it with C B equals and then we're gonna add in our string that we're going to change every time we run gulp we'll just call it variables C B string so after we replace the C B equals whatever number with C B with new number then we'll just do pipe and then the destination of the next I HTML file we want it to stay the same location so we'll just do that and that is our function so then because we created this variable up here we need to create a new one to get the current date so we'll say C B string equals new date and then to format it into the milliseconds we're going to say get time so it says it gets the time value milliseconds so it's gonna end up being this pretty long number and that is our cache busting task okay so we've created our sass task our JavaScript task and now our cache busting task and these three tasks are sort of the main utility tasks that's doing stuff one or gulp the next test we want to do is create our watch task and this is going to monitor files that we want to detect any changes in and then when any changes are made it's going to run these tasks over again so we'll do the same thing we'll create a function will call this watch task and then in the watch task will use the gulp watch function and this watch function takes two two parameters the first one is the files that you want to monitor and the second parameter is the tasks that you want to run if any changes are detected in those files so the two types of files you want to watch are our SAS files and JavaScript files and we'll use that array variable that we created up earlier and we'll detect our files in our SAS path and our JavaScript path so that's the first parameter and then second we want to run the tasks again that we created if any changes are detected so to do this we need to use some new gulp for syntax because any tasks that you run you need to use either series or parallel functions and these are new so what we're going to do is we're going to use the parallel function and that means anything in here is going to be run simultaneously so the tests we want to run are our SAS tasks and our JavaScript tasks and then this means that they'll be run at the same time and that is pretty much our watch task the last thing we want to do is create our default task and this is going to be what gulp does when you just type in gulp on the command line it needs to be publicly accessible to the command line so we're going to use the exports to export our default function so in this default function we're going to use another new function called series so series in parallel are basically our two options for running gulp tasks in gulp for series means as you might imagine just running things one step-by-step parallels of course running things simultaneously so we're gonna use series in this case and the first thing we want in our series is to run these tasks the parallel SAS tasks and JavaScript tasks that we had up here so we're just going to copy and paste that as the first step in our series functions second thing we want to do is we want to run our cache bus task and then we want to run the watch test that we created okay so just to go back over everything when you type in gulp it'll run this default task and in the default task is going to run three things step by step the first thing is it'll run the sass task and JavaScript task at the same time then it'll run our cache busting task and replace that query string in the index.html file and lastly it'll run our watch task and this watch task will continue to run as long as you have the project open and it will detect any changes and then if any changes are detected in these files our sass and JavaScript files it will then run rerun the sass task and the JavaScript task and those are the basic steps of how gulp works so this is pretty much done with we're done with our gulp file now let's go back into our website project and kind of build out the files that we need in order to run gulp and just make sure everything works so if we look at what we had before you might remember that we had this app folder that we wanted to put all our sass and JavaScript files in and then we also ended up using this dist folder as the destination for the final compiled files so we haven't created those yet so let's do that now so in our route we're just going to create a folder called app then we're going to create another folder called dist then in our app folder we're going to create some sub folders so we're going to create one for our sass file and then another one for our JavaScript files and for each of those we're also going to just build out create the files that we need so in our sass folder we'll just say style SCSS and then in a JavaScript folder we'll create a file called script dot jeaious okay so in our sass folder or in our sass file rather let's just add some kind of general styles so that we can you know test things out so one thing I usually do when I'm writing my Styles is you want to set your box sizing property to border box and this just kind of ensures that the the width and height of elements will include any padding that you create so padding's not going to add things in addition to the width we also want to set our font size to a hundred percent and then we want to kind of have every element in the website sort of inherit that box sizing property from the HTML so we'll say box sizing and inherit okay let's create a our body tag our body property I suppose we'll just add some general global padding just to kind of give things some more space it's also had a background color of light gray of some sort and also set our text color - let's just do black keep things simple and then if you remember in our index.html file earlier we I added a google fonts for Roboto so let's add that in as well so font family Roboto and then the Roboto doesn't load for whatever reason and we'll have a fallback we'll just do this on serif and then I also do like a line height I'll just set that kind of globally to add space by default cool um let's see what else we got here okay so I have my body tag I also had a main tag with content so let's just do [Music] main so I think what I'm gonna do is the body the default background colors gonna be great but the main content let's make that white also that's empowering in there too and then let's see what else we got I think that's okay for now I'm really just trying to test things out here so let's go into our script J's file and we'll just add a console.log hello world and then we'll just make sure that that's working cool so we have our files here that are ready for gulp let's see if it works type in gulp on the command line alright looks like everything is working so if we look back it sort of tells you a record of what it did so it's starting default tasks then it's starting the sass tasking javascript tasks at the same time we can see a little timestamp there it finishes the JavaScript and the sass task and then it's running that cache busting task you know just one millisecond after that and then running the watch task so right now the watch task is currently running let's go back into our index.html file see if things changed okay so if you remember we had that see B equals one two three that's now been replaced by you know a long text string referring to the number of milliseconds that we got and the same thing down here and let's see if that page loads when you open it in the browser so let's open a new window here and we're gonna just load the index.html file looks like it has a preview okay and it looks like our Styles have definitely been ported over and they're successfully loading up in here so yeah this is great you can see in the developer tools if we click on an element you can see that it tells you the sass file and the line number that the original style came from so this is super helpful when you have you know a whole bunch of styles and maybe multiple SAS files and you just want to see where something's coming from so you can quickly make any changes let's actually test one more thing we want to make sure that the watch task is actually successfully re running any styles that we have so let's just replace that text color in the body with red and save and you can see when I hit save it did rerun everything um it looks like looks pretty good let's just try this as well we'll just change the background color to black just for the sake of it okay and it's rerunning again let's go back to our website make sure the changes went through we're gonna reload and yeah we got a black background and red text so that's pretty much it I'm just gonna undo these changes here if you like to you can actually check out the code for this I have a github repository called front-end boilerplate so if you go to github.com slash the coder coder I have a repository friend boilerplate and you can see all the files here there's some instructions and I really just made this project for myself to be kind of a set of starter files when I'm making new website projects but you know of course you're more than welcome to check them out you're welcome to clone it and use it for your own projects so I hope you found this gulp 4 tutorial helpful yeah if you like the video feel free to like it or leave a comment below and yeah thanks for tuning in we'll see you next time