За всеки случай ще направя кратко разграничаване между препроцесорите и постпроцесорите.
Какво e CSS препроцесор?
Sass, Less и Stylus са 3 от най-популярните препроцесора и по своята същност представляват комбинации от инструменти които, от една страна засилват значително скоростта при писане на css, от друга улесняват промените и поддръжката на кода, от трета могат да направят кода много по-подреден и четим ако се използват правилно. С други думи това са езици, на които се пише css, но без лимитациите на css.
Ако скоро сте решили да понаучите и използвате някой от тях – Sass е правилният.
Какво е CSS постпроцесор?
Постпроцесорът прилага промени върху вече създадения от препроцесора и компилирания от компилатора css код, с цел оптимизация му за продукция – изтриване на коментари и празни пространства, обфускиране, браузърна поддръжка и тн…
Какво е Pleeease
All the annoying CSS stuff we don’t want to do in 1 tool
Pleeease е инструментът, който оптимизира изходният css код като:
- добавя префикси, базирани на Autoprefixr
- fallback за rem стойности
- добавя opacity филтър за IE8
- сглобява всички media-queries в едно правило
- минифицира крайния файл
- генерира sourcemap от пре към постпроцесори
- прилага SVG fallback на css3 филтри (blur, grayscale)
- поправя псевдоелементи изписани с две двуеточия като ги изписва с едно за IE8
Инсталиране на Pleeease
Pleeease е Node.js базиран и се инсталира лесно. Ако сте инсталирали и работили с препроцесор логиката на работа с Pleeease е много сходна.
Ако нямата инсталиран Node.js, трябва да си го свалите и инсталирате. След което отваряте един терминал и пишете
|
1 |
sudo npm install -g pleeease |
Ако използвате Gulp или Grunt може лесно да добавите Pleeese към средата си за разработване.
Употреба на Pleeease
Също както при препроцесорите трябва през терминала да стигнете до директорията на съответният проект в който ще правите шашмите.
|
1 |
cd /myproject/css |
След като сте вече в папката със стиловете, за да получите изходния файл напишете
|
1 |
pleeease compile |
Pleeease не модифицира файловете, които вече имате по никакъв начин. По подразбиране това което ще получите след тази команда е нов файл с име app.min.css, който би трябвало да съдържа всичко нужно извлечено от css файловете. За да заработи всичко е достатъчно да включите само него към проекта без никакви други css файлове.
Конфигурация на Pleeease
Ако искате вместо настройките по подразбиране да използвате свои, може да си създадете конфигурационен файл, в който да опишете как искате да се случват нещата. За целта създайте файл с име .pleeeaserc в папката, в която се намират стиловете и го конфигурирайте според предпочитанията си:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "in": ["styles.css", "typography.css", "reset.css"], "out": "styles.min.css", "import": true, "autoprefixer": {"browsers": ["last 3 versions", "Android 2.3"]}, "mqpacker": true, "minifier": true, "rem": ["16px", {"replace": false}], "pseudoElements": true, "sourcemaps": true, "opacity": false, "filters": false, "next": false // включва и изключва експериментална функционалност } |
Ако искате Pleeease да пресъздава app.min.css (или файлът , който сте описали в конфигурацията) всеки път когато има промяна в текущите css файлове напишете стандартното.
|
1 |
pleeease watch |
Така Pleeease ще следи за промяна в css файловете, и все път когато има такава ще презаписва изходния файл. Ако направите промяна в конфигурационния файл, трябва да рестартирате watch командата, за да се захапят промените.
Експериментален Pleeease.NEXT
Pleeease.NEXT отива по-далече във възможностите за постпроцес-ване на css код, но е доста експериментална идея, а оттам и рискова – лично аз бих го ползвал само с експериментална цел.
June 28, 2015
Или имаш пропуски или документацията която ползваш е стара като примери.
June 28, 2015
Благодаря ти за коментара!
Най-вероятно е едно от трите. Документацията, която използвах е предимно от please.io.
Би ли бил малко по-конкретен?
June 29, 2015
Ами примера им в страницата дори е различен. Трябва ти cli версията за да я използваш без външен модул като Гълп да речем, а още повече че аз не можах да подкарам на cli конфига който е просто един js на версия по нова от 2.0.0. Така че мисля че тяхната документация е не вярна или поне не е валиден за юникс лайк ОС каквито са Мак и Линукс.