Что еще добавить?

Question

[Андрей Сальников]

Работаю в небольшой компании. Все сайты делаем на MODX Revo. Я верстаю с макета. Пользуюсь при этом phpstorm'ом, к этому прикручен SCSS, да в принципе и всё. Подскажите, что еще добавить в процесс? Недавно порекомендовали Gulp. Я его даже прикрутил к Phpstorm'у, но не вижу гигантской от него пользы (просто не распробовал, знаю). Есть какие-нибудь рекомендации?

Answer 1

[Денис Инешин]

Чем может помочь вам Gulp (или там Grunt):
- уберите компиляцию SCSS из шторма и перенесите в Gulp
- добавьте плагин автопрефиксер, это избавит вас от необходимости писать постоянно всякие -webkit- и т.п.
- разбейте проект на сколь угодно сложную структуру, Gulp поможет вам собирать все это в один файл.
- используйте плагины для проверки кода (особенно актуально для JS, но для CSS тоже есть)
- делайте минификацию файлов.

Да и куча всего еще.

Upd:
Есть еще вот такой мануал, он правда о Grunt, но эта система сборки аналогична Gulp. Зато будет понятно, зачем вообще такая система для фронтенда.

Comments

[sim3x]

если что
шторм не занимается сам компиляцией - он просит указать путь к bin/sass
а вот базовая проверка кода в шторм встроена и если не страдать перфекционизмом ее хватает с головой

[Realetive]

Gulp является модулем Node.JS, который в свою очередь является полноценным сервером. Т. е. все те задачи, которыми вы прежде нагружали боевой сервер, можно вынести на рабочую машину: шаблонизация, минификация файлов (вместо MinifyX), проверка кодстайла, автоматическая выгрузка файлов на сервер по FTP/SFTP, бэкапирование. Да столько всего, помимо того, что описал Денис Инешин, что меня аж распирает от безграничности применений. Одно только создание всех фавиконок (которых, если разобраться, нужно больше 40 штук) «на лету» из одного файла PNG чего стоит!

[Андрей Сальников]

Большое вам спасибо)))

Answer 2

[sim3x]

node-sass работает на libsass, что дает серьезное ускорение рендера в цсс
compass-mixins - компасс без руби
gulp-autoprefixer - не париться по поводу префиксов
gulp-image-optimization - картинки

gulp-sourcemaps - после сжатия цсс-жс сурсмап поможет найти строку, где в исходнике есть реальная строка
gulp-minify-css - тут ясно
gulp-uglify - тоже самое но для жс, есть и другие

Comments

[Андрей Сальников]

Большое тебе спасибо. Уже опробовал сжатие) Еще изучать и изучать, но вот уже есть первые плоды.

[sim3x]

Андрей Сальников: не за что
добавил еще пару плагинов

Дальше только двигаться в сторону минификации для ангуляра и др фреймворков

[Андрей Сальников]

sim3x: Я пока этим не пользуюсь(