Gulp. Частина 3. Ставимо та використовуємо плагіни
Як взагалі працює Gulp?
Наприкінці другої частиниЯк встановити Gulp ми зупинилися у тому, що він лаявся відсутністьgulpfile. Це "серце" Gulp. Без цього файлу він нічого зробити не зможе, т.к. навіть не знає, що від нього хочуть.
Тут ви створили завдання-замовчання. Ту, яка буде викликатись при запуску Gulp без явної вказівки завдання. У цьому прикладі вона просто копіює файли з однієї директорії до іншої, нічого при цьому не змінюючи.
Компіляція LESS
Не люблю я розглядати нереальні завдання. Давайте поставимо собі для цього урокукомпілювати LESS в CSS за допомогою Gulp.
Для завдань трохи складніше переміщення файлів "чистий" Gulp не підійде. Потрібно використати плагіни до нього. На щастя, їх просто темрява і під кожне ваше завдання вже написаний готовий плагін. У нашому випадку будемо використовувати плагінgulp-less.
Установка плагіна нічим не відрізняється від встановлення самого Gulp. Той самий npm:
Тепер видозмінимо наш gulpfile.js щоб навчити Gulp компілювати LESS.
Важко? Не думаю. Все, що ми зробили, це отримали сам об'єкт плагіна та додали його виклик у завдання. Тепер спробуйте створити в проекті папку less із файлами всередині та запустіть gulp із командного рядка. LESS скомпілюється в CSS.
Використовуємо package.json для простої установки
Погодьтеся, не надто зручно щоразу встановлювати вручну всі модулі з проекту до проекту. Нагадаю, що на Windows глобальне встановлення не прокотить.
У Node.js, а саме у його менеджера пакетів NPM є можливість використовувати один файл для опису залежностей проекту (щось на зразок composer.json у PHP-шників). Чому б не використовувати цю можливість для легкого встановлення наших плагінів?
Ось прикладфайлу для нашої конфігурації. Тут я вказав точні версії gulp та gulp-less. Це тому, що npm сам їх підставив при останньому оновленні. У вас версії можуть відрізнятися за бажанням. Тепер при запускуnpm install без параметрів встановлюватимуться пакети, описані в цьому файлі. Зручно, чи не так?
Запитання читачам
Які можливості Gulp описати у найближчому майбутньому? Є деякі варіанти: Створення спрайтів, генерація Sourcemaps, "стеження" за змінами, оптимізація картинок.