Browsersync
Keep multiple browsers and devices in sync when building websites. Change your code and the page is auto-reloaded. Live reloading works across many browsers and devices.
BrowserSync creates a small server. Next, it injects a javascript file on every page; This file makes use of WebSockets to communicate between the server and the client to watch changes to your code or browser action. As soon as BrowserSync detects an action it performs a page reload.
Véase
- How to Use BrowserSync for Faster Development
- Browsersync
- Browsersync con Gulp
- Tutorial – How to use Livereload with Nodemon in Gulp to Automatically Reload your Browser and Restart your App
Gulpfile.js de Ejemplo para uso con browser-sync
(() => {
'use strict';
let gulp = require('gulp');
let nodemon = require('gulp-nodemon');
let browserSync = require('browser-sync');
gulp.task('default', ['browser-sync']);
gulp.task('browser-sync', ['nodemon'], () => {
browserSync.init(null, {
proxy: 'http://localhost:3000',
files: [
'views/**/*.ejs',
'public/js/**/*.js',
'public/img/**/*.*',
'public/vendor/**/*.*',
'assets/public/stylesheets/**/*.scss'
],
port: 8080
});
});
gulp.task('nodemon', (cb) => {
var started = false;
return nodemon({
script: 'bin/www'
}).on('start', () => {
if (!started) {
cb();
started = true;
}
});
});
})();