Grunt：我需要在每次保存時編譯HTML以查看結果嗎？

Question

開發一個HTML項目時，我正在使用include-replace grunt插件來避免重複內容（例如頁眉，頁腳，側邊欄等）的重複。我的index.html文件看起來像這樣。現在

<!-- @@include('header.html') --> 

<p>Some Content Goes Here.</p> 

<!-- @@include('footer.html') --> 

，問題是，如果我訪問這個頁面就顯示什麼（除了Some Content Goes Here.），如果我查看瀏覽器的頁面源上面的代碼是有，因爲它是。

然後我意識到我必須將這個index.html編譯到另一個位置（您可能會說/dist/index.html）。通過這樣做，現在我能夠看到所需的結果。但是，這種方法的問題是，只要我在源html中進行了很小的修改，就必須將src文件（具有上面提到的代碼）編譯到dist文件夾，然後我必須訪問dist/index.html能夠在瀏覽器中看到所需的結果。

Plz。告訴我在這方面是否正確，或者我做錯了什麼。

Answer 1

是的，這是它的工作方式。一些解釋

某些內容會在此處顯示。

當您在文件類型這樣的事情，你要創建一個預處理模板文件，這將需要通過繁重的任務傳遞給把它變成一種形式，通過瀏覽器是可以理解的（讓叫它編譯的文件）。

這很明顯，如果您對模板文件中包含的某個文件進行了更改，則需要重新運行grunt任務以生成編譯文件，然後該文件將反映這些包含的更新內容文件。

但是，如果你有這樣的一個模板文件（如果咕嚕包括替換我不知道允許CSS，JS要插入這樣一來，這只是給你一個想法）

<link rel="stylesheet" type="text/css" href="style.css" /> 
<!-- @@include('header.html') --> 
<p>Some Content Goes Here.</p> 
<!-- @@include('footer.html') --> 

如果在這種情況下您要更改style.css，則不必重新運行grunt任務，因爲已編譯的index.html將具有相同的style.css標記。

爲了簡化開發過程中，您可以使用grunt watch plugin，它將查看您包含在index.html文件中的所有模板文件，並且如果它們中的任何一個發生更改， uld重新運行所有必要的任務來生成最終編譯的index.html文件。