咕噜livereload与node.js的应用(Grunt livereload with node

2019-08-17 02:15发布

我已经写在Node.js的应用程序(使用Express&socket.io), 我想用步兵编译我的客户端的东西与livereload在开发和连接到Node.js应用程式。 我怎样才能做到这一点? (优选地没有在另一个端口的另一个端口和客户端运行,因为的路径和跨域问题Node.js的应用程序,)

我还安装了约曼和它的使用开箱咕噜-的contrib-livereload包的,但是从我的理解它是如何使用Node.js连接服务器提供的客户端文件,因此被从我的Node.js应用分离..

从由约曼生成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'
]);

Answer 1:

不知道是否你已经解决了这个问题,但我已经加入我的快递应用程序连接到“connect.livereload.options.middleware”选项中间件做到了这一点。

然而,服务器端代码自动重装不起作用。 对于您可以实现用一个简单的“节点./server.js”重载型服务器上,创建一个连接中间件充当一个透明的代理到开发服务器,您的标准之前调用你的Gruntfile.js内连接/ livereload服务器启动。

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;


Answer 2:

我的回答是使用Gulp我比较熟悉,而不是咕噜,但我想同样的方法将与工作Grunt为好。

见我的仓库 (和一老一 )和我其他的答案 。

也不需要任何浏览器扩展,也不添加任何脚本文件

该解决方案是基于gulp-livereloadconnect-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);

见包的详细信息,他们内部是如何工作的。



Answer 3:

在Gruntfile,删除connect:livereloadopenserver任务。

添加下面的脚本的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>


文章来源: Grunt livereload with node.js application