Gulp v4 - Sass and BrowserSync setup

in this video we're gonna be doing is looking at how we can use gulp to juice something like this so I have an s CSS file here colors firebreak let's change it over to a purple I'll hit save here without doing anything else it has refreshed or I can come over to my index I can come in and do an h2 and do how are you doing hit save and again without touching anything else you can see it is updated here by itself so all of this is automatically updating I don't have to worry about anything it's compiling my CSS it's updating the browser and everything is awesome so in this video we're going to be seeing exactly how to set all of this up and to be used as a starter file for all your projects so you're only doing this once and then you're just reusing it from one project to the next so the initial setup of it is a little bit long but it's not that bad and then you don't you're done you don't have to keep doing it over and over again it's something you could build on and definitely improve from here but this is a nice starting place so to get started the first thing I'm going to do is just on my desktop make a new folder and we're gonna call this starter project starter project and right away you can just open that up with vs code which is what I'm using so I can just right click on there and choose open with code but if you have a different editor that you're using that's perfectly fine alright and now once you're in here and you're ready to go I'm gonna create a few different files I'm using vs code so I can do it all here but you can create your files however you like so I'm gonna create a new file and I'm just gonna make an index dot HTML and in here we're not gonna have much but using Emmet which comes whoops don't need to update right now I'm gonna do an exclamation mark and then you should see I'm add abbreviation and I can just do tab and it gives me the basic sort of boilerplate here and we can just do project name goes here and I'm going to create a link right away to a CSS file so I'm going to do link and push tab and then I can just write CSS slash we'll call it styles dot CSS and we can save that file and we're ready to go one thing you might notice when I save I am using a prettier so sometimes some stuff might jump around little bit when I hit save so just a quick note I've made a CSS file I'm not actually a link here to a CSS file but I'm never actually gonna make a CSS file in my starter project here and you'll see why once we get to that eventually so with that done I'm gonna come up here and I'm gonna go to new folder and I'm gonna put in as CSS and I'm gonna hit enter and now if you prefer to have a source folder where you're keeping all of sort of your production stuff you can also do that we have a source and then your s CSS folders in there if you're using sass you could also have it just as regular si SS whatever you want to put in there and now we're pretty much ready to go and do a bit more setup now one thing we're gonna be going into the command line for this as you saw in the intro and we really need something called node and NPM so you can check if you have them installed now I'm using a vs code so if I push commit if I push controller if you're on a Mac command and backtick you should get a terminal that's gonna pop up like this if you want you can use this one if you prefer a terminal that's on your computer you can go for it you can use the default one that comes on a Mac on a if you're not using vs code and you don't have a built in terminal like this I would suggest and you're on a Windows computer I would strongly suggest commander which is right here at CMD er net I'll also put a link to this in the description below it just makes life a little bit better if you're on Windows then using the default stuff or PowerShell but with vs code we can work directly in here which sometimes makes your life a little bit easier so what I'm going to do is here you can check to see if you already have these installed so I can do node and then - V and see what version of node I'm on and I can also read NPM and - V if you want but if you have node you'll have NPN you can see the two versions that you have of those if they're not up-to-date I usually want to be somewhat up-to-date just because they will fix security things and all of that or if you don't have it you might get something saying it's not installed it's easy enough you just have to go to node.js org make sure it's org and you can download the most recent version it just opened you know it's an X next next to installer and then it's installed on your computer once it's installed you should be able to write in node V and it should tell you the version that you have so you if you're watching this in the future this might be updated from what we have here but that's fine this so now what we're gonna want to do is install gulp but what I'm gonna recommend is just to install the gulp CLI for now because you can have gulp in your project but if it's not if you don't have the gall to CLI you can never run anything and it's kind of useless so what we're going to do is write npm install gulp CLI and we're gonna add in a - G which stands you can write global like that or you can just do a - G and what that means is it's installing it globally on your computer so I'm gonna hit return on that and it should install go CLI now this sometimes can take a while so you might want to sit back and relax and I already had the gulp CLI installed but you can see it it actually is going and installing it again so there we go I am now I can write in gulp - V and it will tell me and here we can see I'm on two point zero point one but by putting gulp V here it's going to tell me that we're on the it should give us the same thing there we go CLI version 2.0 point one we're gonna be typing a few things so I'm going to again do an NPM arts to clear just be rid of all that other stuff and now we want to write in NPM unit and this is going to initialize things within this individual project so I'm gonna do it in it and it's gonna ask us a whole bunch of questions now and it should pop up in a second there we go um so if you want to quit it any time it's always ctrl or command to see package name so you want to give it a name I called it start project I meant to call it starter project but I'm just gonna hit return version one that's fine description starter project or new projects you don't even have to put a description if you don't want to return Cheska man we don't need get if you want to give it a git repository you can keywords if you want to author I'll put my name in here but yours if you want cuz I'll put an MIT license on here so it's anybody can do what they want with it and it's gonna ask you if it's okay you can just hit return and you'll see it made a package.json file so I'm gonna click on that package JSON file and see what it is and it's all the information that we just gave it when we did our NPM in it so that's awesome I'm gonna come back down to here and I'm gonna write clear just so we can get back to this let's move this up just a little bit not that we need to but so now we want to install the other things we need so we have NPM is initialized in here it's going to keep track of everything we need and I'm gonna write npm install and I'm gonna to hyphens and write save dev what the SAF dev is doing it's telling it that this is used for development purposes and it's different tools are gonna be using in your development environment and not things that need to go to your live site so the first thing we write is gulp and I know we already installed the gulp CLI but this is going to install it locally within this project which is something we need the other thing we're going to want is whoops not help we're gonna want gulp SAS and we're gonna want our browser brow you gotta spell things right browser sync now you couldn't install all of these separately and do a save for you know install save dev save dev gulps a so if you forgot one of them there's no problem you can add it to the project after yeah so it shouldn't cause any issue whatsoever so let's hit return and this could take a little while so but you'll see it's gonna pop up in a second here so you can see it's starting to install now and I'm just warning you that this possibly could take a little while to install depending on your network connection in your computer and just everything that it will be installing all right so mine just finished but it did take a while so I'm just a word of warning it's possible that does take quite a bit so you might want to go get a cup of coffee while that's happening in the meantime though you'll notice here I had a few warnings cuz it skipped a few optional dependencies as long as you have warnings and no errors you're good and it's NPM also checks for vulnerabilities and packages now because even though I only installed three things it you know it took a lot longer it actually installed 597 packages so it's kind of cool that NPM will check for vulnerabilities in those packages because all of the three that I installed they all rely on other things as well so what that's done is you'll see it's automatically updated my package JSON file to say dev dependencies and it's added those right here including the version number and if I go and look you'll see a node modules folder and you never have to come in here but if you wanted to you can see all the stuff that I just installed into your folder right there so now we're ready to go someone right in clear and we can start getting to work now and actually I don't think we need the terminal for a little bit now so I'm going to close that down and I'm going to come back up to my project here and I make a new file just make sure this is in your root folder and I'm going to call this gulp file J s called file dot yes just like that and this is where we can control what gulp is going to do so remember gulp is a build tool this is where most of the stuff in this video that we're going to be doing is so we have to tell it what it's going to be doing pretty much and what we need for it yes I'm going to come into here and write Const gulp and you might see other tutorials that use var worrying JavaScript so Const is es6 it's just it's like a variable and I'm not getting it too too much into that right now but I'm gonna take a gulp and we write require gulp and we also want to have a the next thing we want to do is Const we're just going to list out all the things that we said so we want a sass and it's going to be whoops sass is require gulp sass and we're writing the name the same way here that we wrote it when we were doing our install just before and the last one we knew is Const sync is equal to require you guessed it browser and a memory browser singer this way because when we did the npm install remember that's how we wrote it so just like that one thing it's a little bit different with the browser sync is we also have to add in a create here at the end so create like that and I'll hit save on that file and now we can start actually writing some stuff so the first thing we want to do is we want to compile a CSS into CSS so how are we going to do that if you're coming from previous versions of gulp you would have been doing gulp task and creating tasks for gulp to do but with version 4 we don't do that anymore we write functions now so I'm going to write a function and I'm going to generate style because I am going to be you know it's to create my style sheet and we can go ahead and in this style function there's three things we want to compile csrs CSS into CSS but there's actually three steps that this is going to take so the first thing we need to do is where is my a CSS file or find my CSS file then we want to take we want to pass that file through the sass compiler and the third thing that we want to do is then where do I save the come be compiled CSS so we need to go through all three of those so where is my sass file to do this I'm going to start off by writing read turn and I'm gonna write gulp dot SRC so source and I want to tell it where my sass file is going to be so I'm gonna do a dot and so it's it means this would be useful if in this case it's gonna work good say you had a source folder and then inside your source folder you have your s CSS so you know we're sticking within we're sticking within like the local folder s CSS we want to go into our and this is the you might see other ways of writing this but this is sort of gonna cover all bases it's going to look inside my CSS folder and it's going to look for any folder inside of there that has an S CSS file it's also going to compile if there's you know if I just have a main SCSS that's hanging out in there it's going to compile that too so this takes care of any s CSS file that's in there if you're doing regular sass instead of s CSS you can you know you probably have it set up like that instead so that's going to return that so that's it's found the source for my whoops s CSS so it's found the source for my s CSS files now we want to pass that through the compiler so I'm going to do a doctype and technically this could all come here dot pipe and then we could just keep writing in a big long string but for me it's easier to do it this way you'll notice there's no semicolon here I'm not ending this line because the dot pipe this just a bunch of empty space but as I said it could go up there so dot pipe and this is just increased readability really and sass so once we've found our CSS file we want to pass it through our sass right here and then where do we want it to get compiled to so I'll add a dot pipe and then here where we want to go so it's gulp and before we add source and then we have dust which is destination and we'll do it just like that and you know if you have somewhere else you want to save your file off to you can set that up however you want and that will end there but one thing it's also different with gulp for if you're used to the other versions of it is now you're gonna wanna do exports style is equal to style and this is what's gonna let you run it in gulp afterwards when we're ready to start you know what once we're ready to start using it so actually right now this is going to work so let's go and test it out I'm gonna come into my let's just save this and then I'm going to come into my S CSS folder and then in there I'm gonna make a new file called Styles got a CSS and before I do anything I'm gonna bring my terminal back up and because we've set up our gulp file with our export Styles here what I can do is I can type in gulp and style and hit return and that should work hopefully we have no errors so you can see it's starting it started my thing and started it finished and it actually made a CSS folder all in its own so it created that and if I go and look it should have a Styles SCS style.css and if I look in there there's nothing but if I come over to here and I write now I'll say body color is red and I save that and I hit return and you can see that it ran it worked again and I can come back over here to my Styles dot CSS and it's look at that I have some CSS in there so that's nice and handy but let's go and open up and actually I'm going to change this to my background just because it's gonna make it better for demo purposes and hit save and I'm gonna go and open my index here the problem that comes up now let's add a little bit of texture so we can actually style something as well so say I have my an h1 whoops and you know low save that and then let's come over to my s CSS file here and I my background read so let's just change color red let's make this say color let's say I color white and background background will do firebrick it's a little bit darker of a red so it probably won't be as offensive on the eyes so I'm gonna save that file and then I'd have to come down here and then after once again right call style in and if you just push up on your keyboard when you're in your terminal it will put the last line that you used and now if I come and refresh here we should get the styling and whoops I didn't save over here save that fresh and I have my text and everything is working except it's kind of and you might see a bit of a long time stamp difference there let's delay it a little bit while I was recording so this is working good but it's kind of annoying that we have to do the change we have to come down all right go up style then we have to come over here and refresh the page we don't want to be doing all that and that's what we can be using browsersync for which we haven't set up at all yet so browser sync actually requires setting up something in here as well as doing its own function so I'm gonna add the stream in right now and what this will put a comment for it because we've been commenting along and so whoops will do for stream changes to all browsers because browser sync allows you to synchronize between different browsers so you can have the project opened on your phone as well as your browser and they're all sort of synchronized together so this is making sure it's synchronizing it across everything's we're going to do another pipe and then we can iterate in browser sync and browser sync it's gonna be browser sync stream and then we just need just like that and say - that's it for what we're gonna be doing with our style now this doesn't actually get anything to live refresh or anything like that this is just used to once our CSS is written that it will stream it to all of our different browsers what we do need to do is come in and make a new function and we're going to call this function watch yeah because what this is going to do is it's actually going to watch for changes and update things automatically for us so in this watch here what we're going to do is do browsersync units or an initialized browsersync so in the unit here we need to put in curly braces as well and what we want to do inside of there let me just scroll down so we can focus on it a bit better we want to set up the server so runner it in server because this is going to launch a server for us and more curly braces and here we're gonna write in face dear not dear dear and the base dear will be where your base directory so i'm guessing you're gonna want that but if ever you need to set it up to be somewhere else by all means you can't so let's save that um you could also at this point instead of having it just set up this is gonna will see what that's gonna do and we can change what the port is and there's other options you can use but you can also set it up for like a proxy so it's your local dev you know dev or something like that which a lot of people like to do but i'm gonna leave it like it is um so what this is gonna do is now browser sinks gonna be working it's gonna fire up the server for us but we need it to actually be doing stuff right so we want to watch for changes so if we were just wearing about saw sass well or start with the sass one anyway so called dot watch and we're telling gulp to watch some places so we're gonna go to our base year so we're gonna go to our s CSS just like we did before we're going to look for any change on absolutely any s CSS file and when this happens I'm going a comma so I'm putting in what I want to watch and then I'm putting comma and my rights style and the reason I'm writing style is because when anything changes what I wanted to do is actually come up and run this function where it's going to compile that for us automatically which obviously can come in handy the next thing we also want to do though because I'm assuming that you're also working on HTML files so we can have it look for those two so we can do dot forward slash and then just do a star HTML dot HTML if you have if you like having like a different structure it could be useful to set it up so you know you could put in the same if you have HTML files that are sort of tucked away in folders that you could use the same globbing there and then on this one's a bit different because we want to on change and browser sync reload the difference here is when you make a change to the HTML we actually want it to fully really want the browser to refresh what this dream is going to allow is it's going to actually update the CSS without the page completely refreshing which is really handy and really nice you don't have the full page doing a complete refresh every time you change your CSS but for the HTML we need that and since I'm just going to assume that you're using javascript we can also and in this case actually let's steal this copy that and but here we could do ajs and of course this should point to where your j/s and everything is so if your folder file structures a little bit different you might have to make some modifications here and then the same thing as before on change we want a browser saying reload and the last thing we have to do just like we had to with our style here we need to setup an export so I'm going to do an exports watch is equal to watch and we'll hit save on that so with all that setup I'm gonna come down to here and I'm just gonna do a clear so we can be nice and fresh and I'm gonna write in a gulp watch and hit return it takes a second to fire up just like when you're using your gulp if you're following along you're doing gulp style you saw it it said it was running really fast but it sometimes takes a little bit of time to actually fire up but once it goes oh and I got an error on mine cuz I misspelled a browser sync and just so you can see where I got that error here it's a doodoo Jew here reference error browser Rose over however you pronounce that sync is not defined because I was using something that didn't exist whoops so let's do a clear on that I'll save this file again now that I've fixed the browser sync and let's try that again oops not it clear gulp watch and so now you can see it is watching and actually it opened up on a tab that you can't see so I'll bring that tab in but project name goes here so you can see it is running off low three thousand which would automatically opened up so when this pops up it should automatically open your browser and it does give you an external URL as well so say you're on a phone that's on the same network you can open it up following that address and it should work no problem at all as long as you're on the same network there's also a user interface if ever you want to make changes and you can check those out too I'm not gonna get into that in this video and so now if I come over to my Styles SCSS we should be able to make a change here so let's change this firebrick color to oops sorry something darker and I'm gonna hit save and you can see right away it noticed it and oh and look at that it updated here all on its own and you notice the page didn't actually refresh which is really cool so let's actually give my body a height height of 400 viewport height just to make it really tall for a second because this is one of the things I love about this so if I scroll down and then I let's just change the color here again so let's just change it to a purple and hit save and when it refreshes its not going like when you refresh your page usually it's gonna jump all the way back up to the top so it's not doing that it's actually staying where you are which is really nice if you're working on a certain section of your website and working on the Styles if I come over to my index line I add some more text here h2 hello or let's just say h2 browser sink rocks and I hit save and now it's actually gonna refresh the whole page you can see that it's reloading right now it left me where I was but anyway it has to refresh the page which can take a little bit longer but you can see automatically there so you wanted to spell it rocks like that and they hit save you know it refreshes the page by itself updates it there so now you don't have to refresh your page anymore and your sass is being compiled for you so that's really nice and handy and of course as we set it up here to also be working with JavaScript so if you're making changes to your JavaScript it will refresh the page automatically as well one thing I haven't tested it's what we know it's compiling or sass but just for fun if I come in and put say color red and then here we put in color it should switch all that there we go over to red so I know that everything is working properly once you're done with this and once it's set up and there's a lot of other things you can add with gulp these are only two of them you can get autoprefixer and many many other things there's also post CSS if you're into more stuff which autoprefixer can be a part of so depending you can look into it and see all the really cool stuff documentation on it it's kind of weird but you can figure it out pretty fast the only thing is a lot of it's written for the older version of gulp and it's not written for using this so if you see gulp task just switch out the gulp task or something it looks like this and then all this stuff inside should work pretty much exactly the same as what we see here there's one final thing that I almost forgot along the way here that I just noticed em right before we finish up its here we're piping the sass and running it right now if you make a mistake in your sass which is perfectly normal and it happens to the best of us we're you know say something like that you're gonna get an error but you'll see that we're getting a whole bunch of stuff in here so there's a whole I mean we can figure out what the error is but it sort of repeats itself a whole bunch of times and it's a little bit messy and yeah it's just not great and and then you get an eventually you can figure out what it is it's not the worst thing in the world but so let's fix that and hit save so it's still working everything is still running but I'm actually going to do a command C on here to terminate because what I want to do is here on our pipe sass what we can do is also have an on error so when there's an error we want it to SAS log error so I'm gonna save someone to save my gulp file here and then I'm gonna do another gulp watch and now if I have the misfortune of making an error on something here so do the same mistakes before you can see it's a lot more succinct this is assessing the Mist it's doing exactly it's only giving me the exact error message that I want and nothing else which is a lot better so it's saying where the the problem is so it's in my Styles SCSS you normally you'd have a whole bunch of partials so you could find out which one it's in what line it's in and exactly what you want and no extra other information in your error here so that's nice and handy so I'm gonna fix that I'm actually going to delete you and delete you because we want to set up our file as our actual starter file so there shouldn't be too much going in here this is just sort of like a tester at the beginning I'm actually going to come over to my CSS folder here and I'm gonna delete it so move to recycling bin and actually we can come down here and we can stop watching all our files as well and we have everything we need here as our sort of our starter so there's nothing extra in here there's no actual CSS or anything so if i refresh that it should disappear because there's no CSS file all right can't even can't reach the host because the host doesn't exist but if I would open up the page and we would have a just a blank file and now I can use this as a starter file so anytime I'd need a new project whether this is on my desktop like I currently have it so I could just take this wherever it is and I could copy it make a copy of it rename that new file and that would become my new starter now that's gonna take a while to do because it is a big it's bigger than you might think just because of the NPM package that we do have and it's going really slow for some reason or you could have it up on github and just clone it down every time you need to make a new project or whatever you however you feel comfortable working with that I'm gonna cancel this because I don't need it right now but that would become your sort of starter project and or starter file so you never have to actually do this every time because this setup of it is a little bit long but once it's set up you're ready to go you do your gulp watch and boom your project is off and running and you're good to go and there you have it that is everything for this video so I hope you liked it I hope you learned something along the way and you can really take through this and really build onto and add a whole bunch of other stuff like I've mentioned previously things like autoprefixer if you don't want a gem at a post CSS and you can really build this up over time also if you're new to using gulp or that build system like this which can be a lot of fun so I hope you liked the video if you did don't be scared to share it let other people know about it also hit the thumbs up to let me know that you liked it leave a comment down below or even better come and join us over at the community and say hi over there let me know about the video if you have any problems of the video it's much easier to troubleshoot stuff over there than it is here the community is a discord server that's free to access there's a link to it down in the description below so come on and come hang out with us over there a big THANK YOU to my patrons for helping support this channel if you don't know about patreon it's a place where you can help support creators who make content that you find valuable so a really big thank you to my current patrons who are there and I really appreciate it and a massive big shout out to my supporter of awesome Lauren or just for being well my supporter of awesome thank you so much once again I hope you like this video and until next week don't forget to make your in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 67,953

Rating: 4.9709792 out of 5

Keywords: Kevin Powell, tutorial, html, css, gulp, gulp sass, gulp browsersync, gulp v4, gulp 4, gulp 4 sass, gulp 4 browsersync

Id: QgMQeLymAdU

Length: 29min 29sec (1769 seconds)

Published: Wed Feb 20 2019