3º. 2º cuatrimestre. Itinerario de Tecnologías de la Información. Grado en Ingeniería Informática. Curso 2019/2020
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.
(() => {
'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;
}
});
});
})();
Vídeo: A Quick Introduction to BrowserSync
Vídeo: Using Gulp, SASS and Browser-Sync for you front end web development