Install it as usual: npm install -save-dev connect-livereload Since it is a middleware for our connect server, we’ll use it so. This means that your built files will not include this piece of code. All it literally does is inject a piece of code to your files while the connect server is running. We’ll add connect-livereload to our project. Now our connect server knows to server static files from build/ when requested over port 8080. Return e(connectServeStatic("build/")).listen(8080) Var connectServeStatic = require("serve-static") I’m serving a static website that outputs to build/ and so will configure it as such using the serve-static middleware for connect: npm install -save-dev serve-staticĮditing our gulpfile.js to reflect the new changes: // Require the connect npm plugin and any additional middleware It knows to listen to port 8080 but does not know what the root of the website/app is. Open your gulpfile.js, require connect and write a new task called server: // Require the connect npm pluginįor now, the connect server cannot do anything. Fixing our problemįor the more relevant part, let’s start discussing what we are going to do to solve the problem. As extension runs on every page in your browser, it doesn’t seem to be a good fit for the purpose of LiveReload. Extensions can also be guilty to slow down your browser, by adding unnecessary and slow running scripts blocking your useful content. However, in addition to being limited to the Chrome browser, extensions are potentially vulnerable. Many of them are based on installing a Chrome browser extension. This is important or else it won’t work.įrom dmitriz’s gulp-automation project, which inspired me to understand his code and implement my own from scratch, you can see why he argues for a different approach: Make sure you can view it in your tool bar and that the circle is filled in with black. Next, we need to download the Google Chrome extension LiveReload, go to the Chrome Store and download it here. If you read the article on implementing LiveReload, you must have come across the following section: Not only this, I neither want to install an additional extension for something I do not do 24×7 (hobby web developer), nor bloat my Firefox installation, especially if I can help it. This means I do not have access to an official addon as I did on Chrome. Since initially learning about LiveReload in 2015, I have moved to Firefox (and for the most part, appreciate it). However, if you’re like me, you’re still using Gulp simply because it works for you and you’re not working on big projects or in big teams to necessitate the change to Webpack. The fever over task-runners like Grunt, Gulp and Broccoli has largely died in 2017 due to superior alternatives such as Webpack. LiveReload: A Quick Guide to Using LiveReload with Gulp.Call LiveReload within a task re-run to request a page refresh.Choose to enable/disable two reload options based on preference. I set mine to 1s so the updates are immediate.ĩ. Decide how many seconds the extension should wait before checking for updated source files. There may be other admin areas to ignore, but this setup works for me.Ĩ. Note: This allows your website to use Live Reload without reloading WordPress admin areas. Instead, you refer to the root folder by using your source URL followed by a forward slash (/) and asterisk (*) to monitor ALL files Source file URL's: Note: you cannot technically monitor changes in local folders/files (on your comp). Host URL: (don't forget the forward slash at the end)Ħ. Add Title of rule (can be your website name)ĥ. Click on your extension icon -> click " Create a new reload rule."Ĥ. Run localhost ( XAMPP) for a live server.ģ. My 2-minute setup as a WordPress developer:ġ. This is particularly useful for WordPress developers! Hard to believe it took installing/uninstalling several extensions to get to this PERFECTLY working extension. It works like a charm! So simple to set up. The best option for auto-reload Chrome browser which I found is: Live Reload:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |