Как вы поддерживаете CSS код?

Question

[vince_masuka]

Привет.
В проекте где я участвую, мы используем grunt-таск менеджер и плагин grunt-contrib-sass для sass -> css компиляции, суть проблемы в том что время самой компиляции дошло до 35 сек., ждать такое количество времени после каждого изменения это ужасно.

Тут два варианта:

• заменить sass с-compass на libsass и sassc (С-имплементация)
  
• хорошенько подчистить стили от неиспользуемых с помощи Dust-Me Selectors, uncss
  

Сегодня поработал над первым вариантом но в итоге не удалось заставить его заработать, боюсь что некоторые вещи несовместимы или работают по другому и в итоге их придётся переписывать чтоб работали под sassc.

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

Мне интересно, как у других обстоят дела с этим, убираете ли неиспользуемый css-код повседневно или делаете когда появляются признаки? используете специальные инструменты или находите вручную?

Обновление
В итоге перешли на libsass, время компиляции сократилось до 3-х сек.

Answer 1

[Nikolay Talanov]

35 секунд это ахтунг какой-то.
Насчет того, что Gulp значительно быстрее текущего Grunt'а это правда. Ибо Grunt работает на основе временных файлов (скоро хотят поменять это), а Gulp в оперативке все хранит вроде как.
+ у вас как я понимаю Ruby SASS, а он очень медленный на фоне libsass (sassbreak.com/ruby-sass-libsass-differences вот тут пишут про огромную разницу в скорости компиляции).
Я где то год назад делал проект на grunt+sass (ruby версия), и у меня после изменения стилей надо было ждать ~3-5 секунд, до лайврелоада с новыми стилями.
Сейчас юзаю gulp+libsass, после нажатия ctrl+s я моментально разворачиваю браузер, а там уже страница с новыми стилями. Даже пытался успеть на скорость сделать сохранение и увидеть хотя бы "вспышку" от вставки новых стилей, но так и не получилось :)

Comments

[vince_masuka]

Да, Ruby SASS.
О переходе на Gulp думали, но тратить время на переписывание и разбирательство с ним показалось наименее приоритетной задачей, когда в принципе все работало хоть и не очень быстро.

Answer 2

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

А вы уверены что это sass в css столько времени компилируется? Может там еще какие-то другие задачи срабатывают? Скажем сжатие кода или вообще JS таски. Попробуйте в грунте выделить отдельную задачу.

Если же ничего не помогает, попробуйте Gulp. Говорят он работает значительно быстрее.

Comments

[Volodimir Babeshko]

Подтверждаю gulp быстрее, насчет генерации в 35 секунд - это очень много, 40-50кб кода обрабатываются примерно до 10 миллисекунд. У вас не в том видимо проблема, а вообще переходите на gulp, я лично на него перешел из-за скорости live reload.

[vince_masuka]

Running "compass:server" (compass) task
directory .tmp/styles
write .tmp/styles/style.css (0.011s)
write .tmp/styles/style.css (0.37s)
write .tmp/styles/style.css (0.151s)
write .tmp/styles/style.css (1.275s)
write .tmp/styles/style.css (0.196s)
write .tmp/styles/style.css (0.089s)
write .tmp/styles/style.css (0.055s)
write .tmp/styles/style.css (0.192s)
write .tmp/styles/style.css (1.774s)
write .tmp/styles/style.css (0.093s)
write .tmp/styles/style.css (0.172s)
write .tmp/styles/style.css (0.115s)
write .tmp/styles/style.css (28.14s)
write .tmp/styles/style.css (0.149s)
write .tmp/styles/style.css (0.275s)
write .tmp/styles/style.css (0.514s)
write .tmp/styles/style.css (0.003s)
write .tmp/styles/style.css (0.392s)
write .tmp/styles/style.css (0.032s)
write .tmp/styles/style.css (0.168s)
write .tmp/styles/style.css (0.181s)
write .tmp/styles/style.css (3.175s)
write .tmp/styles/style.css (0.048s)
write .tmp/styles/style.css (0.104s)
write .tmp/styles/style.css (2.08s)
write .tmp/styles/style.css (0.95s)

Done, without errors.


Execution Time (2015-06-16 05:21:59 UTC)
compass:server 41.3s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 100%
Total 41.3s

(имена файлов были изменены)
Тот который занимает 28.14s это якобы main.scss, внутри его есть import всех других стилей.
Только что выяснил что
import 'bootstrap-sass-official/assets/stylesheets/bootstrap';
занимает 10 сек.

[Arris]

vince_masuka: не пересчитывать всё, закешировать то, что _гарантированно_ меняется редко (или никогда)?

[vince_masuka]

Arris: посмотрел, кэшинг стоит, используем grunt-contrib-compass и noCache параметр не трогали.

Answer 3

[zooks]

Быстрее перейти на libsass, невероятно быстрый за счет C/C++, чем вычищать неиспользуемый код.

Answer 4

[Николай Шабалин]

Полгода как перешёл с Sass + Compass на Libsass.
А с недавними обновлениями я Вам советую бежать за комп и переходить на Libsass.
Вы посмотрите на эту табличку =) 98,53%
А в ближайшие две-три недели будет обнова до 3.3. Тут пруфов не будет, пока слухи.