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文件。