Какой плагин либо препроцессор html использовать для сборки верстки из блоков?

Question

[vovkka]

Добрый день.
Подскажите наилучший вариант использования блочной структуры при написании html.
Использую emmet и считаю что написать ul>li*5>a[href=#]{item$} быстрее чем писать какие либо циклы и тп на том же pig jade и тп. Соответственно ответы типа используй препроцессор не подходят... не нравится мне их синтаксис.
Вопрос: что использовать чтобы к примеру была папка page со всеми страницами, и была папка blocks с блоками header footer nav и тп... и чтобы это все дело можно было подключать в страницы безболезненно + компиляция gulp ом.

Кто что использует? Буду очень благодарен!

Answer 1

[Александр Талалаев]

В самом простом случае тебе нужен nunjucks.
А так можешь использовать сборку типа blendid, там уже есть nunjucks, есть browsersync так что можно быстро и удобно верстать.
У blendid только в Винде небольшой баг(хотя это не у него, а у gulp/yarn), поэтому в package.json можно добавить:

,
   "scripts": {
    "start": "yarn run blendid",
    "build": "./node_modules/.bin/blendid -- build"
  }

Ну и тогда yarn start запустит сервер разработки(browsersync), а yarn run build соберет проект.
Ну и да для всей движухи нужно установить ноду и сам yarn

Comments

[vovkka]

Александр Талалаев а с твиг дело имели ? как он? я его поставил, вроде он тоже выполняет задачу по блокам...

[Александр Талалаев]

vovkka: Твиг отличный(может даже лучший шаблонизатор на php), хотя я перешел на blade, так как сейчас в основном делаю проекты на laravel.
Но твиг же требует php и ко. Хотя если задача сдать проект на Twig, чтобы его потом сразу интегрировали куда либо где тоже есть Twig то это конечно оправдано.
А вот если нужно просто верстать, то советую попробовать Blendid или другое решение с brwosersync, очень удобно когда большая часть изменений в коде, даже не перегружает страницу при разработке, а сразу встраивается и показывается в браузере.

[vovkka]

Александр Талалаев: спасибо, буду пробовать!

Answer 2

[iBird Rose]

верстай на php и подключай блоки через require
к примеру openserver нормально дружит с browsersync, а значит все что связанно с gulp - будет работать.

Answer 3

[lipinart]

Я юзаю gulp-rigger Плагин позволяет импортировать один файл в другой простой конструкцией

//= footer.html

Answer 4

[Александр Алексеев]

gulp-rigger - отличная штука для таких целей
давно использую

держи мою болванку для сборки всего этого чуда
https://yadi.sk/d/mLsOel0U3LueJd

sass-less уже сам)

Answer 5

[dpripa]

Простое решение инклудинга в обычном html + с парой допольнительных вкусных плюшек:
https://www.npmjs.com/package/gulp-file-include