Зміст
Виконавці завдань JavaScript, такі як Grunt, стали надзвичайно популярними серед розробників інтерфейсних програм. Це тому, що вони допомагають зробити те, що всі ми хочемо робити на своїй роботі - заощадити час!
Але, маючи більше 5000 (і нараховуючи) плагінів Grunt, доступних для розробників, розробникам може бути важко знайти ці «алмази в грубій формі». Ми озирнулися назад, коли застрягли у Grunt, щоб знайти ідеальний рецепт плагінів Grunt, яким ви повинні користуватися.
01. Покращити
Кожен розробник, який стоїть на меті, знає про переваги зменшення файлів JavaScript, і саме цим займається цей плагін. Така його популярність, вона насправді включена до Посібника з початку роботи Grunt. Незважаючи на назву, цей плагін також можна використовувати для прикраси вашого коду JavaScript - хоча це не особливо корисно для виробничого використання.
02. Сасс
Можливо, існують певні суперечки щодо того, який попередній процесор CSS справді керує місцем проживання, але тут, у Stickyeyes, ми зупинились на Sass, а не на головному супернику Less. Цей плагін дозволяє нам писати наші файли Sass і автоматично їх компілювати в CSS. Переваги використання попереднього процесора CSS гарантують окрему статтю, але можна з упевненістю сказати, що якщо ви вже не використовуєте такий, ви дуже спізнилися на вечірку!
03. CSSMin
Цей плагін є CSS-еквівалентом Uglify. Він просто отримує будь-які вказані файли CSS і зменшує їх. Звичайно, якщо ви збираєтеся використовувати це разом із плагіном Sass, тоді вам потрібно переконатися, що це завдання запущено після завдання Sass.
Існує безліч альтернатив CSSMin, які також можуть зменшити розмір ваших файлів CSS, використовуючи дещо інші методи; CSS nano, віджимання CSS, зменшення CSS тощо. Прочитайте цей зручний орієнтир, якщо ви любите подібні речі.
04. Конкат
Як випливає з назви, цей плагін просто бере кілька файлів і об'єднує їх в один. Як і при зменшенні коду, об’єднання файлів - це також давня найкраща практика зменшення часу завантаження сторінки.
Конкатенація файлів завжди повинна використовуватися у виробництві як для JavaScript, так і для CSS. Зазвичай це останнє виконуване завдання - після завдання попередньої обробки CSS та завдання мініфікації. Легко сказати цьому плагіну об’єднати всі файли в певному каталозі, але будьте обережні, що файли будуть об’єднані - вам може знадобитися вказати конкретне замовлення або назвати файли, щоб вони завжди об’єднувались у тому порядку, який ви хочете .
05. ImageMin
Подібно до CSSMin та Uglify, ImageMin вирішує ще одну давню проблему завантаження сторінки - розмір файлу зображення. Зменшення зображення зазвичай є першим викликом для оптимізації, тому цей плагін необхідний для максимального зменшення загального розміру файлу сторінки.
Якщо ви працюєте з JPG, PNG, GIF або SVG (дедалі популярніший формат векторних зображень), цей плагін призведе до зменшення розміру файлу ваших зображень без втрат, і вам не доведеться піднімати пальцем. Якщо у вашому проекті багато зображень, гарно запустити це завдання лише тоді, коли ви переходите до виробництва, а не запускати це завдання на події перегляду (див. Наступний пункт).
06. Дивись
Цей плагін насправді не впливає на інтерфейс вашого веб-сайту, але він надзвичайно корисний для створення ефективного процесу Grunt. Watch просто стежить за будь-якими вказаними вами каталогами, і коли щось змінюється, він автоматично запускає певні завдання Grunt.
Тож ви можете налаштувати одну умову перегляду у своєму каталозі 'js' для запуску ваших завдань JavaScript, а іншу - у каталозі 'css' для запуску ваших завдань CSS. Це означає, що вам ніколи не доведеться вручну запускати ваш основний процес Grunt! Просто ініціалізуйте завдання спостерігати за бурчанням, перш ніж починати вносити зміни, і ви можете забути, що воно навіть є.
Слова: Джеймі Шилдс
Джеймі Шилдс - задній розробник агентства з цифрового маркетингу Stickyeyes.
Подобається це? Прочитай це!
- Grunt vs Gulp: Який інструмент побудови JavaScript слід вибрати?
- 8 способів покращити налаштування Grunt
- Найкращі безкоштовні теми WordPress
