javascript - plugin - gulp browser sync tutorial
¿Puede Browsersync inyectar contenido actualizado en el navegador sin una actualización? (1)
La sincronización del navegador no puede hacerlo de forma nativa ya que las extensiones están diseñadas de forma predeterminada para ejecutarse en su propio entorno limitado.
Necesitas escribir algo personalizado con websockets para evitar eso, no me molesté porque necesitaba una solución rápida así que terminé usando esto:
https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid
Pero esto debería ayudarte:
Estoy usando browsersync + gulp con algunos complementos de navegador geniales, perfectPixel para nombrar uno. Mi problema es que cada vez que guardo mi trabajo, obliga al navegador a volver a cargar, borrando así el navegador y apagando la extensión de mi navegador. Esto me obliga a tener que reactivar el complemento y continuar con este flujo de trabajo ineficiente. ¿Alguien tiene alguna idea?
ACTUALIZACIÓN 7/7/2015 Debajo de Matthew, proporcioné algunos enlaces a una solución que incorpora websockets, sin embargo no puedo hacer que funcione con la configuración de mi trago.
var gulp = require(''gulp''),
open = require(''gulp-open''),
browserSync = require(''browser-sync'').create();
var WebSocketServer, socket, wss;
WebSocketServer = require(''ws'').Server;
wss = new WebSocketServer({
port: 9191
});
var reload = browserSync.reload;
var paths = {
css: ''app/REPSuite/web/static/css/*.css'',
js: ''app/REPSuite/web/static/js/*.js'',
html: ''app/*.html''
};
gulp.task(''reload'', function() {
var client, i, len, ref, results;
ref = wss.clients;
results = [];
for (i = 0, len = ref.length; i < len; i++) {
client = ref[i];
results.push(client.send(''reload''));
}
return results;
});
socket = null;
this.reloadClient = {
connect: function() {
socket = new WebSocket(''wss://localhost:9191'');
socket.onopen = function() {
return console.log(''connected'');
};
socket.onclose = function() {
return console.log(''closed'');
};
return socket.onmessage = function(message) {
if (message.data === "reload") {
return window.chrome.runtime.reload();
}
};
},
disconnect: function() {
return socket.close();
}
};
// Static Server + watching scss/html files
gulp.task(''serve'', [''css''], function() {
browserSync.init({
server: "./app",
files: [paths.html, paths.css, paths.js]
});
gulp.watch(paths.css, [''css'']);
gulp.watch(paths.html).on(''change'', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task(''css'', function() {
return gulp.src(paths.css)
.pipe(browserSync.stream());
});
gulp.task(''default'', [''serve'',''reload'']);