使用 grunt-express-server 和 grunt-contrib-watch 实时重新加载

Question

我正在使用 grunt-express-server 和 grunt-contrib-watch 为我的开发环境获取 Livereload 功能。但不知何故，浏览器重新加载不起作用，监视任务确实会侦听文件的更改，但不会导致浏览器重新加载。

下面是 Gruntfile.js

module.exports=function(grunt){    

    grunt.loadNpmTasks('grunt-express-server');
    grunt.loadNpmTasks('grunt-contrib-watch');


    grunt.initConfig({   

    watch: {    
        options: {  livereload: true,  },
        express: {
                   files:  [ 'views/index.ejs','app.js' ],
                   tasks:  [ 'express:dev' ],
                   options: {livereload: true,
                            spawn: false
                            }
                 }
           }
        ,

    express: {
               options: {              
                     port:8080
                        },
               dev: {
                     options: {
                          script: 'app.js'
                              }
                    }
            }


  });

    grunt.registerTask('serve', [ 'express:dev', 'watch' ])

}

我已经阅读了这篇文章 grunt-express-server with contrib-watch 和 http://thanpol.as/grunt/Grunt-with-express-server-and-Livereload/ ，但无法找出问题所在。

这里是代码https://github.com/eMahtab/watch-reload的链接

这是 grunt serve 的快照

Answer 1

您必须在 HTML 中包含 Live Reload Script：

<script src="http://localhost:35729/livereload.js"> </script>

在你的views/index.ejs文件中你的结束body标签之前插入上面的标签

您可以在监视任务中设置默认端口：

watch: {    
    options: {  livereload: true,  },
    express: {
               files:  [ 'views/index.ejs','app.js' ],
               tasks:  [ 'express:dev' ],
               options: {livereload: 1338,
                        spawn: false,
                        }
             }
            } 

具有自定义端口的脚本将是：

<script src="http://localhost:1338/livereload.js"> </script>

更多参考请查看以下examples。