0

我想知道是否有可以用来加速静态 html 和 css 开发的快速原型制作工具。

我的工作流程通常是在进行任何编程之前先构建 html 和 css。我通常会一页一页地构建页面，并将常见元素分成包含内容以保持干燥。

过去，我使用 PHP 或其他东西将所有内容包含在一起。

我想知道我是否可以使用 webpack 实现这一点。

  • 我将有 1 个 html 文件/页面
  • 在每个 html 文件中，我需要包含来自其他静态文件的 html 片段
  • 我需要 LESS 编译（我可以用 webpack 做到这一点）
  • 我还需要 css 的热重载（这很容易）
  • 当我更改 html 片段（例如页脚的页眉）时，我还需要热重载才能工作 我需要重新加载整个页面

有什么我可以用来做这件事的吗？

感谢您的关注

4

2 回答 2

1

使用HTML Webpack 插件和您选择的支持片段/部分的模板引擎。

查看HTML Webpack 插件的模板选项。

于 2017-02-21T20:28:23.750 回答
0

如果您对此有很多需求，也许您应该构建适合您需求的自己的工具。

以下是您可能会考虑的一些可能选项：

  • express和一些模板引擎（pug或mustache）
  • webpack使用@floriangosse 建议的 HTML 插件
  • grunt或者gulp使用 watcher 插件来编译你的模板和样式表
  • browserSync用于在浏览器中重新加载内容

我会选择 webpack，因为它提供了很多开箱即用的功能（+ loader）。我发现创建一个包含用于开发、生产和一些您可以继承的基本配置的 webpack 配置的小型存储库，一个包含您的 html 和 npm 脚本或一些 gulp/grunt 文件的公共文件夹来启动它是很有帮助的。

编辑我不建议构建您自己的工具，而是您自己的定制工具套件

于 2017-02-21T20:37:21.813 回答