Під час процесу веб-розробки виникає багато завдань, які нам потрібно періодично виконувати. Це завдання на кшталт мінімізації JavaScript та CSS-файлів, модульного тестування, перевірки файлів на наявність помилок, компіляції препроцесорних файлів (Less, Sass) у CSS та багато іншого. Grunt призначений для запуску завдань, а значить повторювані завдання, з якими ми маємо справу щодня, стають автоматизовані. Це лише простий погляд на те, як запускається та працює Grunt. Ми розглянемо як виконувати такі основні завдання:
- аналіз JS-файлів;
- мінімізація JS-файлів;
- компіляція Less-файлів;
- мінімізація CSS-файлів;
- відстеження зміни файлів та виконання вищезазначених завдань.
Вихідні файли ви можете взяти зі сховища GitHub.
Швидкий погляд на Grunt у дії
Припустимо, що ви хочете перевірити свій JavaScript-файл про наявність помилок. Після встановлення Grunt просто запустіть:
<code>$ grunt jshint
І ви побачите помилки у файлах JavaScript!
Використовувати Grunt досить просто. Тільки встановіть його, а потім запустіть бажане завдання. Grunt виконає завдання за вас. Це те, що офіційний сайт Grunt називає запуском завдань.
Робимо все дуже просто
Існує багато підручників, в них йдеться про чудові речі які ви можете робити з Grunt. Це хороші підручники, але часом вони можуть заплутати масштабними налаштуваннями людей, які тільки починають знайомитися з Grunt. Це ж посібник з основ Grunt та створення неймовірно простих і легко настроюваних для управління завдань, згаданих вище. Воно навчить вас основам, але дозволить задуматися, як ми можемо розширити Grunt для майбутнього просунутого застосування. //nodejs.org" rel="nofollow">Node.js. Не хвилюйтеся, ви можете використовувати Grunt в будь-якому бажаному додатку, будь то Node-програма, PHP-програма, WordPress або просто старий добрий сайт на HTML/CSS/JS. Node та менеджер пакетів (npm) застосовується для отримання необхідних пакетів. Кожен пакет виконує свою функцію, на кшталт мінімізації чи аналізу. Якщо Node ще не встановлено на вашому комп'ютері, візьміть його і ми почнемо працювати з Grunt. Щоб переконатися, що Node та npm у вас встановлені, перейдіть до командного рядка і наберіть node -v та npm -v . Якщо ви бачите номери версій, це означає, що ви готові до роботи!
Огляд
Файли нашого проекту зберігаються досить просто. Ось структура файлів для прикладів, наведена нижче. Почніть зі створення папок і файлів, але поки залиште самі файли порожніми, ми наповнимо їх пізніше.---css-----js — src //зберігає вихідні файли-----css----------style.css----------pretty.less —----js----------magic.js Gruntfile.js //конфігурація Grunt package.json //конфігурація npm (які пакети ми тягнемо)
Зверніть увагу на папки src та dist. Всі наші робочі файли зберігаються всередині папки src, потім Grunt мінімізує ці файли та зберігає їх у папку dist. Файли всередині цієї папки призначені для використання на фінальному сайті.
Отримання необхідних пакетів для Grunt
При використанні npm ми визначаємо всі необхідні пакети у файлі package.json. Давайте перейдемо до цього файлу і додамо в нього пакети. Що робить кожен пакет пояснимо пізніше.
<code data-language="javascript">//package.json { "name": "grunt-getting-started", "version": ;0.1.0", "devDependencies": { "grunt": "~0.4.4", "grunt-contrib-jshint": "latest", "jshint-stylish& , "grunt-contrib-uglify": "latest", "grunt-contrib-less": "latest", "grunt-contrib-cssmin": "latest"," ;: "latest" }
}Тут ми визначили ім'я нашого проекту через name, його версію (version) та необхідні пакети (devDependencies). На перший погляд це виглядає загадково, особливо для того, хто раніше ще не працював з Node і npm, але незабаром ви зрозумієте, що npm — дуже класний менеджер пакетів для проекту.
Пакети Grunt
Ви здивуєтеся, що всі ці пакети grunt-contrib-**** роблять. Ось зведені в таблицю популярні пакети.
| Плагін | Опис |
|---|---|
| contrib-jshint | Валідація файлів через jshint. |
| contrib-uglify | Мінімізація JS-файлів за допомогою UglifyJS. |
| contrib-watch | Запуск завдань, які стежать за зміною файлів. |
| contrib-clean | Очищення файлів та папок. |
| contrib-copy | Копіювання файлів та п апок. |
| contrib-concat | Об'єднання файлів в один. |
| contrib-cssmin | Стискання CSS-файлів. |
| contrib-less | Компіляція Less-файлів у CSS. |
| contrib-imagemin | Зменшення PNG, JPG та GIF. |
| contrib-compass | Компіляція Sass в CSS через Compass. |
| contrib-htmlmin |
Для отримання повного списку пакетів відвідайте сховище плагінів Grunt. Тепер, коли ми визначили потрібні нам пакети, давайте їх встановимо.
Установка пакетів
Після підготовки файлу package.json перейдіть до командного рядка та наберіть:
<code>$ npm install
Ви побачите, що npm робить свою справу і тягне ці пакети в недавно створену папкуnode_modules. Тепер у нас є ці пакети, і вони готові до використання в проекті. Установка завершена, так що давайте перейдемо до налаштування завдань для Grunt!