Разработка на MODX+Gulp как организовать?

Question

[Андрей]

Добрый день.
Интересует, как правильно организовать разработку сайта в связке modx+gulp. Делается ли все на локальном сервере а потом выражается на удаленный или все сразу на удаленном делается?
Пробовал запустить browserSync на хостинге, не пошло, в техподдержку пишут о запрете прослушивания портов. Как ты не все огранизовать?
Также интересует возможность подключения gitify к разработке.

Answer 1

[maniiii]

Если верстка, то по идее делаешь все на локалке а потом заливаешь на сервер. Есть вот такая базовая болванка.

Comments

[Андрей]

maniiii Озадачился я таким вопросом из-за того, что боевой сайт имеет свое наполнение, и порой гораздо удобнее вносить правки (или вести какую-то разработку) на боевом сервере. Или это в корне не верно?
Я попытался развернуть разработку на хостинге Бегет и у меня там не завелся BrowserSync. Техподдержка сказала, что у них на уровне ядра запрещено прослушивание портов.
Обычно всю работу я веду в NetBeans - он автоматически синхронизирует изменения с удаленным сервером и я вижу их сразу. Но ко всему прочему хотелось бы добавить удобства, доступные через gulp - минификацию css, js и т.д.
Поэтому хотелось бы понять алгоритм, как вы ведете разработку - на локалке у вас также установлен MODX или только есть папка с статикой и стилями и вы потом ее подгружаете на боевой сервер?
Также не менее важный вопрос - как использовать всякие чанки и т.д. от Fenom например?

[maniiii]

Я делаю так:

• Верстка на на локалке, с применением pug который может разбивать отдельные блоки на чанки. В дальнейшем эти чанки из pug при билде собираются в отдельные чанки для MODX. Они автоматически летят в папку elements/chunks а шаблоны в elements/templates.
  
• Выгружаю все это дело на сервер. Так как я работаю через sublimeText3, то использую для этого дела отдельный sftp плагин (дико удобная штука). Можно прикрутить выгрузку через gulp при билде или выгружать любым удобным для себя способом.
  
• Если нужно будет вносить правки уже после сборки, то в gulp.js докидываю 'gulp-ftp' и просто прослушиваю sass и js отдельным таском и при изменениях собираю css/js и отправляю на сервер.
  

Например так:

gulp.task('devsass', ['styles'], function() {
	// слушаем изменения в sass, собираем css (styles) и отправляем их на сервер(ftp)
	gulp.watch('dist/assets/templates/default/sass/**/*.+(sass|scss)', ['styles', 'ftp']);
});

gulp.task('ftp', function(){
	return gulp.src('dist/assets/templates/default/css/**.css')
	.pipe(ftp({
		host: '92.54.95.120',
		user: 'username',
		pass: 'pass',
		remotePath: '/site-path.ru/public_html/assets/templates/default/css/'
	}))
	.pipe(gutil.noop());
});

[Андрей]

maniiii, А на локалке у тебя полноценный MODX или только папки шаблона?

[maniiii]

Андрей, на локалке у меня только шаблоны и стили. Честно говоря держать копию MODX на локалке не вижу никакого смысла (за редким исключением).
Так у меня выглядит типовой проект:

Все довольно классически, в app собирается верстка и т.д., затем когда верстка готова делаю билд. Появляются папки dist и elements. dist - это наши assets активы js/css/image и т.д.. В elements - шаблоны, чанки и т.д.. Файлик sftp-config.json это от плагина sublime для синхронизации данных с сервером. Таким образом на сервере нет никакого мусора, только активы и папка с шаблоном. Любые изменения делаются локально а через секунду они уже на сервере, причем не важно что правим верстку или стили... и не надо лишний раз лезть в админку.

[Андрей]

maniiii, спасибо огромное. Понял. Подскажите только вот что: Вы создаете чанки из кусков кода pug. А как они подключаются к шаблону, ведь вроде разный синтаксис подключения в pug и например fenom.
Также интересно как вызовы сниппетов делаются в pug и как они компилируются?

[maniiii]

pug используется только на этапе верстки, далее он компилируется в обычный html.

[Андрей]

maniiii, это да, вопрос вот в чем. У тебя на pug подключаются внешние куски кола (а-ля чанки в MODX). В результате после компиляции получается целиковый html или все также с вызовами include?
Чтобы потом в MODx снова все раскидать на чанки нужно что-то делать дополнительно?

[maniiii]

В результате после компиляции получается целиковый html или все также с вызовами include?

В папку templates компилируется цельный html шаблон, а в папку chunks компилируется html из app\pug\chunks\*, который в процессе еще и переименовывается в *.tpl. Т.е. в новые шаблоны в любом случае нужно будет вызывать incluld`ы с чанками MODX, но при этом дополнительно выпиливать их из шаблона и кидать в elements\chunks\*.tpl так как они уже будут там. Но, кстати и этот процесс наверное тоже можно упростить при билде...

На самом деле проще установить и да проверить как оно работает, вот три команды которые покажут все наглядно.

1. В пустую папку "git clone https://github.com/srsad/cfp.git ."
   
2. "npm i" (знаю, зависимости надо обновить)
   
3. если хочешь потыкать то "gulp watch --p". Но да дабы увидеть результат сразу, то можно пропустить этот пункт и выполнить последний
   
4. "gulp build --el" - эта команда выполнит сборку в папу elements, т.е. там наглядный результат. (index.html переименовывается в main.html)
   

[Андрей]

maniiii, спасибо большое за объяснения. Теперь мне все понятно)

[maniiii]

Андрей, не за что =)

[Андрей]

maniiii, дружище, подскажи, вызовы сниппетов также в итоговом html нужно будет в рукопашную добавлять, заменяя соответствующие куски кода, верно?

[maniiii]

вызовы сниппетов также в итоговом html нужно будет в рукопашную добавлять, заменяя соответствующие куски кода, верно?

Андрей, да, все так.

Answer 2

[Антон]

Вот этот видосик смотрели?
https://www.youtube.com/watch?time_continue=37&v=a...

Comments

[Андрей]

Антон Смотрел, но он уже старенький. Хотелось бы все это дело применимо к файловым элементам MODX и Fenom понять как делается.

Answer 3

[NeuroPastor]

При постоянной необходимости внесения правок в проект необходимо использовать статические шаблоны и чанки.
Тогда в принципе вопрос снимается. Работаешь на локалке себе как и обычно, по мере необходимости подливаешь обновленные шаблоны с чанками на сервер и все

Comments

[Андрей]

NeuroPastor При работе на локалке там нужны полная копия сайта с БД или только папка с статикой, синхронизированная с сервером?
И как быть с обновлением например css или js, которые помимо прочего обрабатываются gulp плагинами?