Логичным решением будет использовать сборщик( например
gulp)
- что даст возможность собирать scss/sass/less
- "подключать html к html", например при помощи gulp-rigger
- собирать js
- прочие радости
для этого придется написать таск для gulp
gulp.task('html', function () {
gulp.src('src/*.html') //Выберем файлы по нужному пути
.pipe(rigger()) //Прогоним через rigger
.pipe(gulp.dest('dist/')) //Выплюнем их в папку build
.pipe(browserSync.reload({stream: true})); //И перезагрузим наш сервер для обновлений
});
и => ваш собираемый html будет выглядеть так
<!DOCTYPE html>
<html>
<head lang="ru">
<meta charset="UTF-8">
<title>Пум-пум</title>
</head>
<body>
//= template/header.html
<section class="content">
Content
</section>
//= template/footer.html
</body>
</html>
стоит заметить что при использовании
browsersync страница будет обновляться при изменении стилей и html templat'ов
Средний