Автор статті: Ігор Богдосаров

Автоматизація фронтенду за допомогою Grunt

Існує великий вибір автоматизаторів зборки — беріть скільки завгодно, але багато з них не підходять для простих завдань. Нижче наведено опис того, що використовується для швидшої роботи над фронтендом. Хто зацікавлений, ласкаво просимо до обговорення.

Автоматизація фронтенду вимагає комплексного підходу, адже в макеті можна автоматизувати багато функцій, таких як робота з макетом, використання спеціальних інструментів для покращення швидкості написання стилів тощо.

В кінці роботи розробник повинен мати стиснутий файл стилів і скриптів. Таким чином, ймовірність того, що після стиснення скриптів і стилів на бекенді щось піде не так, зменшується.

Крім того, щоб збільшити швидкість макета, потрібно використовувати будь-який препроцесор (LESS, SASS тощо); необхідно компілювати всі файли на льоту, щоб сторінка оновлювалася миттєво. Те ж саме стосується JavaScript. Grunt приходить на допомогу!

Що потрібно автоматизувати:

  • Компіляція файлів SASS, LESS;
  • Використання Autoprefixer для позбавлення від непотрібних префіксів;
  • Стиснення скомпільованого CSS файлу;
  • Злиття та стиснення JavaScript файлів;
  • Автоматичне оновлення сторінки після зміни будь-якого файлу, будь то HTML, CSS чи JavaScript.

Зверніть увагу, що ми будемо працювати з командами консолі та Node.js. Якщо ви раніше не працювали з ними, не соромтеся, адже єдине, що вам потрібно, — це ввести команду в консолі, а потім забути про це.

Отже, перейдемо до справи. Щоб почати роботу над новим проектом з колектором і автоматичним оновленням сторінки, потрібно встановити Node.js. Його можна легко встановити на будь-якій платформі.

Наступне, що вам потрібно, — це клонувати репозиторій або завантажити його з GitHub, потім перейти до консолі в папці проекту і виконати команду npm install. Це встановить всі необхідні плагіни, які описані в файлі package.json.

Іноді установка не є успішною, основна помилка полягає в тому, що користувачеві не дозволено створювати нові файли. У цьому випадку допоможе команда sudo npm install, і npm встановить всі необхідні пакети в каталог node_modules.

Отже, репозиторій завантажено, плагіни встановлено, час запускати Grunt. Це можна зробити простим командою в консолі: grunt.

Проект має бути розгорнутий на будь-якому з серверів Denver або на подібному. Особисто я використовую сервер webstorm, виконую Run → Run в відкритому html-файлі, після чого сторінка відкривається в браузері за замовчуванням.

Тепер наша сторінка буде автоматично оновлюватися щоразу, коли ви змінюєте файли.

Давайте детальніше розглянемо, що ми маємо під капотом.

Структура проекту:

Автоматизація фронтенду за допомогою Grunt

Директорія Assets містить зображення, JavaScript файли та файли стилів.

Наші скомпільовані файли будуть записані в dist.

Відносини, необхідні для роботи колектора, зареєстровані у файлі package.json.

Gruntfile.js — це файл, в якому налаштовуються параметри Grunt для поточного проекту.

Усі налаштування для плагінів записані у файлі Gruntfile.js. Цей проект налаштований для компіляції LESS файлів, але якщо ви використовуєте SASS, то вам просто потрібно встановити плагін для компіляції SASS-файлів і вимкнути LESS.

Налаштування генерації LESS

Використовуючи grunt-contrib-less, створіть задачу під назвою less у файлі конфігурацій та запишіть шляхи до файлів у налаштуваннях:

less:{
    development:{
        options:{
            paths:["assets/css"]},
        files:{"dist/style.css":"assets/css/main.less"}}},

Після створення CSS-файлу додайте необхідні префікси для властивостей. Нагадаю, що вам не потрібно писати префікси вручну, оскільки ми використовуємо autoprefixer. autoprefixer аналізує файл стилів і автоматично додає потрібні префікси. За замовчуванням ми підтримуємо 2 останні версії браузерів.

autoprefixer:{
    options:{
        browsers:['last 2 versions','ie 9']},
    your_target:{
        src:'dist/style.css',
        dest:'dist/style.css'}},

Після того, як ми додали необхідні префікси, наш CSS має бути трохи стиснутим. Це робиться за допомогою дуже класного плагіна CSSO. Він стискає CSS краще, ніж будь-який інший, плюс створює GZIP-файл, і все це відбувається на льоту.

csso:{
    compress:{
        options:{
            report:'gzip'},
        files:{'dist/style.min.css':['dist/style.css']}}},

JavaScript файли стискаються за допомогою grunt-contrib-uglify. Цей чудовий плагін швидко та ефективно об'єднує та стискає всі ваші скрипти. У налаштуваннях ми вказуємо шляхи до джерел та шлях з назвою для нашого стиснутого файлу.

uglify:{
    options:{
        mangle:false},
    my_target:{
        files:{'dist/main.min.js':['assets/js/**/*.js']}}}

Це зроблено з основними параметрами збирача. Автоматизація фронтенду з Grunt виявилася не такою страшною, як здається. Тут я навів наймінімальнішу конфігурацію. Ви також можете налаштувати компіляцію окремо для режимів dev та prod, встановити стиснення лише для стилів Productions. Таким чином, компіляція буде проходити трохи швидше, але ці кілька мілісекунд навряд чи зроблять роботу більш ефективною. Шаблон можна скачати тут.

Дякую за увагу до моєї статті. Якщо щось можна покращити, будь ласка, пишіть у коментарях або надсилайте pull-запити.