Grunt使用node.js应用程序进行livereload

我已经在Node.js(用Express&socket.io)编写了一个应用程序, 我想用Grunt在开发和连接到Node.js应用程序时使用livereload编译我的客户端的东西。 我怎样才能做到这一点? (最好不要在另一个端口运行Node.js应用程序,另一个端口运行客户端,因为path和跨域问题)

我也安装了Yeoman,它使用了开箱即用的grunt-contrib-livereload软件包,但是据我所知,它使用Node.js Connect服务器来提供客户端文件,从而与Node.js应用程序分离。

来自Yeoman生成的Gruntfile.js的示例:

var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet; var mountFolder = function (connect, dir) { return connect.static(require('path').resolve(dir)); }; // ... cut some parts grunt.initConfig({ watch: { livereload: { files: [ '<%= yeoman.app %>/*/*.html', '{.tmp,<%= yeoman.app %>}/styles/*.css', '{.tmp,<%= yeoman.app %>}/scripts/*.js', '<%= yeoman.app %>/images/*.{png,jpg,jpeg}' ], tasks: ['livereload'] } // ..cut some parts }, connect: { livereload: { options: { port: 9000, middleware: function (connect) { return [ lrSnippet, mountFolder(connect, '.tmp'), mountFolder(connect, 'app') ]; } } } } // ..cut some parts }); grunt.registerTask('server', [ 'clean:server', 'coffee:dist', 'compass:server', 'livereload-start', 'connect:livereload', 'open', 'watch' ]); 

不知道你是否已经解决了这个问题,但是我已经通过添加我的快速应用程序作为连接到“connect.livereload.options.middleware”选项的中间件来完成此操作。

但是,服务器端代码的自动重新加载不起作用。 为此,您可以使用简单的“node./server.js”实现一个重载友好的服务器,创build一个连接中间件,作为您的开发服务器的透明代理,并在您的标准连接/ livereload之前调用Gruntfile.js服务器启动。

 connect: { options: { port: 9000, // change this to '0.0.0.0' to access the server from outside hostname: 'localhost' }, livereload: { options: { middleware: function (connect) { return [ lrSnippet, mountFolder(connect, '.tmp'), mountFolder(connect, 'app'), require('./server') // your server packaged as a nodejs module ]; } } } } 

server.js:

 var app = express(); ... // Export your server object. module.exports = app; 

我的答案是使用我更熟悉的Gulp ,而不是Grunt,但是我想像Grunt也可以使用同样的方法。

看我的存储库 (和一个较旧的 )和我的其他答案 。

无论是任何浏览器扩展,也不需要添加任何脚本到您的文件

该解决scheme基于gulp-livereloadconnect-livereload包一起工作。 首先,你启动你的实时重载监听器 ,并将其中的任何文件更改pipe道(更改*到任何更具体的node-glob来只听特定的文件):

var gulpLivereload = require('gulp-livereload'); gulpLivereload.listen(); gulp.watch('*', function(file) { gulp.src(file.path) .pipe(gulpLivereload()); });
var gulpLivereload = require('gulp-livereload'); gulpLivereload.listen(); gulp.watch('*', function(file) { gulp.src(file.path) .pipe(gulpLivereload()); }); 

其次,通过connect-livereload将服务器configuration为使用侦听器作为中间件:

var connect = require('connect'); var connectLivereload = require('connect-livereload'); connect() .use(connectLivereload()) .use(connect.static(__dirname)) .listen(8080);
var connect = require('connect'); var connectLivereload = require('connect-livereload'); connect() .use(connectLivereload()) .use(connect.static(__dirname)) .listen(8080); 

有关如何在内部工作的更多信息,请参阅包。

在Gruntfile中,删除connect:livereload并从server任务中open

在HTML文件中添加以下脚本

 <!-- livereload script --> <script type="text/javascript"> document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1" type="text/javascript"><\/script>') </script>