Как в symfony вести разработку фронтенда на less?

Question

[Иван]

Перехожу с Yii на Symfony. Использую less, компилятор подключил как assetic filter:

{% stylesheets filter='less,uglifycss,cssrewrite' combine=true
    '@AcmeFrontendBundle/Resources/public/styles/less/frontend.less' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

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

app/console cache:clear --env=dev
app/console assetic:dump --env=dev
chown -R ivan:ivan /home/ivan // необходима, т.к. предыдущие команды выполняю под другим пользователем

В Yii компилятор был установлен отдельным расширением, компилирующем нужные less файлы, если менялось время их последнего изменения. Как сделать в Symfony также? Как вообще вы работаете с sass/less в Symfony? Может компиляция на стороне разработчика (например, в PhpStorm) лучше?

Answer 1

[sim3x]

Пушу сразу минифицированный цсс - бекенд вообще не в курсе, что я использую препроцессор

Comments

[Иван]

Сколько времени проходит от редактирования файла до просмотра результата в браузере? Какие выполняете действия?

[sim3x]

не совсем каноничный случай
pycharm watcher + sass compiler
20к плюхаются в цсс за доли сек
гит пуш изменений на сервак 10+ сек

[Сергей Протько]

@0neS обычно примерно столько же сколько нужно на отработку анимации перехода между рабочими столами. Суть в том что компиляция запускается сразу после редактирования, а не при запросе страницы. Лично у меня все это добро в gulp настроено, assetic подходит только для очень простых случаев.

[sim3x]

@Fesor можно потавить liveedit тогда задержку "компиляции" лучше знать

[Сергей Протько]

@sim3x можно чуть подробнее? Помню только анонс лайведит. но в итоге никогда им не пользовался так как есть лайврелоад (в команде были люди на нетбинсах, vim и т.д и решили настраивать все независимо от окружения.)

[sim3x]

@Fesor тот же ватчинг с перезагрузкой страницы, которая запущена через сервер идеи
Сам пользуюсь редко, баловство одним словом

Answer 2

[Сергей Протько]

Пишите фильтры для assetic, а еще лучше, для фронтэнда (если он сложный) применить отдельно сборку через gulp.

А зачем вы делаете assetic:dump вручную? Можно просить симфони отдавать это дело через контроллер и ничего делать не нужно будет. Правда медленнее работает. И зачем вам ftp?

Comments

[Иван]

А зачем вы делаете assetic:dump вручную?

Честно говоря, голова уже едет, весь день учу фреймворк.

Можно просить симфони отдавать это дело через контроллер и ничего делать не нужно будет

Это настройка assetic.use_controller? Вроде бы стоит true. Хотя я плохо понимаю. Css и js либо копируются в web и отдаются клиенту веб-сервером напрямую, либо отдаются средствами самого symfony?

И зачем вам ftp?

Незнаю, я так привык. А как лучше?) Поднять на рабочем ПК (win7) openserver и вести разработку на нем, а когда нужно деплоить все на рабочий сервер с помощью git? PDF-ку ProGit прочел, но начать им пользоваться еще руки не дошли.

[Иван]

По поводу gulp.
Спасибо, в планах на ближайшее будущее было освоение grunt'а, но с вашей подачи почитал про gulp — похоже он даже лучше.
Я правильно понимаю, что gulp (или grunt) это модуль к nodejs? Как с ним работать при условии, что разработку веду по ftp? Ставить его на удаленный сервер?

[Иван]

Пишите фильтры для assetic

Что вы имели ввиду? Я сейчас использую 4 фильтра (cssrewrite, less, uglifyjs, uglifycss).

[Сергей Протько]

@0neS если честно, я так давно не использовал ассетик... Но если асеты у вас установлены через симлинки, и use_controller активирован, но ничего больше делать не нужно. Что до фильтров - если вам чего не хватает - можно дописать.

Что до деплоя - я как-то привык к тому что люди либо работают на лине либо настраивают окружение в вагранте и тогда уже без разницы на какой ОС разработчик сидит. Деплоймент же может быть и по ftp, и по sftp, и с этапом сборки, вручную или автоматизированным... Это большая тема. Еще есть docker. А GIT обязательно нужно освоить и попробовать построить воркфлоу на его основе.

Что до gulp/grunt - он должен быть там, где происходит сборка асетов. Это тулзы на js, посему node.js тоже должен быть установлен. Если бы у вас все это дело было локально установлено, можно было бы просто написать ватчеры, добавить лайврелоад и тогда уменьшились бы издержки на сборку всего этого добра. На удаленном сервере тоже можно но геморно.

[Сергей Протько]

@0neS хотя... если подумать, не сильно геморнее чем локально. И еще - помимо ftp есть еще rsync + scp/ssh (да, даже под винду оно есть).

[Иван]

@Fesor вы меня добили, буду переносить разработку на локаль. Vagrant это очередная виртуальная машина? В случае установки на win7 это будет что-то вроде коммандной строки линукса в отдельном окне win?

я так давно не использовал ассетик

А как без него можно? Вручную прописывать пути к стилям и скриптам, после сборки в gulp?

[Сергей Протько]

У меня последние года полтора проекты только только SPA и REST Api, так что необходимости в assetic нету. Есть еще штуки типа gassetic.