В тази статия ще ви кажа как да се организира работата с по-малко сред развитие PhpStorm.
ПО-МАЛКО е популярна CSS-предпроцесорни, която ви позволява да се ускорят и опростят стиловете на писане на подкрепа при разработването на сайтове.
Лично аз не сте използвали за дълго време в тяхната предварителна обработка, но когато се работи с CSS-рамка Twitter Bootstrap МАЛКО се възползвате стана ясно. Тъй като използвам IDE PhpStorm, толкова по-малко и също така да създаде за нея.
Всички снимки може да се кликва и можете да ги увеличите, като кликнете върху тях.
Етапи инсталират цели и използването им
0. В тази статия се използва Windows 7 32-битови, PhpStorm 8.0.3 и node.js. Можете също да персонализирате с по-малко работа с плъгин-МАЛКО CSS компилатор.
1. Изтеглете и инсталирайте node.js. За да направите това, отидете на node.js сайт и изтеглите разпределение за изтегляне на Windows (x86)
След като инсталирате node.js проверяват работата си - отидете и да изпълни команда cmd.exe конзола възел-V. Ако видите нещо подобно v4.2.2, това означава, node.js инсталирани успешно.
2. В същия терминал определи не толкова пакет със следната команда
3. PhpStorm отидете в менюто File -> Settings (Можете също да натиснете CTRL + ALT + S). Отидете на Tools -> File Watchers и кликнете върху зелената плюс правото да добавите възможността за съставяне на по-малко файлове.
4. Добавяне на прозорец New Watcher
5. Помислете за настройките му:
- Покажи конзола - шоу конзола Никога не поставяйте
- Незабавно синхронизация на файлове - поколение CSS веднага след промените в по-малко - да включват
- Проследете само основните файлове - за проследяване само на основните файлове. В същото време, ние имаме подробен поглед върху.
- Работна директория - папката, където файловете са по-малко, в този случай, остава така
- Изходни пътища за опресняване - който ще се основава на събрани файлове CSS формат и тяхното име
6. За по-голяма яснота, нека разгледаме няколко примера.
6.1 Добавяне на 2 по-малко в основната директория на сайта. Когато по-горе настройки, CSS файлове ще бъдат разположени в непосредствена близост до по-малко файлове (т.е. в главната папка, тъй като ние имаме по пътеките на изхода, за да опресните опции посочено $ FileNameWithoutExtension $ .css).
Вариант Track само основните файлове в този случай не се проверява, така че те ще се съберат всички по-файлове без изключение.
Ние добавяме нашите по-малки файлове следния код
Сега направете промените във всяка от тях и ние автоматично ще състави подходящ 2 CSS-файл:
В PhpStorm тя може да изглежда като CSS намират в папки по-малко, но в действителност това е по-добро разбиране на някои от СГО на по-малко генерирани.
Ето как изглеждат файловете в Total Commander:
6.2 А сега да разгледаме промените опцията Watcher'a, когато трябва да се запази с CSS файлове в директория, различна от по-файлове.
Например, нашите по-малки файлове се намират в по-малка папка и събрани един CSS файлове трябва да бъде поставен в CSS с папки.
За да направите това, да създадете папка CSS и редактиране на параметрите на настройките Watcher'a изходни пътища за опресняване и да го заменят с:
Сега, след съставянето на CSS-файл ще имаме следната структура папка:
6.3 И накрая, помислете как да се използват само проследяват основните файлове опцията.
Така например, в нашия две по-файл в началото на файла е внос main.less media.less файлове, т.е. неизвестен
Както знаете, правилото за @import ви позволява да импортирате съдържанието на CSS-файл в текущата стилове. Т.е. данни от media.less попадат в main.less при генериране main.css файл.
Оказва се, че main.less файл е коренът (корен), защото тя внася други файлове, но той не се внася в който и да е друг.
Тъй като стилове media.css файл вече се съдържат в main.css, в този случай ние не се нуждаем, и то (media.css на файла) генерира и че той трябва да бъде отбелязано в опцията за настройки Watcher'a Track само основните файлове.
Благодаря ви за вниманието!
Свързани статии