LIVERELOAD EXTENSION INSTALL
LIVERELOAD EXTENSION CODE
LIVERELOAD EXTENSION DOWNLOAD

Require the connect npm plugin and any additional middleware Require the module in your gulpfile.js and modify the server task to make use of it.

LIVERELOAD EXTENSION INSTALL

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.

LIVERELOAD EXTENSION 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.

LIVERELOAD EXTENSION DOWNLOAD

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.

Livereload extension