Markup with Swig

Markup & Swig - сконфигурированный gulpfile.js с включенными модулями, такиеми как gulp-swig. Данная конфигурация, направленна на упрощение интеграции с шаблонизатором Twig, используемый по умолчанию в Symfony, т.к. Swig максимально приближен к Twig.

#####Этот проект больше не поддерживается.

Что включено?

Различные модули для поддержки SwigJS и LESS. Так же есть таски для минимизации и сжатия изображений и CSS.

Для внешних записимостей используется bower.

По умолчанию включены и подключены Twitter Bootstrap с jQuery с помощью Bower

Как установить и запустить?

Установка модулей ноды:

npm install

Установка зависимостей bower Если bower не установлен глобально, выполнить команду

npm install -g bower

Установить внешние библиотеки

bower install

Установка Если галп не установлен глобально, выполнить команду

npm install -g gulp

Запускаем Gulp. Для запуска используется команда:

gulp

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

В папке markup хранятся все шаблоны и данные (markup/data) для них. В папка web, хранятся все статичные файлы.

Добавлен loader шаблонов для SwigJS. Теперь корневая папка для шаблонов это папка markup/views. Для того, чтобы подключить файл в шаблоне, или переопределить его, необходимо указывать путь относительно папки markup.

Например для того чтобы отнаследоваться от шаблона markup/views/base.html.twig необходимо указать путь:

{% extends 'base.html.twig' %}

Для того чтобы отнаследоваться от markup/views/pages/index.html.twig соответсвенно указываем путь:

{% extends 'pages/index.html.twig' %}

Для вставки блоков, аналогично. Напривер вставка навбара в markup/views/base.html.twig:

{% include 'common/navbar.html.twig' %}

Или в markup/views/pages/index.html.twig:

{% include 'common/navbar.html.twig' %}

Как видим, родительская папка, от которой идет поиск шаблонов - markup.

Генерируем бем

Для запуска используется команда:

gulp bem --b name-block --e element,element2,element3 --m modify1,modify2

где:

--b - название блока

--e - название элементов

--m - название модификаторов

--page - на какую страницу вставить html (по умолчанию markup/views/pages/index.twig)

--path - необязательный параметр, который позволяет добавлять блок к другим блокам( например добавить test-title.less в папку web/less/test/

Работаем с markup-templates

Реализована команда для копирования шаблонов. Для ее использования, необходимо подключить библиотеки шаблонов. Пример библиотеки можно посмотреть в https://github.com/fafnur/markup-templates

Вы можете использовать неограниченное количество библиотек. Каждая библиотека должна занесена в

src = { 
        ...
        tpl:  [
            htdocs + '/components/markup-templates/templates',
            'E:\\domains\\layouts\\templates'
        ]
        ....
    },

Поиск модуля в библиотеках осуществляется сверху вниз. Соответсвенно, более приоритетные библиотеки, должны быть выше.

Markup-templates по умолчанию включена в сборку.

Для копирования(клонирования) шаблона нужно выполнить следующую команду

gulp clone --from test --ver test1 --to news

где

--from - это название интересующего нас шаблона

--ver - версия (подпапка в шаблоне)

--to - имя для копируемого шаблона (заменит html и css на соответвующее имя; по умолчанию значение из --from)

--page - на какую страницу вставить html (по умолчанию markup/views/pages/index.html.twig)

Небольшие хаки

Для минимизации и оптимизации процесса верстки можно избежать многократной установки проекта.

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

Находясь в папке проекта нужно выполнить команду:

mklink /d "node_modules" "<путь до установленного и настроенного проекта markup-swig>"

Для windows 8 и более:

mklink /d 'node_modules' 'E:/domains/markup-swig/node_modules'

Стоит заметить, что это возможно использовать при условии, что все проекты используют совместимые версии markup-templates:

0.1.x и т.д.