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:
Comments
Post a Comment