Gulp live-reload external link (Browser-Sync, Live-Reload, ect.)

Question

I am currently fine tuning a Gulp setup that watch/compiles gulp-sass. The last step would be re-loading the server address in my browser.

I have seen browser-sync, live-reload's ability to create an express server and reload or inject the css changes.

However my css is located on an external server that uses https. I just need gulp to reload the browser link I currently have in my chrome.

example link https://myShoppingCartExample.com/?scope=cart&parameters (not a real link)

Thanks

Answer 1

Well first of I think best plugin for live reloading will be gulp-live-server (I am assuming you are using express nodejs), I tried other but none worked for me (You can install it using npm install gulp-live-server connect-livereload --save ).

Second here is how you can use it

// Gulp Live server provides live reloading and restarting node.
gulp.task('serve', function () {
    // Run your script as a server
    var server = gls.new('./bin/www'); // Location to node start file mine is ./bin/www
    server.start();

    //use gulp.watch to trigger server actions(notify, start or stop)
    // watch accepts array of files you want to watch
    gulp.watch(['views/*.jade', 'routes/*.js'], function (file) {
        // server.notify tells server which files changed
        server.notify.apply(server, [file]);
    });

    // Restart my server
    gulp.watch('./bin/www', function () {
        server.start.bind(server)();
    });
});

// Default task runs when you run 'gulp' in terminal
// Here we have added 'serve' as dependency so it also runs on 'gulp'
gulp.task('default', ['serve'], function () {
    console.log("Running Gulp");
});

But that's how it is normally done as you want to reload page not on file change but on some event of you own so instead of passing file object given by watch function we will use a custom object with path to index.html/file_that_contains_css_link/your_jade_file/etc. So call this task whenever you want to reload.

gulp.task('reload', function () {
    server.notify.apply(server, [{
        type: 'changed',
        path: 'path_to_index_file'
    }]);
});

As a side note you need to add this after var app = express(); in you app.js or whatever you call it for live reloading to work.

app.use(require('connect-livereload')());