Първи стъпки с Grunt, WebReference
- анализиране на JS файлове;
- минимизиране на JS файлове;
- компилиране на Less файлове;
- минимизиране на CSS файлове;
- проследявайте промените във файловете и изпълнявайте горните задачи.
Бърз поглед върху Grunt в действие
Използването на Grunt е доста лесно. Просто го инсталирайте и след това стартирайте желаната задача. Gruntще изпълни задачата вместо вас. Това е, което официалният уебсайт на Grunt нарича изпълняващи се задачи.
Прави всичко супер лесно
Има много уроци, които говорят за невероятните неща, които можете да правите с Grunt. Това са добри уроци, но понякога могат да объркат хората, които тепърва започват с Grunt с големи настройки.Това също е ръководство за основите на Grunt и създаването на невероятно прости и лесно адаптивни задачи, споменати по-горе. Ще ви научи на основите, но ще ви остави да се чудите как можем да разширим Grunt за разширени приложения в бъдеще.
Приготвяме се да започнем
За да използваме Grunt, имаме нужда от вече инсталиран Node.js. Не се притеснявайте, можете да използвате Grunt във всяко приложение, което искате, независимо дали е приложение Node, PHP приложение, WordPress или просто обикновен стар HTML/CSS/JS. Node и неговият мениджър на пакети (npm) се използват за получаване на необходимите пакети. Всеки пакет изпълнява своя собствена функция, като минимизиране или анализ. Ако все още нямате инсталиран Node на компютъра си, вземете го и ще започнем с Grunt. За да сте сигурни, че сте инсталирали Node и npm, отидете на командния ред и въведете node -v и npm -v. Ако видите номера на версията, това означава, че сте готови!
Файловете на нашите проекти се съхраняват доста просто. Ето файловата структура за примери,показано по-долу. Започнете със създаване на папки и файлове, но засега оставете самите файлове празни, ще ги попълним по-късно.
Обърнете внимание на папкитеsrc иdist. Всички наши работни файлове се съхраняват в папкатаsrc, след което Grunt минимизира тези файлове и ги записва в папкатаdist. Файловете в тази папка са за използване в крайния сайт.
Получаване на необходимите пакети за Grunt
Когато използваме npm, ние дефинираме всички необходими пакети във файла package.json. Нека отидем до този файл и да добавим необходимите пакети към него. Какво прави всеки пакет ще бъде обяснено по-късно.
Тук сме дефинирали името на нашия проект чрез name, неговата версия (version) и необходимите пакети (devDependencies). На пръв поглед изглежда мистериозно, особено за някой, който не е работил с Node и npm преди, но скоро ще разберете, че npm е много готин мениджър на пакети за проект.
Grunt пакети
Ще се изненадате да разберете какво правят всички тези пакети grunt-contrib-****. Ето популярните пакети, обобщени в таблицата.
За пълен списък с пакети посетете хранилището на плъгини Grunt. Сега, след като идентифицирахме пакетите, от които се нуждаем, нека ги инсталираме.
Инсталиране на пакети
След като подготвите файла package.json, отидете на командния ред и въведете:
Ще видите как npm върши работата си и изтегля тези пакети в новосъздадената папкаnode_modules. Сега имаме тези пакети и те са готови за използване в проекта. Инсталацията е завършена, така че нека да преминем към конфигуриране на задачи за Grunt!