gulp.js Liveload mit Express-Server?

Question

Ich versuche meine gulpfile.js einzurichten, Liveload auf einem Express-Server ohne viel Glück zu verwenden. Ich sehe Beispiele dort, aber sie scheinen zu einem statischen Dateiserver verwandt zu sein.

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

So habe ich eine app.js Datei, die den Standard-Express-Server mit Jade-Dateien funktioniert, etc. Was ich tun möchte, ist es mit livereload von einem gulp.js Boot zu arbeiten.

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

Es gibt viele Plugins wie gulp-livereload, connect-livereload, gulp-connect, gulp-watch so wie kann ich diese verdrahtet werden?

Answer 1

Ich hatte das gleiche Problem und konnte nichts ähnliches finden. Meine Lösung endet mit dem folgenden Code oben in 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']); 
}); 

Sie werden tiny-lr installieren müssen, async, gulp-util und gulp-load-plugins Pakete für diese Probe zu arbeiten. Ich denke, dass ich ein separates Gulp-Plugin dafür erstellen werde =)

Answer 2

Werfen Sie einen Blick auf gulp-nodemon, die Ihren Server neu starten wird, wenn sich der Code ändert.

Beispiel:

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

Answer 3

Ich habe Code hinzugefügt, dass

1. Ermittelt Änderungen in Server-Dateien und lädt die Server über nodemon

2. Waits für ein paar Sekunden nach dem Prozess reload um dem Server Zeit zu geben, seinen Initialisierungscode auszuführen.

3. Löst eine Änderung in einem livereload Server

Anmerkung 1: Ihr Build auch einen livereload Server enthalten sollte und livereload Skripte Dateien anhängen HTML, bevor die 'dienen' Aufgabe

Aufruf

Hinweis 2: Dies ist eine asynchrone Aufgabe, die nie endet, nicht verwenden Sie es als eine Abhängigkeit von anderen Aufgaben

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

Live-Nachladung sollte mit jedem Nodejs-Skript funktionieren. Hier ist eine gute gist.

Answer 5

Sie können das Setup sehe ich bei http://github.com/arvsr1988/gulp-expressjs-setup verwendet

Answer 6

gulp-express ist das Richtige für Sie. Es führt Ihr Express-Skript als Server mit Liveload!

Answer 7

Hier ist meine Lösung:

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

Sie müssen auch connect-livereload in Ihrem Express-Server sind:

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

es Fügen Sie vor bodyParser. Ich habe gelesen, dass dies nicht benötigt wird, wenn Sie die Chrome Live Reload Erweiterung haben.