使用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中包含实时重新加载脚本：

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

在关闭正文标记

之前，在views / index.ejs文件中插入上述标记

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

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。