Gulp.js livereload avec express server?

j'ai ajouté du code qui

1. Détecte les changements dans les fichiers du serveur et recharge le serveur via nodemon

2. attend quelques secondes après la recharge du processus pour donner au serveur le temps d'exécuter son code d'initialisation.

3. Déclenche un changement dans un livereload serveur

note 1: votre construction devrait également inclure un serveur livereload et attacher livereload scripts vers les fichiers html avant d'appeler la tâche 'serve'

note 2: C'est une tâche asynchrone qui ne finit jamais, ne pas utiliser comme une dépendance d'autres tâches

gulp.task('serve', function (cb) {
    nodemon({
        script  : <server start file>,
        watch   : <server files>
        //...add nodeArgs: ['--debug=5858'] to debug 
        //..or nodeArgs: ['--debug-brk=5858'] to debug at server start
    }).on('start', function () {
        setTimeout(function () {
            livereload.changed();
        }, 2000); // wait for the server to finish loading before restarting the browsers
    });
});

Gul-express est la bonne chose pour vous. Il exécute votre script express en tant que serveur, avec livereload!

Voici ma solution:

//gulpfile.js:
var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var server = require('gulp-express');
var lr = require('tiny-lr')();

gulp.task('default', function () {
    nodemon({
      script: 'server.js'
    })
    .on('restart', function () {
        console.log('restarted!')
    });

    lr.listen(35729);

    gulp.watch('server/**/*', function(event) {
      var fileName = require('path').relative('3000', event.path);
      lr.changed({
        body: {
          files: [fileName]
        }
      });
    });
});

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

L'inclure avant bodyParser. J'ai lu que ce n'est pas nécessaire si vous avez l'extension chrome live reload.

var fork = require('child_process').fork;
var tinyLr = require('tiny-lr');
var async = require('async');
var plugins = require('gulp-load-plugins')({ lazy: false });

var lr = null;
var lrPort = 35729;
var buildDir = 'build';
var serverAppFile = path.join(__dirname, 'build/server/app.js');

// This guy starts and stops nodejs process which runs our Express app
var app = {
    start: function(callback) {
        process.execArgv.push('--debug');
        var instance = app.instance = fork(serverAppFile, {
            silent: true
        });
        app.dataListener = function(data) {
            var message = '' + data;
            // Assume that server is started when it prints the following to stdout
            if (message.indexOf('Express server listening on port') === 0) {
                callback();
            }
        };
        instance.stdout.on('data', app.dataListener);
        instance.stdout.pipe(process.stdout);
        instance.stderr.pipe(process.stderr);
    },

    stop: function(callback) {
        app.instance.stdout.removeListener('data', app.dataListener);
        plugins.util.log('Killing Express server with PID', app.instance.pid);
        app.instance.kill('SIGTERM');
        callback();
    }
};

// build-assets task actually processes my client js, less, images, etc and puts them to build dir
// build-server task copies server files (app.js, controllers, views) to build dir

gulp.task('serve', ['build-assets', 'build-server'], function(callback) {
    async.series([
        app.start,
        function(callback) {
            lr = tinyLr();
            lr.listen(lrPort, callback);
        }
    ], callback);
});

gulp.task('watch', ['serve'], function() {
    // Reload page if built files were updated
    gulp.watch([
        buildDir + '/**/*.handlebars',
        buildDir + '/**/*.html',
        buildDir + '/**/*.js',
        buildDir + '/**/*.css'
    ], function(event) {
        var fileName = path.relative(path.join(__dirname, buildDir), event.path);
        plugins.util.log('Detected updated file ' + fileName + ', reloading server and page in browser');
        async.series([
            // Restart Express server
            app.stop,
            app.start,

            // Send reload notification to browser
            function(callback) {
                lr.changed({
                    body: {
                        files: [fileName]
                    }
                });
                callback();
            }
        ]);
    });

    // Perform build steps on source file modifications
    gulp.watch(['app/**/*.js', '!app/**/*.spec.js'], ['build-app-js']);
    gulp.watch(['app/**/*.html'], ['build-templates']);
    gulp.watch(['app/**/*.less'], ['build-less']);
    gulp.watch(['server/**/*.*'], ['build-server']);
});

Vous aurez besoin d'installer tiny-lr, async,gulp-util et gulp-load-plugins paquets pour que cet échantillon fonctionne. Je pense que je vais créer une Gorgée plugin pour ça =)

regardez gulp-nodemon qui redémarre votre serveur lorsque le code change.

Exemple:

gulp.task('develop', function () {
  nodemon({ script: 'app.js', ext: 'html js' })
    .on('restart', function () {
      console.log('restarted!')
    })
})

le rechargement en direct devrait fonctionner avec n'importe quel script nodejs. Voici un bon gist.

Vous pouvez voir la configuration que j'ai utilisé à http://github.com/arvsr1988/gulp-expressjs-setup