7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 1.1 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Browser Reloading

Hello, and welcome to lesson number four. Let's talk about browser reloading. This is probably one of the most important aspects of this entire workflow. Because consider a typical scenario where you write some code, you maybe change CSS or JavaScript or HTML. And then you go back to the browser, hit Refresh, see the changes. And then go back to the code editor. And it's this going back and forth that can waste a lot of time. Now, if you're doing automatic browser reloading, then that's a totally different story, that's much better. Consider having your editor on one side of the screen and the browser on the other side of the screen. And you can work on changes and you can immediately see them on your browser without you having to manually refresh the browser. Now, there are a couple of methods to do that. There are apps like CodeKit, like LiveReload, that automatically do this for you. But since we're using Grunt here, Grunt has a task or a plugin that's called watch. And watch will wait for, or will actually watch for changes on the files you specify. And when it detects a change, it has an option to reload the browsers using a live reload. But we're not gonna use that. Instead, we're going to use Browsersync, which is in my opinion a much better option. Because Browsersync creates a server for you that you can access from multiple devices. Not just your PC, you can access them from your tablet, from your phone, from another computer, in the same network. And that's very useful when you want to do synchronized browser reloading or browser testing testing, to be more exact. And that's what we're gonna use today. So the first thing we gotta do is install Browsersync. So I'm gonna open my terminal here and I'm gonna type npm install browser-sync --save-dev. Now, this little flag here will actually add this into our dev dependencies. So let me just hit this. It's now installed. And if we take a look in our package.json file, you can see that devDependencies now contains browser-sync. And what I'm gonna do actually is also add grunt here. Because I should have installed Grunt as a dev dependency. But that's fine. You can add it manually. So now, browser-sync is installed. It's time to define a task within Grunt and also load the appropriate module. So we're going to start here. We'll say browserSync, we're gonna say files: src: and we're gonna pass in a bunch of files. And we're gonna set some options for it. And on the options, I'm gonna specify browser. You can say which browsers you want to this to open by default. In my case, it's Firefox because that's what I'm using for development. And I'm gonna set server. Now, server defines which path you want served. In my case, it's gonna be the app folder. So I can simply say app. However, because we're gonna use a lot of tasks and we have a bunch of folders and paths here, I want to make it easy for us to change these paths if necessary and only change them in one place. So, for that, I'm gonna go right here and I'm gonna say, define a reusable paths. And I'm gonna create an object, paths, and I'm gonna start by saying app. So I'm gonna give this pair. This is a key and this is a value. So the app key goes to the app folder. And I'm gonna create a couple more here. I'm gonna say app.css should go to app/css. So it should go to this folder here. But instead of using the path like this, I'm gonna use this value. And the way to access it is pretty simple. You need to go like this, paths.app. And now, paths.app, when you put it in this format, will return this value here. And then all I can do is say /css. I'm gonna do something similar for JavaScript. And I'm gonna call this app_js. And I think that's about it for now. We'll come back to this later if we need more paths defined. So now inside browserSync, instead of doing server: app I'm gonna paste in this bit. And now for the files. This basically means, which files should trigger a browser reload? So I'm gonna use an array here. And I'm gonna say, from the app.css folder, anything with the extension of css. So whenever one of these files is changed, that's gonna trigger a browser reload. I also want all the HTML files like this and I also want all the js files. So I'm gonna type in app_js/ all the files with the extension js. Okay, so that's the browserSync task. Now let's go ahead and load the appropriate module. So I'm gonna go right here and I'm going to say load the plugins. And we'll start with browserSync. We're going to say grunt.loadNpmTasks, and we're gonna paste in the name of the plugin, which is grunt-browser-sync, okay? And that loaded the appropriate plugin. And now we need to create a task. And I'm gonna create the default task. And the default task basically is ran when you just type grunt in the terminal. So we're gonna say grunt.registerTask. We're gonna give it the name of default. And we're gonna specify which task should be run. And I'm gonna say browserSync. Okay, so now we are ready. If we go to our terminal and we say grunt, it says that local Npm module grunt-browser-sync not found. Okay, so let's see, we did install it. So let's see, if we take a look at our package.json, we can see browser-sync here. I think, however, I did not install the correct package. So let's see. If I do npm uninstall browser-sync and actually remove this dependency here. So, let's do that again. npm install grunt-browser-sync save-dev. So I think actually the first time I just said npm install browser-sync, not grunt-browser-sync. That's probably a different plugin. So that's why it wasn't registering properly. So now in the package.json, we should have, yeah, there we go, we should have grunt-browser-sync. Okay, so, now if we do again grunt. Okay, here we go. Yeah, sorry, wrong plugin there. So now it automatically opened localhost:3000 on Firefox, which is my browser of choice. And it also gives us a few addresses here, so the local address for accessing this server is localhost:3000. But the external one is this bit. So I can paste this into my phone, my tablet, or any computer in my local network, that's important. And I can access this server, pretty cool. Now, this started the server and is now watching files for changes. So for example, if I go into my index.html and I create an h1 that says hello. And I save, that's gonna trigger a browser refresh. Now if I were to change the CSS files or JavaScript files, a browser reload would also would also be triggered. But since we don't have any files right here, we'll just skip that for now. But yeah, that's about it for the browser reloading. We have our system in place, and we are ready to move on to working with CSS files, and we'll do that in the next lesson.

Back to the top