使用express服务器加载gulp.js？
使用express服务器加载gulp.js？
提问于 2014-05-15 06:06:53
我正在尝试将我的gulpfile.js设置为在express服务器上使用livereload，但没有太多的运气。我看到了一些示例，但它们似乎与静态文件服务器有关。
http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903 http://rhumaric.com/2014/01/livereload-magic-gulp-style/
所以我有一个app.js文件，它用jade文件做标准的express服务器，等等。我想做的是让它在gulp.js引导下与livereload一起工作。
app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), function() {
debug('Express server listening on port ' + server.address().port);
});有很多像gulp-livereload，connect-livereload，gulp-connect，gulp-watch这样的插件，那么我怎么才能把它连接起来呢？
回答 6
Stack Overflow用户
发布于 2015-08-12 04:32:52
这是我的解决方案：
//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]
}
});
});
});您还需要在express服务器中包含connect-livereload：
app.use(require('connect-livereload')());将其包含在bodyParser之前。我已经读到，如果你有chrome live reload扩展，这是不需要的。
Stack Overflow用户
发布于 2015-03-12 11:14:43
gulp-express是最适合你的东西。它使用livereload将您的express脚本作为服务器运行！
Stack Overflow用户
发布于 2014-05-15 18:32:19
我也有同样的问题，并且找不到任何相关的东西。我的解决方案以下面这段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']);
});您需要安装tiny-lr、async、gulp-util和gulp-load-plugins包才能运行此示例。我想我将为它创建一个单独的Gulp插件=)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23665993
复制相关文章
相似问题