Grunt livereload與node.js應用程序

Question

我已經在Node.js中編寫了一個應用程序（使用Express & socket.io）和我想使用Grunt在開發和連接的同時使用livereload編譯客戶端的東西Node.js應用程序。我怎樣才能做到這一點？（由於路徑和跨域問題，最好不要在另一個端口運行Node.js應用程序，而在另一個端口運行客戶端）

我也安裝了Yeoman，它使用開箱即用的grunt-contrib-livereload軟件包，但從我的理解它是如何使用Node.js連接服務器提供的客戶端文件，從而從我的Node.js應用程序分開..

例由約曼產生Gruntfile.js：

var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet; 
var mountFolder = function (connect, dir) { 
    return connect.static(require('path').resolve(dir)); 
}; 

// ... cut some parts 
grunt.initConfig({ 
    watch: { 
     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('server', [ 
    'clean:server', 
    'coffee:dist', 
    'compass:server', 
    'livereload-start', 
    'connect:livereload', 
    'open', 
    'watch' 
]); 

Answer 1

不當然，如果你已經解決了這個問題，但我已經通過添加我的快速申請作爲中間人做到了這一點重新連接到'connect.livereload.options.middleware'選項。

但是，自動重新加載服務器端代碼不起作用。爲此，您可以使用簡單的'node./server.js'實現一個重載友好的服務器，創建一個連接中間件，作爲您的開發服務器的透明代理，並在您的標準連接/ livereload之前在您的Gruntfile.js中調用它服務器啓動。

connect: { 
    options: { 
     port: 9000, 
     // change this to '0.0.0.0' to access the server from outside 
     hostname: 'localhost' 
    }, 
    livereload: { 
     options: { 
      middleware: function (connect) { 
       return [ 
        lrSnippet, 
        mountFolder(connect, '.tmp'), 
        mountFolder(connect, 'app'), 
        require('./server') // your server packaged as a nodejs module 
       ]; 
      } 
     } 
    } 
} 

server.js：

var app = express(); 

... 
// Export your server object. 
module.exports = app; 

Answer 2

在Gruntfile，從server任務刪除connect:livereload和open。在HTML文件中

<!-- livereload script --> 
<script type="text/javascript"> 
    document.write('<script src="http://' 
     + (location.host || 'localhost').split(':')[0] 
     + ':35729/livereload.js?snipver=1" type="text/javascript"><\/script>') 
</script> 

Answer 3

我的回答是使用Gulp我比較熟悉，而不是咕嚕

添加下面的腳本，但我想同樣的方法將與Grunt正常工作。

請參閱my repository（和an older one）和my other answer。

既不需要任何瀏覽器擴展，也不需要向您的文件添加任何腳本。

該解決方案基於gulp-livereload和connect-livereload包協同工作。首先，你開始你的現場重裝聽衆和管道到它的任何文件改變（改變*任何更具體的node-glob聽只有特定的文件）：

 

var gulpLivereload = require('gulp-livereload'); 

gulpLivereload.listen(); 

gulp.watch('*', function(file) { 
    gulp.src(file.path) 
    .pipe(gulpLivereload()); 
}); 
 

其次，你將服務器配置爲使用聽衆中間件通過connect-livereload：

 

var connect = require('connect'); 
var connectLivereload = require('connect-livereload'); 

connect() 
    .use(connectLivereload()) 
    .use(connect.static(__dirname)) 
    .listen(8080); 
 

見包的詳細信息，他們內部是如何工作的。