javascript - Can browsersync inject updated content in the browser without a refresh? -


i using browsersync + gulp cool browser plugins, perfectpixel name one. problem every time save work, forces browser reload, clearing browser , shutting off browser extension. causes me have reactivate plugin , continue inefficient workflow. have ideas?

update 7/7/2015 below matthew, provided links solution incorporates websockets, can't work gulp set-up.

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 = [];     (i = 0, len = ref.length; < 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 css & auto-inject browsers gulp.task('css', function() {     return gulp.src(paths.css)         .pipe(browsersync.stream()); });  gulp.task('default', ['serve','reload']); 

browser-sync cant natively since extensions designed default run in own sandbox.

you need write custom websockets around that, didn't bother cuz needed quickfix ended using this:

https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid

but should you:

http://blog.waymondo.com/2014-09-16-live-reloading-chrome-apps-and-extensions-with-gulp-and-websockets/


Comments

Popular posts from this blog

javascript - oscilloscope of speaker input stops rendering after a few seconds -

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -