我正在尝试设置我的gulpfile.js在快速服务器上使用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文件执行标准快速服务器等。我想要做的是让它与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，那么如何才能将其连线？
答案 0 :(得分：10)
我添加了
代码检测服务器文件中的更改并通过nodemon
重新加载服务器在重新加载进程后等待几秒钟，以便让服务器有时间运行其初始化代码。
在livereload服务器中触发更改
note 1 ：您的构建版还应包含一个livereload服务器，并在调用“serve”任务之前将livereload脚本附加到html文件
note 2 ：这是一项永不停止的异步任务，不将其用作其他任务的依赖
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
});
});
答案 1 :(得分：4)
这是我的解决方案：
//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]
}
});
});
});
您还需要在快速服务器中包含connect-livereload：
app.use(require('connect-livereload')());
在bodyParser之前加入它。我已经读过，如果您有chrome live reload扩展名，则不需要这样做。
答案 2 :(得分：3)
gulp-express对你来说是对的。它将您的快速脚本作为服务器运行，带有livereload！
答案 3 :(得分：1)
我有同样的问题，但无法找到任何相关内容。我的解决方案最终得到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插件=）
答案 4 :(得分：0)
查看gulp-nodemon代码更改后将重新启动服务器。
示例：
gulp.task('develop', function () {
nodemon({ script: 'app.js', ext: 'html js' })
.on('restart', function () {
console.log('restarted!')
})
})
答案 5 :(得分：0)
实时重新加载应该适用于任何nodejs脚本。这是一个很好的gist。
答案 6 :(得分：0)
要实时将前端和后端更改重新加载到浏览器。还可以选择不使用Gulp。然后，正确的软件包组合是'livereload'，'connect-livereload'和'nodemon'的一点帮助。他们的合作方式如下：
livereload打开一个高端口，并通知浏览器更改的公共文件connect-livereload猴子用连接到此高端口的代码片段修补了每个投放的HTML页面nodemon然后用于在更改的后端文件上重新启动服务器在Express中设置实时重载
您将要设置Express，以便在nodemon引起的重新启动期间启动livereload服务器以监视公共目录并ping通浏览器：
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());
使用nodemon启动Express
然后，您将使用nodemon启动服务器，例如，使用专用监视脚本npm run watch。
这里的关键点是忽略livereload已经监视的公共目录。您还可以配置带有非默认扩展名的文件，例如pug和mustache，以进行监视。
"scripts": {
"start": "node ./bin/www",
"watch": "nodemon --ext js,pug --ignore public"
},
您可以在"Refresh front and backend changes to browser with Express, LiveReload and Nodemon."
中阅读更长的解释答案 7 :(得分：-1)