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

這裏是咕嚕的快照服務

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。