15

我在 Node.js 中编写了一个应用程序（使用 Express 和 socket.io），我想在开发和连接到 Node.js 应用程序时使用 Grunt 用 livereload 编译我的客户端内容。我怎样才能做到这一点？（由于路径和跨域问题，最好不要在另一个端口中运行 Node.js 应用程序和在另一个端口中运行客户端）

我还安装了 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'
]);
4

3 回答 3

7

不确定您是否已经解决了这个问题，但我通过将我的快速应用程序添加为附加到“connect.livereload.options.middleware”选项的中间件来完成此操作。

但是，服务器端代码的自动重新加载不起作用。为此，您可以使用简单的“node ./server.js”实现一个重新加载友好的服务器，创建一个连接中间件作为您的开发服务器的透明代理，并在您的标准连接/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;
于 2013-03-26T06:01:51.497 回答
1

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

请参阅我的存储库（和较旧的存储库）和我的其他答案。

既不需要任何浏览器扩展，也不需要向您的文件添加任何脚本。

该解决方案基于gulp-livereload和connect-livereload包一起工作。首先，您启动实时重载侦听器，并将任何文件更改通过管道传输（更改*为任何更具体node-glob的以仅侦听特定文件）：


var gulpLivereload = require('gulp-livereload');

gulpLivereload.listen();

gulp.watch('*', function(file) {
  gulp.src(file.path)
    .pipe(gulpLivereload());
});

其次，您通过以下方式配置服务器以将侦听器用作中间件connect-livereload：


var connect = require('connect');
var connectLivereload = require('connect-livereload');

connect()
  .use(connectLivereload())
  .use(connect.static(__dirname))
  .listen(8080);

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

于 2015-04-19T12:34:29.897 回答
0

在 Gruntfile 中，从任务中移除connect:livereload和移除。openserver

在 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>
于 2013-06-29T09:30:37.513 回答