Початок роботи зі стартовими пакетами Gulp

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

Публікація про різницю між ними, чому ви можете побажати одне над іншим, а також про переваги чи недоліки будь-якого з них може бути його публікацією.

Але для цього я хотів би взяти стартові пакети, про які я писав стосовно Gulp, і навести простий приклад стартового файлу Gulp і того, як його використовувати у своїх проектах WordPress.

Початок роботи з Gulp

По-перше, я фанат Homebrew, тому, коли справа доходить до керування пакетами, які не є частиною Mac App Store, я використовую його. Це значно полегшує встановлення пакетів, їх оновлення та видалення.

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

1 Встановіть Gulp

Якщо у вас встановлено Homebrew, переконайтеся, що все виглядає добре та оновлено, у мене є повний посібник із налаштування Gulp на вашій локальній машині.

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

2 Напишіть свій файл конфігурації Gulp, частина 1

Щоб ініціалізувати файл конфігурації Gulp, введіть таку команду в кореневому каталозі вашого проекту на вашому терміналі:

Легко, чи не так?

Це створить порожній gulpfile.js у кореневому каталозі вашого проекту. Далі настав час відредагувати файл.

Для цієї публікації я збираюся використовувати чотири пакети, які я описав раніше:

• ковток
• ковток-сас
• ковток-зображення
• ковтати-зневажати

Кожне з цих завдань відповідає за транспіляцію Sass, оптимізацію зображень і мінімізацію JavaScript.

Завдання, які ви хочете запускати з командного рядка, не повинні містити пробілів.

Щоб настроїти базові завдання, щоб їх можна було запускати з командного рядка, потрібно виконати такі дії:

Сасс

gulp.task('sass', function(){
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/styles/css'))
});

JavaScript

gulp.task('js', function() {
  return gulp.src('assets/scripts/dev/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('assets/scripts'));
});

Зображення

gulp.task('images', function() {
  return gulp.src('assets/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('assets/images'))
});

Запуск їх індивідуально

Для виконання цих завдань окремо потрібно вводити в консоль наступне:

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

2 Напишіть свій файл конфігурації Gulp, частина 2

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

Переглядайте файли та робіть щось, коли файл змінюється. Це завжди повертає EventEmitter, який випускає change події.

Налаштувати годинник легко. Це дуже схоже на завдання (насправді воно вимагає завдання), але воно також має особливі аргументи. Щоб додати завдання спостереження, яке оброблятиме Sass, JavaScript і зображення, налаштуйте наступне у своєму gulpfile.js:

gulp.task('watch', function() {
    gulp.watch('assets/styles/scss/*.scss', gulp.series('sass'));
    gulp.watch('assets/scripts/dev/*.js', gulp.series('js'));
    gulp.watch('assets/images/*', gulp.series('images'));
});

Тоді просто запустіть завдання :

Звідси кожного разу, коли ви зберігаєте файл Sass, файл JavaScript або вносите зміни в зображення, завдання запускатиметься автоматично, виконуючи роботу визначеного завдання. Зауважте, що це постійно виконуватиметься у своєму потоці, тому вам потрібно буде відкрити нову вкладку або вікно терміналу, якщо вам потрібно буде виконати будь-яку додаткову роботу.

Примітка про версії

У попередніх версіях Gulp другий аргумент для функції спостереження приймав масив; однак остання версія потребує фактичної функції (яку ви можете побачити вище в тому, що я оголосив series ).

Коротше кажучи, Gulp 4 дозволяє послідовне виконання, яке виконується за допомогою series, і паралельне виконання (яке може використовувати функцію parallel ). Це виходить за рамки цієї публікації, оскільки вона має на меті допомогти вам почати роботу.

Після цього у вас буде набагато більше автоматизації в процесі створення.