#GULP LIVERELOAD INSTALL#

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.

#GULP LIVERELOAD CODE#

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.

Gulp livereload