Thank you for taking the time to read my post. I am in need of some advice on which tools would be a good fit to build a set of simple HTML, JS and CSS assets for CDN deployment. I have used webpack in the past to do similar packaging, however, webpack 4 seems to be even more difficult to use than previous versions. Particularly, this new version of webpack wants to make everything I minify JavaScript, instead of just keeping it as css. Parcel seemed promising until I realized that it requires an HTML entry point, leaving me lost in terms of trying to get it to generate the HTML files via something like posthtml-extend. I need some help from someone with more front-end experience than I have to choose the simplest and least painful approach.
Basic Requirements
- Create static HTML files from a hierarchical set of templates. These templates are simple HTML pages and components that just need basic induce and property support prior to rendering.
- Minify CSS/JS/HTML files.
- Add cache busting hash to CSS/JS/HTML paths in the generated HTML files.
HTML Input Example
In this example, I would like to start with base.html and create a handful of files with different "content" substituted in from a file or property for each block. I would like to have the generated files minified and have <link href=, <script src= and <a href= tags fixed for cache busting. I would also like control of where these files will be output and the name of the file being output.
assets/html/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App - <block name="title"></block></title>
<!-- Minify and add cache busting -->
<link href="/css/app.css" rel="stylesheet" type="text/css">
<!-- Minify and add cache busting -->
<script src="/js/app.js"></script>
</head>
<body>
<!-- Add content block for another file -->
<block name="content"></block>
</body>
</html>
assets/html/pages/page1.html
<h1>hello world!</h1>
<a href="/sub/page2.html">next</a>
Aucun commentaire:
Enregistrer un commentaire