FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Watching Files and Browser Reloading

In this lesson you’re going to learn how to perform browser reloading and watch files for changes. Let’s begin.

Related Links

2.2 Watching Files and Browser Reloading

Hello and welcome back to this course. In this lesson you're going to learn how to do browser reloading and watch files for changes. Now, for browser reloading we're gonna use something very cool called Browsersync. Now you can install it via npm and it works with both Gulp and Grunt of course we're gonna use the Gulp version. So, first let's go ahead and install the plugin, we do that by going our terminal and saying npm install it's browser sync, and I'm gonna save it as a dependency. And success, it installed browser sync. Now inside package.json, we have another entry in our debt dependencies, and the next thing we need to do, is go to our Gulp file and load it right here. So I'm gonna call this variable server or no actually let's call it browser = require browser sync, and I'll also gonna chain a create method here. You can do this later if you want but it's easier just to write it right here. Okay, so once you loaded browser sync is time to write the task for it. So I'm just gonna say, Regular tasks. And in here, let's see, we're gonna, Create a server with BrowserSync and watch for file changes. So I'm gonna create a task and I'm gonna call this task server and it's gonna execute the following. First we need to initialize BrowserSync. We do that by calling it, by calling the instance BrowserSync and then the init method. And for the init method, we're gonna pass in an object with some parameters. The stuff that we'll need is the following, injectChanges. I'm gonna set that to true, injectChanges will basically just inject CSS into the page without reloading it, whenever we're changing the CSS for that page. So instead of reloading the whole page, we just inject the new CSS and changes will occur much faster than reloading that particular page. Then we also have to specify what to serve. And let's also add a common here just so it's easier for us to read through the code, here we're gonna use server and we're gonna pass in another object with parameters. In my case the base directory that I wanna surf from is called dist. Dist stands for distribution, and the idea is we're gonna take the files from our SRC or source folder, and we're gonna put those in the dist folder or the distribution folder. The difference is, that these files will be changed. So, the CSS will be compiled from Sass the JavaScript will be concatenated and minified, the images will be compressed and so on. What else? You can also specify the port on which you wanna open the server. You can leave it to the default value or set your own, for example, 1234 if that port is free on your computer. And that's about it for now, for a complete list of options, you will go to the Browsersync website, to the Documentation. And under Options you're gonna find all of the options you can specify right here, and you also have code examples for each one. All right so, now that we written our server task, all we have to do is run it. So I'm gonna say gulp server. Right, and that automatically opened or created a server on localhost on port 1234 because that's what I specified. And it automatically opened, or served, the dist folder that I specified right here in my default browser, which in my case, it's Google Chrome. Now, currently, it says, Cannot GET this because I do not have an index HTML in the dist folder. And actually I do not have a dist folder yet, we'll get to that in just a little bit. But for now let's do something interesting. Instead of running the server task manually, we're gonna have Gulp on it automatically. So, we're gonna go back to our default task. And instead of running that console log, we're gonna tell Gulp to run a series of tasks, starting with server. So what happens is when I run in Gulp, it's gonna search for the default task. And in our case, it is gonna run every task that I set in this array starting with server. So, let's try that again, by the way, if you are running Browsersync just like I did here, and you wanna return to the command line prompt, just hit Ctrl + C. And that's gonna exit that particular task. So now, when you are running Gulp, We get the exact same result. It's gonna start server, yeah, it finished the server task. Then it started the default task and it also finished it. All right, so we have our server which is giving us files from the dist directory which currently does not exist. So let's go ahead and put some files in there. And the way I'm gonna do that is by watching the HTML files inside source. So what I want, is that whenever I make a change to the HTML files inside the source folder, those files will be automatically copied to my distribution folder. So, inside my server task, I'm gonna say watch for file changes. I'm gonna call and then, for the watch, you basically specify which files to watch and what to do when a change occurs to those files. So I wanna watch every file with the extension of HTML from the source folder, and whenever a change occurs I wanna launch the html task. So, let's go ahead and create that task. And that's gonna copy HTML from src to dist. So I'm gonna say gulp., task('html', function() and done. I'm gonna say gulp.src, this src is a method of the Gulp object, and basically allows us to grab a bunch of files or to load a bunch of files into the data stream. So I'm gonna load all the files with the extension of HTML from source, we don't need this here. And the,n I'm gonna pipe we're using the piping system here. I'm gonna pipe them through another plugin, and that plugin is gulp dest for destination probably. I'm gonna put them in the disk folder, all right. So, this might seem a little bit complicated, but it's not really, so let's go over it in detail. First, we call gulp, then we call the src method of gulp. The src method basically grabs a bunch of files. So in my case I'm saying take all of the HTML files from SRC and load them into the data stream, then I'm gonna take that data stream and i'm gonna pipe it or run it through another plugin. And that plugin is this, gulp.dest. And dest will basically take a data stream and write it on disk. In my case, in the dist folder, and that's all there is to it really. Now to make this code a little bit more readable, I'm just gonna do this and this. And also, I'm gonna return gulp, all right. So, let's see what happens when we run some of these tasks. Let's see, if we do gulp html, In 22 milliseconds, it finished executing it. And it basically copied index.html from src to dist. And it automatically created the dist folder, if it wasn't there. Yeah, so as you can see, this file is identical to the one I have here. I'm gonna start the Gulp server as you can see now, it serves index.html from the distribution folder. And if I make a change, let's see what happens if I make a change to this index.html file. Let's say, hello there, and let's add an exclamation mark, Save. And if we go back, well nothing happened, well actually something did happen. If we take a look in the terminal, You can see that after the files were served, because we were watching the html files we triggered the html task. All right, lets do that again, let's add another exclamation mark. And as you can see the html task was run again. But the browser didn't reload, so why is that? Well because we didn't tell it to, we have to tell the browser to reload automatically. So in order to do that, we're gonna change a couple things. When we're watching files, we're not gonna run the html task. We're gonna run the watch-html task. So let's go ahead and write that, I'm gonna create a separate section here for watch tasks, because we'll have more than one. So I'm gonna say gulp.task("watch-html"). Here's something cool you can do inside a task. You can specify a task as a dependency, which means if I say, html here, it basically means this is the watch-html task, but only run it after you've run the html task. So this is the dependency, whenever this task is triggered, it first executes the html task, okay. So, let's write the function. All I'm gonna do is set browser.reload(), and then I'm gonna call done(), and this should be passed in as a callback right here. So let's go over this again. Whenever I make changes to the HTML files I run the watch-html task. The watch-html task does browser reloading. But, before it can do that, it should run our main html task that basically copies the html files from one folder to the other. Only after the html task is done, the browser is reloaded and exit this function. So let's see it in action, let's close this current task, and let's say gulp, All right. Now I want you to look closely at the terminal here. So this is the last line right here. But if I do a change to my index.html, let's remove these for example. And let's save, now if we go back to Google Chrome, Browsersync just reloaded. And I have the updated content, and if we look in the terminal, this is what happened. We made a change to an html file. The watch.html task was triggered. But before it could be run, the html task had to be run. So it was started, it finished, only then the watch.html task was started. It reloaded the browser and it finished the task. So let's see that again, if we had thee of these, Here, it automatically reload lets do another change, how are you? Yeah, and it changes automatically this is an awesome feature. You can develop so much faster by having the browser automatically reload for you, instead of having to manually Alt + Tab, or switch to the browser window, hitting a refresh, see the page change. It's really awesome, especially if you're working on a large screen. You could have the editor window on one half of the screen, the browser on the other half, and you're just typing away. The browser reloads automatically, you can see the changes, basically, in real time, it's a huge, huge time saver. Now so far, we have written the basics of our workflow. We have a task that watches for file changes and reloads all the connected browsers. But we're only working with html files right now. What about other file types like CSS? More specifically, how do we work with Sass or LESS files. Well, we're gonna learn about those in the next lesson.

Back to the top