web-dev-qa-db-fra.com

gulp.js livereload avec serveur express?

J'essaie de configurer mon gulpfile.js pour utiliser livereload sur un serveur express sans trop de chance. Je vois des exemples là-bas, mais ils semblent être liés à un serveur de fichiers statique.

http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-209http://rhumaric.com/2014/01/livereload-magic-gulp-style /

J'ai donc un app.js fichier qui fait le serveur express standard avec des fichiers jade, etc. Ce que je veux faire, c'est le faire fonctionner avec livereload à partir d'un démarrage gulp.js.

app.set('port', process.env.PORT || 3000);
    var server = app.listen(app.get('port'), function() {
    debug('Express server listening on port ' + server.address().port);
});

Il existe de nombreux plugins comme gulp-livereload, connect-livereload, gulp-connect, gulp-watch alors comment est-ce que je peux le brancher?

node.jsexpressgulplivereload
17
Timmerz

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 le rechargement du processus afin de donner au serveur le temps d'exécuter son code d'initialisation.

  3. Déclenche un changement dans un serveur de chargement de foie

note 1 : Votre build doit également inclure un serveur livereload et attacher des scripts livereload aux fichiers html avant d'appeler la tâche 'serve'

note 2 : il s'agit d'une tâche asynchrone qui ne se termine jamais, ne pas l'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
    });
});
11
Amit Portnoy

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]
        }
      });
    });
});

Vous devez également inclure connect-livereload dans votre serveur express:

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

Incluez-le avant bodyParser. J'ai lu que cela n'est pas nécessaire si vous avez l'extension chrome live reload.

4
Andrei Rosca

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

3
Gimm

J'ai eu le même problème et je n'ai rien trouvé de similaire. Ma solution se retrouve avec le morceau de code suivant dans Gulpfile:

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 devrez installer tiny-lr, async, gulp-util et gulp-load-plugins packages pour que cet exemple fonctionne. Je suppose que je vais créer un plugin Gulp distinct pour cela =)

1
Denis Parchenko

Pour charger à la fois les modifications avant et arrière du navigateur. Il existe également la possibilité de ne pas utiliser Gulp. Ensuite, la bonne combinaison de packages est "livereload", "connect-livereload" et un peu d'aide de "nodemon". Voici comment ils s'associent:

  • livereload ouvre un port haut et informe le navigateur des fichiers publics modifiés
  • connect-livereload monkey patches chaque page HTML servie avec un extrait qui se connecte à ce port haut
  • nodemon est ensuite utilisé pour redémarrer le serveur sur les fichiers backend modifiés

Configurer la charge du foie dans Express

Vous voudrez configurer Express pour démarrer le serveur de chargement du foie en regardant le répertoire public et envoyer une requête ping au navigateur pendant le redémarrage induit par nodemon:

const livereload = require("livereload");
const connectLivereload = require("connect-livereload");

// open livereload high port and start to watch public directory for changes
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));

// ping browser on Express boot, once browser has reconnected and handshaken
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

const app = express();

// monkey patch every served HTML so they know of changes
app.use(connectLivereload());

Démarrez Express avec nodemon

Ensuite, vous démarrez le serveur avec nodemon, par exemple, avec un script de surveillance dédié npm run watch.

Le point clé ici est d'ignorer le répertoire public qui est déjà surveillé par livereload. Vous pouvez également configurer des fichiers avec des extensions non par défaut, comme le pug et la moustache, à surveiller.

"scripts": {
  "start": "node ./bin/www",
  "watch": "nodemon --ext js,pug --ignore public"
},

Vous pouvez lire une explication plus longue dans "Actualiser les modifications avant et arrière du navigateur avec Express, LiveReload et Nodemon."

0
pspi

Jetez un œil à gulp-nodemon qui redémarrera votre serveur lorsque le code change.

Exemple:

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

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

0
xpepermint