Command line tool to compile HTML files — for building static HTML sites

Question

I'm looking for a command line tool that would watch a project directory and compile HTML files.

Use-case description:

Occasionally I'm building static HTML sites. But changing footer and header content on every page is tedious. I hope that there's some command line tool that would allow to include other HTML files (e.g. header and footer) and then compile them into final HTML files. And maybe do that automatically while watching a project directory.

Requirements:

• It should use plain HTML mostly (i.e. it shouldn't use its own syntax like HAML to create HTML tags).

• It should allow to include other HTML files. For example header.html and footer.html.

• It should have some conditional mechanism to handle menus (namely inserting class in header.html depending on what content page it is).

• It could possibly watch a project directory and compile the files OR it could be run as a command line tool. For example if page.html was to include external header.html and footer.html templates in it, the resulting compiled page.html would have header and footer parts embedded in it.

Something similar: A similar workflow is with Zurb's "Foundation for Emails 2". It's installed with NPM. And then it is launched in a project folder using command line. It has variables that are 'global' across templates. It allows to include templates in other templates. After compilation I get a folder with static html files.

What I'm NOT looking for: I'm not looking for front-end on-the-fly compilation frameworks like React or VUE. I'm also not looking for a GUI HTML editor.

Answer 1

I've found that the solution is to use Gulp with additional packages (namely Panini to compile html).

Here are some of the packages I've used:

• gulp — runs other packages (see below), moves files from source to distribution directory.
• panini — handles compiling HTML files from templates, plus other useful stuff like adding 'active' classes to menu items and iterating through lists. I was hoping to find a tool that is less brand-dependent, but this one does everything I need and is relatively easy to use.
• gulp-sourcemaps, gulp-autoprefixer, gulp-sass — can be used to compile SASS into CSS, while automatically adding browser prefixes and sourcemaps.
• browser-sync — used to serve pages from distribution directory and automatically reload browser page when something changes in the source code.

Here are some tutorials I've used to learn how to use Gulp to create a build tool to create static sites:

• Beginner Gulp video tutorials
• Official Gulp documentation
• Browser Sync documentation
• Gulp tutorial
• Gulp for SASS and JS Workflow
• Panini documentation
• Panini video tutorials and docs
• Frontend boilerplate 1
• Frontend boilerplate 2
• Frontend boilerplate 3
• Frontend boilerplate 4
• Frontend boilerplate 5

Note to those who are not used to terms like build tools or build process, NPM, Node.JS: You must learn Gulp first, before you can use what's described here successfully. Learning NPM in detail is not required. Just need to know npm install --save-dev and npm init commands.

Also note that there are different versions of Gulp. Some tutorials are for version 3 and others are for version 4. They are not fully compatible, so you have to reference official Gulp documentation often.

Frontend boilerplates are to learn by example.