One really important thing to note is that you need to give the plugin some extra access once you've installed it. This is where you will be toggling on and off the Plugin. Once you install it you should notice a small icon in the right hand corner of your browser window's toolbar. ![]() There are several ways to set up LiveReload but I think one of the simplist is with a plugin for a chrome browser, LiveReload Chrome Plugin. (NOTE: If you get errors, try adding sudo to the line above as in: sudo npm install gulp gulp-livereload -save-dev) Installing the LiveReload Chrome Plugin The -save-dev part adds both gulp and gulp-reload to your package.json file. What that last little bit of code did was download the gulp package along with the gulp-reload package, a package that adds some shortcuts for setting up livereload. Npm install gulp gulp-livereload -save-dev Making sure you're still in your project's directory, type this into the terminal: The next thing we want to do is give it dependencies, two to be exact. This file is used by npm to keep track of your projects dependencies. After this is done you'll find a package.json file inside of your project directory. Don't worry, nothing in this world is perminent. You'll be asked a whole lot of questions here and all you really have to do here is to keep hitting enter. Next we want to prepare our project for using Node Package Manager (npm) by typing this into the terminal: We can do this by typing the following into our terminal: The first thing we're going to want to do is create our project directory and change into that directory. We're going to be using npm command in this tutorial, which is short for Node Package Manager, to install a couple of node 'packages' that will help us get our project up and running. With Node installed you now should have access to both the node and npm bash commands in your terminal. I could go into more detail but for now I'll just say I don't like where the homebrew-installed version of Node puts certain files. I recommend using the package installer on the node.js site as it makes it much easier. ![]() If not, this might be a perfect time to do so. This tutorials assumes that you have Node installed. In order to accomplish this, we'll use the task runner Gulp to make sure LiveReload knows about our changes. ![]() This can be very productive if you are working on a webpage and want to see the changes right away. This tutorial will show you how to set up LiveReload, a program that applies CSS/JS changes in your browser w/o reloading the page (and autoreloads the page when HTML changes).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |