После прочтения множества материала на тему методологии БЭМ, а так же длительной работы над сайтом, дизайн которого меняется именно в тех местах, которые встречаются на каждой странице, появилась нужда в технологии сборки основных html файлов (index.html, www/portf/*.html), с помощью включения в них других html файлов, каждый из которых представляет собой самодостаточный набор элементов.
Примерно по такой технологии это должно реализовываться (концепцию описываю из головы):
Каждый отдельный модуль ( элемент сайт, например:
<div id="menuWR"> <ul> ...</ul> </div> ) находится в отдельной папке со всеми собственными js и css (то есть, jq, который используется во всех папках, подключается из корневого файла), и получается примерно такой путь из корневого файла: "modules/menu/menu.html menu.js menu.css".
Index.html представляет из себя файл, в котором прописано куда и что включать из внешних файлов (например:
<nav> import("modules/menu/menu.html", "#menuWR")</nav>
)
После, происходит сборка и на выходе получается готовый файл index.html, внутри которого все элементы, взятые из модулей (пример index.html после сборки:
<nav> <div id="menuWR"><ul> ...</ul> </div></nav>)
То есть, вся сборка происходит на компьютере разработчика и на выходе абсолютно готовые html файлы.
Я могу представить (но не могу найти) такую реализацию на grunt, но возможно есть и другие способы это сделать
Простой