I am using browsersync + gulp with some cool browser plugins, perfectPixel to name one. My problem is every time I save my work, it forces the browser to reload, thus clearing the browser and shutting off my browser extension. This causes me to have to reactivate the plugin and continue this inefficient workflow. Does anyone have any ideas?
UPDATE 7/7/2015 Below Matthew, provided some links to a solution which incorporates websockets, however I can't get it to work with my 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 = [];
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']);
How Does BrowserSync Work? BrowserSync starts a small web server. If you're already using a local web server or need to connect to a live website, you can start BrowserSync as a proxy server. It injects small script into every page which communicates with the server via WebSockets.
The BrowserSync is used to watch all HTML and CSS files in the css directory and performs the live reload to the page in all browsers whenever files were changed. BrowserSync makes workflow faster by synchronizing URL's, interactions and code changes across multiple devices.
In Sublime Text 3 go to Preferences -> Browse Packages... Open 'Browser Sync' folder and edit the browser property in browser_sync_launch. js file. Save this answer.
Browser-sync cant do that natively since extensions are designed by default to run in their own sandbox.
You need to write something custom with websockets to get around that, i didn't bother cuz i needed a quickfix so i ended up using this:
https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid
But this should help you:
http://blog.waymondo.com/2014-09-16-live-reloading-chrome-apps-and-extensions-with-gulp-and-websockets/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With