11

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']);
Nick F
  • 9,781
  • 7
  • 75
  • 90
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141

1 Answers1

3

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/

marblewraith
  • 768
  • 5
  • 16
  • Hi Matthew, First thanks for the resources! Sorry for the delay, but I finally had an opportunity to hack around with the `waymondo` link you listed, however I couldn't get it to work. I am not getting errors; I think my problem might be the servers `browserSync` runs vs. the `websocket` version? – Antonio Pavicevac-Ortiz Jul 07 '15 at 19:09
  • create a seperate question if you are having problems troubleshooting and link via comment here, i will keep an eye on it. – marblewraith Jul 07 '15 at 19:55