blocks|key|4624686|text|我也有同样的问题，并且找不到任何相关的东西。我的解决方案以下面这段Gulpfile代码结束|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4624687|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+=+''+%2B+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+%2B+'/**/*.handlebars',
++++++++buildDir+%2B+'/**/*.html',
++++++++buildDir+%2B+'/**/*.js',
++++++++buildDir+%2B+'/**/*.css'
++++],+function(event)+{
++++++++var+fileName+=+path.relative(path.join(__dirname,+buildDir),+event.path);
++++++++plugins.util.log('Detected+updated+file+'+%2B+fileName+%2B+',+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']);
});|code-block|syntax|javascript|4624688|您需要安装tiny-lr、async、gulp-util和gulp-load-plugins包才能运行此示例。我想我将为它创建一个单独的Gulp插件=)|4624689|entityMap^0|X|8|0|0|5|7|D|5|J|9|T|H|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

I had the same issue and was not able to find anything related. My solution ends up with the following piece of code in <code>Gulpfile</code>:

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

You'll need to install <code>tiny-lr</code>, <code>async</code>, <code>gulp-util</code> and <code>gulp-load-plugins</code> packages for this sample to work.
I guess that I'll create a separate Gulp plugin for it =)

blocks|key|118914|text|看看gulp-nodemon，它会在代码更改时重新启动服务器。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|118915|示例：|118916|gulp.task('develop',+function+()+{
++nodemon({+script:+'app.js',+ext:+'html+js'+})
++++.on('restart',+function+()+{
++++++console.log('restarted!')
++++})
})|code-block|syntax|javascript|118917|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.org/package/gulp-nodemon^0|2|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Take a look at <a href="https://www.npmjs.org/package/gulp-nodemon" rel="nofollow">gulp-nodemon</a> which will restart your server when code changes.

Example:

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

blocks|key|118943|text|实时重新加载应该可以与任何nodejs脚本一起使用。这是一个很好的gist。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|118944|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/hansent/9417349^0|X|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Live reload should work with any nodejs script. Here is a good <a href="https://gist.github.com/hansent/9417349" rel="nofollow">gist</a>.

blocks|key|4624709|text|您可以看到我在http://github.com/arvsr1988/gulp-expressjs-setup上使用的设置|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4624710|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/arvsr1988/gulp-expressjs-setup^0|7|1C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can see the setup I used at <a href="http://github.com/arvsr1988/gulp-expressjs-setup" rel="nofollow">http://github.com/arvsr1988/gulp-expressjs-setup</a>

blocks|key|118956|text|gulp-express是最适合你的东西。它使用livereload将您的express脚本作为服务器运行！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|118957|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/gulp-express^0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="https://www.npmjs.com/package/gulp-express" rel="nofollow">gulp-express</a> is the right thing for you. It runs your express script as a server, with livereload!

blocks|key|118975|text|这是我的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|118976|//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]
++++++++}
++++++});
++++});
});|code-block|syntax|javascript|118977|您还需要在express服务器中包含connect-livereload：|118978|app.use(require('connect-livereload')());|118979|将其包含在bodyParser之前。我已经读到，如果你有chrome+live+reload扩展，这是不需要的。|118980|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here's my solution:

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

You also need to include connect-livereload in your express server:

<pre><code>app.use(require('connect-livereload')());
</code></pre>

Include it before bodyParser. I have read that this is not needed if you have the chrome live reload extension.

I am trying to setup my <code>gulpfile.js</code> to use livereload on an express server without much luck. I see examples out there but they seem to be related to a static file server.

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

So I have an <code>app.js</code> file which does the standard express server with jade files, etc. What I want to do is get it to work with livereload from a gulp.js boot.

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

There are lots of plugins like <code>gulp-livereload</code>, <code>connect-livereload</code>, <code>gulp-connect</code>, <code>gulp-watch</code> so how can I get this wired up?

gulp.js livereload with express server?

服务器

我正在尝试将我的gulpfile.js设置为在express服务器上使用livereload，但没有太多的运气。我看到了一些示例，但它们似乎与静态文件服务器有关。 所以我有一个app.js文件，它用jade文件做标准的express服务器，等等。我想做的是让它在gulp.js引导下与livereload一起工作。app...

问使用express服务器加载gulp.js？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用express服务器加载gulp.js？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用express服务器加载gulp.js？
EN