README

gulp-templater

Плагин созданный для быстрого создания HTML страниц, из исходных файлов сохраняя структуру папок страниц.

установка:

npm install --save

Главный шаблон в который встраивается содержимое страниц это обычная html страница, с добавленными в нужные места определенными полями.

По умолчанию всегда текст новой страницы в шаблоне буде заменять строку <%content%>.

В страницы можно так же вставлять дополнительные части шаблонов которые повторяются на других страницах. Такие как меню, хэдер или футер.

Для их вставки в опциях нужно указать значение partials с путем до папки с этими частями. Части должны иметь расширение .html к примеру menu.html.

В основном шаблоне занчение <%%menu%%> будет заменено содержимым данного шаблона.

Все остальные поля берутся из самой страницы, оформленной в специальном формате.

Создание страницы проходит по такому сценарию.

Берется исходный шаблон.
Проверяются есть ли части которые вставляются в шаблон, если да они находятся и выполняется данная операция.
Далее проходим по страницам и вставляем их с переменными в получившийся шаблон и сохраняем результат.

Пример страницы:


title: В шаблоне этот текст заменит переменную <%title%>
foo_bar: В шаблоне этот текст заменит переменную <%foo_bar%>
=====
<p>
тут обычная html разметка страницы, в шаблоне она заменит переменную <%content%>
</p>

Пример шаблона:

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title><%title%></title>
 </head>
 <body>
    <%%menu%%>
    
    <%content%>

    <%foo_bar%>
 </body>
 </html>

Пример использования:

У нас есть шаблон, и есть группа папок со страницами, которые нужно превратить в html страницы сохраняя пути папок.

.
├── content
│   └── style.css
├── pages
│   ├── index.html
│   └── subfolder
│       └── second.html
├── partials
│   └── menu.html
└── template
    └── layout
        └── index.html

Нам необходимо на основе шаблона source/template/layout/index.html

Построить список страниц находящихся в папке source/pages сохраняя их структуру папок и уровень вложенности.


var gulp = require('gulp');
var templater = require('gulp-templater');

gulp.task('test', function() {
    gulp.src([
            './source/pages/**'  // папки со страницами
        ])
        .pipe(templater({
            layout: 'source/template/layout/index.html', // путь до шаблона
            dist: 'public', // папка в которую будут сложены готовые страницы
            source: 'source/pages', // участок пути до папки, который нужно исключить
            partials: 'source/partials' // части страниц типа footer
        }));
});

Usage no npm install needed!