一口氣加載

Question

我有一個我用Node構建的網站。通過從命令行運行node server.js，我可以成功啓動並運行該站點。然後我通過瀏覽器訪問「http://localhost:3000」訪問該網站。我現在正在嘗試改進網站周圍的一些構建過程。爲此，我依靠Gulp。

我想在HTML或CSS文件發生變化時自動重新加載網頁。我偶然發現了gulp-livereload插件。我已按照文檔中的描述安裝它。然而，當我訪問「http://localhost:35729/」在瀏覽器中，我只看到以下內容：

{ 
    minilr: "Welcome", 
    version: "0.1.8" 
} 

我一飲而盡任務的配置是這樣的：

gulp.task('launch', function() { 
    var toWatch = [ 
     'src/**/*.html', 
     'src/**/*.css' 
    ]; 

    livereload.listen(); 
    gulp.watch(toWatch, function() { 
     console.log('reloading...'); 
     livereload(); 
    }) 
} 

我看不到我的主頁像我這樣做當我在運行node server.js後訪問「http://localhost:3000」時。我錯過了什麼？

Answer 1

你爲什麼訪問'http://localhost:35729/'？如果這是livereload正在監聽的端口，那麼它將不會顯示您的站點，因爲如您所說，您的站點可從'http://localhost:3000'獲得。

我假設你已經正確配置了gulp。通過它我的意思是livereload聽着，你看在你的文件的變化，並在管你有「.pipe（livereload（）」。

1. 您必須安裝https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
2. ，你必須運行你的應用程序「http://localhost:3000」的Chrome瀏覽器。
3. 你會在瀏覽器插件欄新圖標（這是這個插件的圖標）
4. ，你必須點擊該圖標即可運行該插件
5. 完成

現在當你改變文件中的東西時，gulp watcher會注意到這一點，做一些工作，並通知chrome插件有變化，這個插件會刷新你的項目頁面。

Answer 2

實時重新加載是一種向瀏覽器發送通知以進行重新加載的協議。但是你需要一個瀏覽器插件來監聽和重新加載，儘管可以使用腳本標籤放棄插件。

gulp-livereload插件只關心livereload服務器的實現，您仍然需要通過http服務器從gulp服務文件。

您可以使用一個兼有gulp-connect的吞嚥模塊。

但是，除非您因爲某種原因需要重新加載，否則我建議您使用browserync。 Browsersync是livereload的一個不錯的替代方案，它有助於在瀏覽器之間同步您的視圖的能力。由於它將腳本標記插入到html中，並在套接字上偵聽，因此不需要任何插件即可使其工作。它甚至可以在移動設備上運行。

使用瀏覽器同步的吞嚥任務可能如下所示。不要忘了將瀏覽器同步添加到您的 包。JSON文件

var browserSync = require('browser-sync').create(); 

gulp.task('serve', [] , function(cb){ 

    browserSync.init({ 
     open: true , 
     server: { 
      baseDir: "src" 
     } 
    }); 

    gulp.watch([ 
     'src/**/*' , 
    ] , ['serve:reload']); 

}); 

gulp.task('serve:reload' , [] , function(){ 
    browserSync.reload(); 
});