04.11.2015 15:25
mightymind 26 Источник
Недавно встала задача сверстать сайт не просто быстро, а очень быстро.

Поэтому было принято решение развернуть 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 () {
    return 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.

Исправлять ошибки/замечания и причесывать код до нормального вида буду позже, когда появится время. Также буду рад любому фидбеку
Есть ли в плагине необходимость и стоит ли его поддерживать дальше?

Проголосовало 106 человек. Воздержалось 55 человек.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Комментарии (26)


  1. k12th
    04.11.2015 18:34
    #8642823
    +7

    А что было не взять готовый шаблонизатор, который уже умеет это все и еще чуть-чуть? Для CSS полно прекрасных препроцессоров, для JS — browserify/systemjs.
    Всегда искренне поражают люди, которые могут, например, за полдня набросать плагин к гальпу, но не знают, что задача уже решена.


    1. Eternalko
      04.11.2015 19:31
      #8642887

      webpack systemjs browserify requirejs в доп.


      1. k12th
        04.11.2015 20:53
        #8642991

        При всей моей любви к RequireJS — SystemJS умеет все то же самое (подгрузка без сборки + AMD + сборка + плагины для транспиляции) плюс CommonJS и ES6 — и тоже на лету. Про вебпак ничего не могу сказать, но киллер-фич не вижу.


        1. dixoNich
          04.11.2015 21:08
          #8643015
          -1

          hot module replacement — не киллер фича?
          а то, что всё (стили, изображения и тд) — это тоже модули? и их так же можно подключать, заменять и так далее


          1. k12th
            04.11.2015 21:21
            #8643033
            -1

            Для меня лично вау-фактор — да, но не киллер-фича. И вот почему:

            1) Только для react
            2) живая перегрузка стилей без обновления страницы есть давно
            3) зачем вообще это нужно? Мелкие проблемы отсеиваются еще на стадии юнит-тестов, крупные решаются дебагом: бряк, вотчи, пошаговое выполнение, медитации, вот это всё.


            1. dixoNich
              04.11.2015 21:24
              #8643041

              Чего? Только для react? У нас проект на angular и всё это работает.


              1. k12th
                04.11.2015 21:32
                #8643049
                +1

                Ну предположим. Оффсайт как-то невнятно раскрывает эту тему, а сторонники обычно примерно той же степени адекватности, что и метеорщики и кроме восторженных воплей типа «оно собирает все мои скрипты и стили» ничего извлечь нельзя.


          1. k12th
            04.11.2015 21:37
            #8643063

            И что? Картинки вообще меняются полтора раза за жизнь проекта. Ливрелоад для стилей есть давно.


            1. dixoNich
              04.11.2015 22:36
              #8643121

              Суть вебпака в том, что всё — модуль. Это и есть киллер-фича.


              1. k12th
                04.11.2015 22:41
                #8643129

                Ну, предположим, красивая концепция. А в практическом плане это что дает? Кроме лив-релоада картинок.
                В галпе вот все — это поток. Потоки можно трансформировать налету, не записывая на диск, это дает прирость в скорости при сложных, многоступенчатых операциях.


                1. Eternalko
                  05.11.2015 06:23
                  #8643361
                  +1

                  То что он весь проект разбивает на чанки и подгужает по надобности.

                  В моих сумасшедших проектах если все собрать разом то будет так мегабайт 30.
                  А так пока в админку не войдешь, то библиотеки для графиков не подгузятся. Условно говоря.


                  1. k12th
                    05.11.2015 11:46
                    #8643625

                    В 30 мегов верится с трудом, но подгрузка чанками хорошая вещь, согласен. Но вопли о «модулях» и о их горячей замене как-то не раскрывают этот вопрос.


                    1. Eternalko
                      05.11.2015 13:55
                      #8643837

                      Вопли у вас в голове. С вами же нормально разговаривают. Зачем вы человека обижаете?


                      1. k12th
                        05.11.2015 13:58
                        #8643841

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


                        1. Eternalko
                          05.11.2015 14:35
                          #8643911

                          В любом случае. Давайте оставим вопросы адекватности на стороне. Давайте жить дружно. Никто тут никому ничего не продает.

                          Каждому нужно что-то свое. Сложно на глаз определить что кому подойдет.


                          1. k12th
                            05.11.2015 14:58
                            #8643935

                            Давайте жить дружно.

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


                            1. dixoNich
                              05.11.2015 15:48
                              #8643989
                              +4

                              Извините, если это было резко. Просто я неадекватный.


                              1. k12th
                                05.11.2015 15:50
                                #8643997
                                +1

                                Я тоже бывают резким, простите, если что.


  1. lucky_libora
    04.11.2015 19:16
    #8642865
    +3

    Я просто оставлю это здесь:
    http://jade-lang.com/
    https://github.com/phated/gulp-jade


  1. vitstr
    05.11.2015 09:36
    #8643437

    Jade, nunjuks, handlebars с экстендами + пару плагинов исключительно для инклуда есть в npm :)


  1. Paul_Smith
    05.11.2015 17:38
    #8644201

    Почему-то, он не может работать с файлами .html

    //= partials/client_profile.html

    Вот прямо сейчас у меня в проекте с rigger, всё работает, вы о чем?


    1. mightymind
      05.11.2015 17:54
      #8644221

      Не сработает так:
      //= partials/.html


  1. voidnugget
    05.11.2015 19:08
    #8644315

    Автору вряд ли удастся получить одобрение, без понимания почему нужно возвращать поток с задачи

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

    Уже раз пятый об этом пишу…

    Надо было сначала спросить на тостере, а то выглядит очень нелепо.
    Что бы получить правильный ответ — нужно задать правильный вопрос.
    Хотите чему-то научится или разобраться — зачем об это статьи писать?


    1. mightymind
      05.11.2015 19:22
      #8644329

      Спасибо, поправил


  1. bo883
    05.11.2015 22:21
    #8644459

    Можно воспользоваться таже модулем — gulp-x-includer
    Вот так вставлять куски html кода, также он может работать с css и js

    <!-- include "./partials/_header.html" -->

<div class="b-wrapper ">
    <!-- include "./partials/header.html" -->

…


  1. Grammka
    05.11.2015 23:11
    #8644505
    +1

    вот извращение… все решается одним jade'ом =/