node.js - Grunt + Node 应用程序 + livereload

Question

环顾四周后没有找到正确的答案(最接近且不完整的是: Grunt livereload with node.js application )，我决定问一下。

给定:

Node 应用程序，客户端+服务器(带express)

期望:

1. 能够使用 node-dev 启动上述应用程序或supervisor以便对服务器文件的更改重新加载服务器
2. 能够配置 grunt-contrib-watch，以便对客户端文件的更改重新加载浏览器
3. 除非从上面可以清楚地看出 - 服务器和客户端都部署在同一个express服务器上

问题与尝试

尽管尝试了监视、连接、并行、并发等各种排列，但主要问题仍然存在 - 无法注入(inject) livereload脚本进入相同的 domain:port express 开始了。

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

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'
]);

根据您提到的问题，即无法注入(inject) livereload 脚本，我认为这是与连接配置相关的问题。现在 grunt-contrib-livereload 已弃用，现在包含在监视中，因此可能是 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 %>'
          ]
        }
      }
    }

希望这对您有帮助。谢谢