Как вы собираете свой проект?

Question

[fantazerno]

Добрый день!

Как frontender(верстальщик) я собираю проект связкой JADE-STYLUS-GULP-GITHUB(таски по конкатенации сжатии соурсмепами спрайтами сжатием изображений и много др. стандартный набор)

Но как с этим работать если в работу вступает одна из cms WP BITRIX и т.д.
1. Часть кода уходит в обертки php. Меняются расположения темплейтов стилей и т.п. Простейшее добавление одного блока с двумя строчками кода приводит к новой пересборке всех стилей, на выходе опять же читсый html который снова нужно оборачивать php.
2.Куча левых файлов и база данных, как бороться со всем этим при работе с git. (настраивать игнор лист?)

Заранее буду благодарен Вашему опыту и практикам по решению подобных вопросов.

Answer 1

[merss]

никак.
Свой frontend шаблон вы в cms никак не привяжете.
Делается так: сначала верстается в своем frontend шаблоне , затем берется готовый html и натягиватеся на смс.
Если надо переделать css/js - передлываете в своем шаблоне.

Comments

[fantazerno]

А как быть с гитом и базой данных

[Dark Hole]

fantazerno: компилировать в другой каталог, не?

[Mike]

fantazerno: А вы ветки разделяйте. master - это продакшн по сути, то что должен увидеть юзер. Делаем от master ветку develop, затем от нее что-то вроде frontenddev и backenddev. Каждая серия правок в соответствующих ветках (frontenddev и backenddev) рождает новую временную ветку, к примеру contacts-page . В которой соответственно будет сверстана страница с контактами. Потом сливаем contacts-page в репу и делаем запрос на слияние. Админ репы сливает ветку contacts-page с frontenddev . Сливание происходит с удалением ветки contacts-page. Backend'ер забирает репу в нужный ему каталог. Потом работает с ней также, сливает в репу, запрос на слияние, слияние и можно в продакшн. Как на той самой картинке =)

[Mike]

fantazerno: А про компиляцию товарищ выше ответил правильно. Компилируйте например в каталог с названием dist =) Я бы даже заморочился копировать в этот каталог картинки и шрифты, чтобы все сорцы отдельно были, а пожатые картинки и спрайты в dist лежали.

[fantazerno]

Спасибо за опыт )

Answer 2

[Андрей Хохлов]

Как правильно работать с gulp+git если я верстаю, а другой человек натягивает на wordpress?

Answer 3

[xmoonlight]

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

Используйте единый файл стилей и формируйте сам шаблон из нескольких файлов, подгружаемых динамически: includeHTML.

Comments

[fantazerno]

Файл стилей на выходе и так один после сборки. А с include jade отлично справляется. Проблема в том, что если есть часть верстки на выходе обычный Html -> header > menu > ul > li , который потом в cms своими хуками и выводами из базы header > menu > (куча функций cms) и если надо простейше вставить иконку к пунктам меню придется заново перебирать чистый html под движек

[xmoonlight]

fantazerno: так вот и используйте для этого сборку "на-лету", чтобы не пересобирать всё заново, а просто добавить в нужный файл тэг и все. Если нужны замены к конкретной CMS - используйте шаблонизатор.

[fantazerno]

Я вас не понял, все это соберается нодой. Большинство клиентов не будут переходить со своих php серверов тарифов на выделенные серверы.

[xmoonlight]

fantazerno: я не об этом. Я говорю, что нужно использовать includeHTML (точно также, как и в PHP используется include), чтобы иметь возможность удобного добавления/изменения/подключения/отключения блоков шаблона во время работы этого шаблона на конкретной CMS без каких-либо дополнительных манипуляций.
Т.е. вся сборка - будет происходить автоматически на стороне клиента при загрузке страницы.

[fantazerno]

Что-то я совершенно, не понимаю при чем тут инклюды. Вот простейший пример на коленке prntscr.com/c5ksyz, как оно тут само все будет собираться. Это я продублировал блоки, а если у них вся структура поменялась.

[xmoonlight]

fantazerno: одинаковые блоки - выносите в отдельный файл. его подключаете в тех контейнерах, где это необходимо через тэг include, в том файле - подключаете другое (по-необходимости) и т.д.
Т.е. создаёте дерево зависимостей блоков, где на ROOT-уровне у Вас будет основная страница шаблона, а всё остальное - будет из других файлов: header.html, menu1.html, menu2.html, content-layout1.html, content-layout2.html, footer.html и т.п.
Функций шаблонизатора в виде замен, циклов и условий (для динамической организации блоков) в includeHTML - нет. Это можно сделать через JS (при необходимости) в одну-две строки.

Answer 4

[Evanre]

Да просто, Gulp дает практически не ограниченные возможности по сборке. Просто собирайте непосредственно шаблоны CMS. Вот замечательный пример интеграции галпа в WordPress.

Answer 5

[Роман Моренец]

Если под wordpress, то можно использовать разработку sage, от roots.io - по сути стартовый шаблон для wordpress, который уже включает bower, gulp, sass и многое другое. Можно заделать сначала чистый html-код, потом добавить весь нужный php

Comments

[ummahusla]

Под WordPress можно брать готовые стартовые шаблоны со сразу натянутыми Foundation или Twitter.

[Роман Моренец]

ummahusla: я это все подразумевал под sage, когда писал про bower))

[ummahusla]

Роман Моренец: Аа понял :)