node.js - browsersync - gulp.js livereload con servidor express?

gulp-livereload

Question

Estoy intentando configurar mi gulpfile.js para usar livereload en un servidor express sin mucha suerte. Veo ejemplos, pero parecen estar relacionados con un servidor de archivos estáticos.

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

Así que tengo un archivo app.js que hace el servidor express estándar con archivos jade, etc. Lo que quiero hacer es hacer que funcione con livereload desde un arranque 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);
});

Hay muchos complementos como gulp-livereload , connect-livereload , gulp-connect , gulp-watch así que, ¿cómo puedo conectarlo?

Answer 1

Aquí está mi solución:

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

También debe incluir connect-livereload en su servidor Express:

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

Inclúyelo antes de bodyParser. He leído que esto no es necesario si tiene la extensión chrome live reload.

Answer 2

Eche un vistazo a gulp-nodemon que reiniciará su servidor cuando cambie el código.

Ejemplo:

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

Answer 3

He añadido código que

1. Detecta cambios en los archivos del servidor y vuelve a cargar el servidor a través de nodemon

2. Espera un par de segundos después de la recarga del proceso para darle tiempo al servidor para ejecutar su código de inicialización.

3. Activa un cambio en un servidor livereload.

nota 1 : la compilación también debe incluir un servidor de carga de datos y adjuntar secuencias de comandos de carga de archivos a los archivos html antes de llamar a la tarea de ''servir''

nota 2 : esta es una tarea asíncrona que nunca termina, no la use como una dependencia de otras tareas

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

La recarga en vivo debería funcionar con cualquier script de nodejs. Aquí hay una buena gist .

Answer 5

Puede ver la configuración que usé en http://github.com/arvsr1988/gulp-expressjs-setup

Answer 6

Tuve el mismo problema y no pude encontrar nada relacionado. Mi solución termina con el siguiente fragmento de código en 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'']);
});

Deberá instalar los paquetes tiny-lr , async , gulp-util y gulp-load-plugins para que este ejemplo funcione. Supongo que crearé un plugin Gulp separado para él =)

Answer 7

gulp-express es lo correcto para ti. Ejecuta tu script expreso como un servidor, con livereload!