Browsersync + Sass + Gulp in 15 minutes

Key Takeaways

anytime i make a gulp video i always get comments from people asking for a browser sync tutorial if you've been one of those people well today's your lucky day because in this video i'm going to show you how to set up browsersync in your gulp workflow and if you're not one of those people and you haven't used browsersync before well here's what it's all about browsersync is a powerful tool that makes it easy to test your website while you're building it it works by spinning up a local server and syncing it up to your browser then anytime you make changes in your code editor it'll reload the browser automatically to update it in real time you won't have to keep manually reloading every 10 seconds anymore because we're all about efficiency over here and those seconds are precious all right now to start off we want to make sure that we have node and npm installed on our computer so i have the project files open in my code editor vs code and if we go down to the terminal window we can check if we have node installed by typing in node dash v and if you do have it installed it will return a number or version number and we can do the same thing for npm npm-v and we do have npm installed now if you don't have node and npm installed yet you can go to the node.js.org website and download and install the installer onto your computer all right once you have node and npm installed on your computer the next thing we're going to do since we're working with gulp in this tutorial is install the gulp cli or command line interface and we can do that from our command line again by typing npm install gulp dash cli and we'll add the dash g to install globally on our computer this is going to enable us to use the gulp command from the command line in any directory on our computer so we'll install that and the other thing we want to do is for the gulp cli it is actually kind of a two-part system with gulp you install the gulp cli globally on your computer so you can use the gulp command on the command line but in each product you do need to install gulp again just in that local project to run the gulp file and things like that so it's kind of a two-part process for gold now if you want to follow along with this tutorial you can go to the gold browsersync repository that i have it's linked down in the description below and you can get all the actual complete files that we'll be using in this project now let's start configuring our project so we're going to be installing some packages for our gulp and browser sync workflow so to create a package.json file we'll type in npm init and dash y to just answer yes to all the default questions so we have our package.json file and then we're going to start installing our packages so we can type in npm install and the packages we want to install are gulp since we're using gulp obviously then we're also going to use gold sass to compile our sass files to css then we're also going to use gulp dash post css because we're installing css nano which is a post css plugin so you have to install post css and then also the plugin itself css nano then we're installing gulp cursor and that's going to minify our javascript files and of course we want to install browser dash sync so let's install all those packages okay so now we've installed our packages it's also created a package lock json a file and that's going to save the actual versions that are installed on our project the next thing we want to do is want to create a new file this is going to be our gulp file dot js this is where we're going to add all of our gulp configuration so in our gulp file the first thing we want to do is import all the modules that we have from the packages that we installed and we're going to import them as javascript constants so first one is gulp we're going to import some of the gulp functions that we'll be using later on in our gulp file so those ones are source dest watch and series and it's going to come from the require gulp then i'm going to add sass that's going to be the gulp sass package post css which will come from the gulp host css package css nano [Music] from the css nano package and same thing with terser gold cursor and then of course browser sync and this is a little different it's importing the package the the browser sync package but we're also going to run the create function and this is going to kind of initialize the browser sync server that we're going to be using all right now that we have our packages installed we're going to create our gulp tasks and in gulp 4 the gulp tasks are functions so the first one we want to create is our sas task so create a function i'm going to call it scss task then in the function it's going to return a node stream using the source function from gulp and then we're going to read from the app.scss dot scss file so that's the source file we're going to get our sas styles from and we also want to turn on source maps so we'll set source maps to true this is something that's kind of built in now with gulp which is nice we don't have to install a separate package anymore then we're going to pipe on the sas function itself and then once we have our sas compiled we're going to minify it so we're going to use that post css plugin that we installed so post css and then in the parameters we're going to run css nano there we go and lastly with our minified css file we're going to save it using the dest function and we want to save it in a new folder so we're going to call this dist and we're also going to save our source maps there so source maps and this sort of dot will tell gulp to save it in the same location so in the disk folder okay so next up after sas is our javascript task so in the same way we're going to create a new function jstask and it's also going to return a node stream using source and this is coming from where our script file is so app.js script.js and again we're turning on source maps so for javascript the only thing we're doing is minifying our javascript file we're not doing anything too fancy with that so we're running terser and i'm going to save it i'm using the dest function again in our disk folder and again saving our source maps in the same location so the next thing we want to do is create our browser sync functions and we are going to create two so browser sync tasks the first one is browser sync serve this is going to initialize a local server and just sort of start running it so we're going to create a new function browser sync serve if i can type and we do need to use a callback function as the parameter because the browser sync function is not a gulp plugin like some of the other plugins that we've used so we're not returning anything so in order to tell the asynchronous function that is complete we need to manually explicitly end it by using that callback function so in this function i'm going to say browser sync init this starts up the server and we need to also tell it where the server is going to be based out of so using the server option we're setting base dir to oops dot to be the the root directory that we're running the gulp file from which is our project root and that's where we want our server to be based off of because that's where the index.html file is located so that's our browsersync function and then at the end we'll run our callback function to again signify that it is complete now the other thing we want to do with browsersync is not only initialize a server but we also want to reload the server whenever we make code changes so we need to create a new function for that we're going to call this browser sync reload and again with a callback and this one is pretty simple it's just running browser sync reload and then the callback okay so now that we have our browsersync tasks all set up as well as our sas and javascript tasks let's add it into our gulp workflow so we're going to create our default gulp task by exporting default and in our default task we're going to use series to run a bunch of things one after the other so we're going to just list all the tasks that we just created scss task javascript task and then we want to start the browser sync server so browser sync serve i believe it was called and then we also need to create our watch tasks so we're just going to add that here for now this is going to be our default gulp task this is what's going to run when you type gulpin on the command line from the very beginning now let's create our watch task just create a task here actually let's create it above our default gulp task so watch task and this is a gulp thing so it's going to watch now let's think about this so we want to watch our our file so we have index.html and we have sas and javascript files if i make a change to my index.html file i don't necessarily want to rerun my sas and javascript tasks all i want to do really is to reload the website because i've made some changes in the markup so we're going to create two different watch functions in this task so the first one is going to be watching any html files of course we only have that one file but we'll just add a wild card there just for the heck of it and if it detects if the watch function detects any changes in the html files we want to run the reload browsersync reload function that we just created so browser sync reload and that's it for when we make changes in html now if we make any changes in our sas or javascript files we want to run our sas and javascript tasks and then also run the reload function so we'll add another one here this is going to watch um someone watch two sets of files first is going to be app scss um style.scss and if you have more subfolders in your sas folder what you can actually do is a css and then add the double asterisks wildcard scss files so after that we also want to watch our javascript files so app and then we can do the same thing js uh wild card or that's a glob rather so that can mean that if you have any subfolders in the javascript folder or no folders at all which which which is what we have since we only have that one javascript file and then wildcard js so the first parameter in the watch function is the files that we're watching then there's another parameter that's going to be what we're going to run when any changes are detected so since we want to run our sas in javascript tasks we're going to use a series thing again scss task js task and then we're going to run browser sync reload now we have all of our tasks we have our sas task javascript task our two browsersync tasks to both start and reload our browsersync server and we have our watch task that's going to watch our files and run browser sync reload anytime changes are detected i think everything is done in our gulp in our gulp file so let's test it out so we'll type in gold all right so we can see here if you saw in that upper right hand corner said browser isn't connected which is great and we can see our little simple website right here so if we turn on our dev tools we just want to check that uh our javascript stuff is running which looks like it is which is good so now let's make sure that browser sync is working so going back into our code editor let's just make an html change so i'm just going to type in for the headline add a bunch of z's save it and you can see down in our terminal it's reloading our browser sync and if we go back to the website we can see that it has indeed changed okay awesome so we'll just kind of delete that let's now make a change in our sas file so i think i'm going to just change that blue background color that we have going to something else this is in the box element so let's just kind of choose a random random color here let's try green save it you can see down in terminal it is uh running stuff and reloading and in the website it has been changed so we'll just kind of undo that change and save it again and now we're back to normal and that's it for setting up browsersync in your gulp workflow if you want to learn more about gulp check out my gulp for beginners course linked down in the description below and as always thanks for watching and keep on coding you