Question

环顾四周，找不到合适的答案（最接近和不完整的是： Grunt livereload with node.js application），我决定问。

假设：

节点应用，客户端+服务器（带快递）

所需

使用node-dev或supervisor启动上述应用的功能，以便更改服务器文件重新加载服务器
配置grunt-contrib-watch的功能，以便更改客户端文件重新加载浏览器
除非上述内容明确 - 服务器和客户端都使用相同的快递服务器进行部署

问题＆amp;尝试

尽管尝试了各种各样的监视，连接，并行，并发等排列，但主要问题仍然存在 - 无法将livereload脚本注入同一个 domain:port 快递开始。

显然，我可以配置从客户端到服务器的所有REST和套接字调用，以便他们在开发期间使用某种前缀并部署客户端 `127.0.0.1＆＃39;上的不同端口上的服务器或者其他类似的东西，同时将它在生产中更改为同一台服务器。

Answer 1

请查看以下示例以添加要观看的文件信息：

grunt.initConfig({
    watch: {
        /*example Watches files for changes in JS, scss and gruntfile*/
        js: {
          files: ['<%= yeoman.app %>/<%= yeoman.scripts %>/**/*.js'],
          tasks: ['newer:jshint:all'],
          options: {
            livereload: true
          }
        },
        compass: {
          files: ['<%= yeoman.app %>/<%= yeoman.styles %>/**/*.{scss,sass}'],
          tasks: ['compass:server', 'autoprefixer']
        },
        gruntfile: {
          files: ['Gruntfile.js']
        },
        /*end example*/
        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('node-dev', [ // Now you run task using command grunt node-dev
    'clean:server',
    'coffee:dist',
    'compass:server',
    'livereload-start',
    'connect:livereload',
    'open',
    'watch'
]);

根据您提到的问题，即无法注入livereload脚本，我认为这是与连接配置相关的问题。现在 grunt-contrib-livereload 已弃用，现在包含在watch中，因此liverealod片段代码可能会在此处创建问题。所以请尝试下面的代码，我在我的一个项目中使用yeoman实现这个。

connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: '0.0.0.0',
        livereload: 35729
      },
      livereload: {
        options: {
          open: true,
          base: [
            '.tmp',
            '<%= yeoman.app %>'
          ]
        }
      }
    }

我希望这可以帮到你。感谢

Answer 2

有关基于Gulp的简单解决方案，请参阅this repository和my answer here。

Grunt + Node app + livereload

2 个答案: