gulp-pagebuilder - избавляемся от мегадлинного html-кода и верстаем бэм-методологично

Репост этой записи с Хабра

Недавно встала задача сверстать сайт не просто быстро, а очень быстро.

Поэтому было принято решение развернуть gulp-проект (до сегодняшнего дня я еще никогда не прибегал к его помощи) и сосредоточиться непосредственно на кодинге. К сожалению, этого оказалось недостаточно.

В процессе верстки стало понятно, что огромные полотна html- и js-кода с каждой строчкой все больше и больше замедляют процесс верстки. Если честно, данная проблема возникала и раньше, а сегодня встала особенно остро.

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

Порывшись в интернете, нашел плагин gulp-rigger. Получаса хватило для того, чтоб понять, что это совсем не то, что нужно:

  • во-первых, странная обработка имен файлов. Почему-то, он не может работать с файлами, имя которых содержит только расширение (например, .html), возможно есть и другие ограничения - не изучал;
  • во-вторых (и наиболее важно), что он не умеет работать рекурсивно - если попробуете подключить таким образом файл, в котором уже есть подключение другого файла, вывалится ошибка.

Стало понятно, что моих проблем он решить не может.

Поэтому был изучен необходимый минимум и написан собственный плагин для gulp - gulp-pagebuilder.

Вышеназванные проблемы rigger он решает. Использование максимально просто. Допустим, имеем директорию с html-исходниками src, файлы собираются в build

Таск для галпа будет выглядеть примерно так:


var gulp = require('gulp'),
    pagebuilder = require('gulp-pagebuilder'));

gulp.task('default', function () {
    gulp.src('src/*.html')
        .pipe(pagebuilder('src'))
        .pipe(gulp.dest('build/'));
});

pagebuilder('src') - сюда мы передаем директорию с исходниками, относительно которой будут искаться подключаемые файлы

В исходном файле подключаем другой файл:


<div class="someclass" >
    [snp tpl="some/block/in/src/somefile.html" class="foo bar" tag="sometag" content="bla bla bla" ]
</div>

Причем, параметры, которые можно передавать и использовать в подключаемом сниппете (отсюда и сокращение [snp ... ]), могут быть совершенно любые - class, tag и прочие. Главное, чтоб tpl указывал на существующий файл, в противном случае ничего не подключится.

Подключаемый файл выглядит примерно так


<div class="otherclass {class}" data-tag="{tag}" >
    Some content, {content}
</div>

В случае успешной сборки результирующий файл будет выглядеть следующим образом:


<div class="someclass" data-tag="sometag" >
    <div class="otherclass foo bar" >
        Some content, bla bla bla
    </div>
</div>

Плагин работает с любыми текстовыми форматами, инклудить с его помощью можно и js

Доступен в npm, код выложен на github. Устанавливается также, как и прочие гениальные вещи:


npm i gulp-pagebuilder --save

P.S. Кстати, как мне кажется, идея плагин замечательно вписывается в БЭМ-методологию от яндекса. Код каждого блока лежит в отдельном файле и вставляется простым инклудом.

P.P.S. Отдельно наблюдаю за комментариями и голосованием к статье на Хабре. Думал, что удалю ее через час-два, но как оказалось, идея кому-то нравится, даже в избранное добавляют. По комментариям: я им про "лапшу" HTML, а они мне про сборку JS и шаблонизаторы. Люди хотя бы читают сам текст статьи или осиливают только заголовок?