How to Livereload server side and client side at the same time using Gulp?

Question

MySQL

Right now my project uses Node as both a Web service and a server. Those. Gives both statics and data.
gulp-nodemon is able to restart the server on Node. But the client part can no longer be restarted, tk. you need to hang Livereload on the same port as the Node server.
In principle, I can catch the client-side update event from gulp-nodemon, but I don’t know how to restart a specific browser window at this moment.
Ideas?

Answer 1

like this

var gulp = require("gulp");
var connect = require("gulp-connect");
var opn = require("opn");
var jade = require('gulp-jade');

//запускаем локальный сервер
gulp.task('connect', function() {
    connect.server({
        root: 'app',
        livereload: true,
        port: 8888
    });
    opn('http://localhost:8888');
});

//работа с HTML
gulp.task('html', function () {
    gulp.src('./app/*.html')
        .pipe(connect.reload());
});

//работа с CSS
gulp.task('css', function () {
    gulp.src('./app/css/*.css')
        .pipe(connect.reload());
});

//работа с JS
gulp.task('js', function () {
    gulp.src('./app/js/*.js')
        .pipe(connect.reload());
});

// работа с шаблонами JADE
gulp.task('jade', function() {
    var YOUR_LOCALS = {};

    gulp.src('./app/jade/index.jade')
        .pipe(jade({
            locals: YOUR_LOCALS,
            // красивый (не ужатый) вывод
            pretty: true
        }))
        .pipe(gulp.dest('./app/'))
});


//WATCHER
gulp.task('watch', function () {
    gulp.watch(['./app/*.html'], ['html']);
    gulp.watch(['./app/css/*.css'], ['css']);
    gulp.watch(['./app/js/*.js'], ['js']);
    gulp.watch(['./app/jade/*.jade'], ['jade']);
});

//DEFAULT
gulp.task('default', ['connect', 'watch']);

Answer 2

Browsersync and do not use static at startup, but run as a proxy server on top of your
www.browsersync.io/docs/api/#api-init