Автоматизированный шаблон для front-end проектов



    Человек изобрел компьютеры, чтобы они выполняли за нас большую часть повторяющихся задач. Это позволяет нам экономить много времени и использовать его с максимальной пользой. И, так как эта статья о front-end разработке, в этой области таких задач много: компиляция css- и js-препроцессоров, сборка спрайтов, оптимизация изображений, минификация файлов и др.


    Сейчас автоматизировать эти задачи нам помогают prepros, codekit, grunt, gulp и подобные инструменты.
    У меня был опыт работы с каждым из 4 перечисленных, но остановился я на gulp по следующим причинам:

    • Gulp менее требователен к ресурсам системы, чем GUI-программы;
    • он очень быстрый. В сравнении с gulp-ом, grunt работает медленно. Настолько медленно, что я успевал переключиться с редактора на браузер и обновить страницу, а новые стили все еще не были скомпилированы. Gulp с этим справляется куда лучше;
    • способ описания тасков в gulp мне показался проще.


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

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

    Этот шаблон не является панацеей. У каждого свои потребности и, вероятно, для максимальной пользы вам придется настроить его под себя.

    Что под капотом?



    Автоматизированные задачи



    • Компиляция Stylus;
    • Компиляция CoffeeScript;
    • Компиляция Jade-шаблонов;
    • Сборка спрайтов и генерация стиля для них (ранее я публиковал статью об этом);
    • Добавление вендорных префиксов к свойствам;
    • Минификация css и js;
    • Оптимизация картинок.


    Файловая структура



    Первый уровень проекта — папки builder, src и built.

    builder — папка в которой лежит gulpfile с тасками для gulp, где будут лежать node-модули и откуда буду запускаться все команды в консоли.

    В папке src лежат все исходные файлы проекта, а папка built создается и изменяется автоматически при выполнении команд gulp-а.

    Содержимое папки src


    • assets

      • styles — стили проекта
      • images
        • design — изображения, предназначенные для оформления сайта
        • content — изображения, используемые в контенте страницы

      • scripts
        • local — скрипты, написанные в рамках этого проекта
        • vendor — сторонние библиотеки


    • templates

      • pages — шаблоны страниц
      • blocks — блоки, из которых будут собираться страницы



    Как все работает?



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

    Все gulp-плагины загружаются автоматически из package.json с помощью плагина gulp-load-plugins. Это позволяет уменьшить объем gulpfile.coffee.

    Все пути к файлам и папкам вынесены в переменные и описаны в файле config.yml.

    Задачи



    • sprite — генерация спрайта на основе картинок, которые лежат в папке config.paths.src.sprites.images.all;
    • coffee — компиляция .сoffee из папки local;
    • vendor — перенос скриптов из папки vendor в built;
    • stylus — компиляция .styl;
    • images — перенос картинок в built папку;
    • jade — компиляция .jade-шаблонов;
    • autoprefixer — добавление вендорных префиксов (настройки по умолчанию);
    • scripts:min — минификация скриптов;
    • styles:min — минификация стилей;
    • images:min — оптимизация картинок;
    • watch — отслеживание изменений в файлах и запуск необходимого таска.


    Группы задач



    • default — компилирует шаблоны, скрипты, стили, собирает спрайты;
    • dev — включает в себя default и задачу watch;
    • minify — сжимает файлы и оптимизирует картинки, которые были созданы после работы default;
    • prod — таск который запускается на сервере или перед заливкой на сервер. Он выполняет группу default и после этого запускает minify.


    Системные требования



    • node.js;
    • gulp;
    • coffee-script — для запуска gulpfile.coffee. При желании можно перевести .coffee в .js.


    Установка



    1. Если у вас не установлен node.js, скачайте и установите. Вместе с node.js у вас установится пакетный менеджер npm;
    2. Затем установите coffee-script и gulp, введя в консоли команду (понадобятся права администратора)
      npm i -g coffee-script gulp
      



    После этих шагов, можно приступать к инициализации самого проекта.

    1. Скачайте и распакуйте архив с шаблоном;
    2. в консоли откройте папку builder и введите npm i. Пойдет процесс скачивания и установки всех перечисленных в package.json модулей.


    После завершения установки, можно смело напечатать gulp в консоли и отработает группа задач default

    Проблемы



    Если при запуске gulp система выдает ошибку о том, что не найден модуль coffee-script/register, нужно установить переменную NODE_PATH, которая дает понять системе, где лежат глобальные модули.

    Ссылки на решения:



    Заключение



    Шаблон будет постоянно дорабатываться. В ближайшее время я собираюсь добавить следующий функционал:

    • набор миксинов для Stylus;
    • JSHint;
    • конкатенация js;
    • bower.


    Также в планах подготовить grunt-версию с аналогичным фунционалом.

    Быстрые ссылки



    Поделиться публикацией

    Комментарии 30

      +3
      похвальное начинание. дальше на пути вас ждёт минимум browserify, а лучше сразу webpack с их дивными мирами трансформаций/лоадеров/плагинов. и создание генератора для yeoman.
        0
        Следующим шагом был бы генератор для yo
        • НЛО прилетело и опубликовало эту надпись здесь
            +1
            Самая интересная киллер-фича для меня, это то, что он собирает ассеты любого типа, будь то картинка или шрифт.
            Например, можно установить font-awesome из npm и добавить require('font-awesome/less/font-awesome.less'); после чего webpack заботливо соберет все ассеты (все шрифты) в отдельную папочку, доступную из веба.
              0
              Есть. Кардинальные. Они достаточно четко описаны на «главной» webpack.
              0
              «и создание генератора для yeoman»
              Это, на мой взгляд, самый верный путь для решения задач такого рода. Но у йомена есть большой минус — он жутко долго стартует. И пока они это никак не починят.
              +9
              По своему опыту скажу, что очень сложно разработать build систему, которая будет устраивать хотя бы 10% пользователей исключая разработчиков такой системы. У каждого проекта свои проблемы и способы их решения. В большинстве случаев, наиболее полезная часть — структура и описание, как система работает, чтобы другие разработчики смогли перенять интересные идеи и реализовать их у себя в проектах.
                +3
                Я для себя разрабатываю в первую очередь. А решил поделиться, чтобы люди могли узнать что-то новое и использовать это в своих проектах.
                  +2
                  Чем мне понравилась статья, так это то что Вы разложили по полочкам саму структуру и принцип работы разрабатываемого плагина, а не просто показали, что есть такой то тул и использовать его так.
                    +1
                    Я думал, если разложить все по полочкам, будет понятно как им пользоваться.
                +2
                Вероятно лучше было задать вопрос в топике про спрайты, но да не суть.

                А для каких целей до сих пор используются спрайты?
                Я пару лет назад перешел на вариант иконок прямо в css файлах.
                Всякие Stylus'ы как раз позволяют писать в CSS что-то типа
                background-image: inline-image(somefolder/star.png)
                

                что преобразовывается в base64 инлайн картинку.

                Плюсы:
                — Хорошо кэшируется вместе со стилями
                — Позволяет не заморачиваться с позиционированием картинки / её анимацией
                — Отображается даже в случае отключенной графики (обращаю внимание что подход только для маленьких иконок)

                Минусы:
                — Может не работать в старых браузерах, хотя их процент, в большинстве проектов, ничтожно мал
                — Требует надстройки в виде stylus/sass/less или подобной, хотя, опять же, они у вас и так используются
                  0
                  Чуть-чуть поясню, на всякий случай.

                  Для чего до сих пор используются спрайты для иконок на сайтах?
                  Со спрайтами для онлайн игр всё понятно
                    0
                    Есть мысли о реализации base64 для небольших иконок.

                    Тот спрайтер, что у меня установлен, решает вопросы с позиционированием сам.

                      0
                      Ты же написал что Stylus юзаешь, ну так всё уже готово: url()

                      upd: тьфу, не сразу сообразил что имеешь ввиду. Тогда вопрос остается: в чем плюс спрайтов перед таким подходом?
                        0
                        Большие картинки, например
                          0
                          Можно какой-нибудь живой пример, пожалуйста?
                          Большие картинки класть в спрайты, как мне кажется, не лучшая идея.
                          Есть шанс, что итоговый спрайт будет весить больше, чем картинки по отдельности, при этом выигрыша не дает.
                          Обычно на сайте больших картинок, именно в стилях, буквально пару штук: разные HD фоны или типа того.

                          Обычные же картинки на странице так или иначе грузятся через img, а не через стили.
                            0
                            Я раньше когда генерил base64 получалось много лишних кб, но это без оптимизации. Вес получался больше, чем исходное изображение.
                            Как пример вот maindoor.ru/assets/bootstrap/images/sprites/sprite_l.png
                            Нужно провести тесты
                              0
                              Я уже проводил. В среднем 10-20% тяжелее оригинала.
                              При этом, надо обратить внимание, что если правильно выбрать шифрование оригинала, даже с прибавкой в 10-20%, суммарно будет меньше спрайта, т.к. спрайты не могут шифроваться по разному. Можно у Лебедева чуть чуть почитать.
                              А если есть возможность использовать SVG для иконок, то они вообще такие копейки весят, что аж смешно. На самом деле грузятся и отрисовываются очень быстро, еще и перекрашивать можно.
                                0
                                Но ведь все равно надо делать спрайты для ховеров в base64
                                Миниспрайты
                                  0
                                  Нет же, не надо. Просто картинки используешь и всё.
                                    0
                                    При ховере будет мелькать, мне кажется
                                      +1
                                      Нет, от чего? У тебя же в CSS оно, т.е. уже загружена.
                                        0
                                        да, верно

                                        надо попробовать
                                  0
                                  SVG
                                  а как их перекрашивать если они уже в base64 загружены? перекрашивать же можно только вставленные в хтмл
                                    0
                                    Извини, это я ошибся.
                                    Точнее есть трюк: часть изображения делается пустой и накладывается поверх нужного фона. Но он не всегда юзабелен.

                                    Плюсы SVG:
                                    1) Бесконечное масштабирование
                                    2) Круто выглядят на ретине (следствие первого)
                                    3) Мало весят
                                    4) Хорошо ложатся на фон
                                0
                                И еще спрайты очень вошли в привычку
                                  0
                                  Попробуй вот такой инлайн подход, понравится, гарантирую :-)
                        0
                        Что можете посоветовать для Angular JS 2.0?
                          0
                          А оно никак не связано с фреймворком, это же собирается на сервере
                            0
                            А да теперь вижу… это немнгоо другое…
                            Я ищу удобный и не перегруженый стартет для Angular JS 2.0

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

                        Самое читаемое