gulp.js livereload avec le serveur express?

Question

J'essaye d'installer mon gulpfile.js pour employer le chargement de foie sur un serveur exprès sans beaucoup 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-20903 http://rhumaric.com/2014/01/livereload-magic-gulp-style/

J'ai un fichier app.js qui fait le serveur express standard avec des fichiers de jade, etc. Ce que je veux faire est d'obtenir à travailler avec livereload à partir d'une botte 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 y a beaucoup de plugins comme gulp-livereload, connect-livereload, gulp-connect, gulp-watch alors comment puis-je obtenir ce Câbler?

Answer 1

J'ai eu le même problème et je n'ai pas pu trouver quelque chose en rapport. Ma solution se termine avec la pièce de code suivante 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 devez installer tiny-lr, async, gulp-util et gulp-load-plugins paquets pour cet échantillon au travail. Je suppose que je vais créer un plugin Gulp séparé pour cela =)

Answer 2

Jetez un oeil à gulp-nodemon qui va redémarrer votre serveur lorsque le code change.

Exemple:

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

Answer 3

J'ai ajouté du code qui

1. détecte les changements dans les fichiers de serveur et rechargements le serveur via nodemon

2. Waits pendant deux secondes après 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 livereload

Note 1: Votre construction devrait également inclure un serveur livereload et joindre des scripts livereload fichiers HTML avant d'appeler la tâche 'servir'

note 2: Ceci est 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 
    }); 
}); 

Answer 4

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

Answer 5

Vous pouvez voir la configuration je à http://github.com/arvsr1988/gulp-expressjs-setup

Answer 6

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

Answer 7

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 connexion-livereload dans votre serveur express:

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

Inclure avant bodyParser. J'ai lu que ce n'est pas nécessaire si vous avez l'extension de rechargement de chrome live.