使用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 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。