Кілька пакетів Gulp для початківців

Останнє оновлення Лис 9, 2022

Зміст

Такі програми, як Gulp та інші утиліти, не є новими. Для тих, хто раніше ними не користувався, розпочати може бути трохи складно (але насправді цього не повинно бути).

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

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

Однак це не мета публікації. Натомість ось список із кількох пакетів для початку.

Подумайте про них так: якщо ви шукаєте способи роботи з Sass, JavaScript і оптимізацією зображень, це хороші бібліотеки.

Пакети Gulp для початківців

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

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

Знову ж таки, ви можете виявити, що є варіанти для налаштування вашого конкретного проекту.

1 Sass

Ви можете працювати з Less (насправді я ні тут, ні там), але я віддаю перевагу Sass. Тому я використовую бібліотеку gulp-sass спеціально для компіляції файлів Sass у CSS.

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

У каталозі styles у мене є два підкаталоги:

scss
css

Я зберігаю всі свої файли SCSS у відповідному каталозі, а потім використовую gulp-sass для виведення скомпільованих файлів у CSS.

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

Звідти я ставлю файли CSS у чергу за допомогою необхідної функції WordPress API.

2 Мінімізація JavaScript

На цьому етапі переваги мінімізації файлів JavaScript були доведені знову і знову, тому я не збираюся надалі обговорювати це питання.

Є деякі пакети, які я спробував, оскільки вони стосуються роботи з мініфікацією JavaScript, і gulp-uglify — це той, який мені подобається використовувати найбільше.

Згадайте з попереднього розділу, що у мене є каталог активів, а в ньому є підкаталог сценаріїв . Цей каталог містить один власний підкаталог: dev.

Я беру файли JavaScript, які знаходяться в dev, і виводжу їх у корінь каталогу scripts.

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

Звідти, як і вище, я ставлю їх у чергу за допомогою тієї самої функції WordPress API.

3 Оптимізація зображення

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

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

[зображення]

Є деякі залежності для цієї конкретної бібліотеки, тому вам потрібно переконатися, що вони також включені. До них відносяться

picturein-gifsicle,
imagein-jpegtran,
imagein-optipng,
imagein-svgo.

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

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

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

Файли пакетів, файли Gulp і все таке?

Якщо ви новачок у Gulp, Node або інших системах побудови, то вам потрібно ще трохи розповісти про встановлення та налаштування Node і Gulp.

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

Джерело запису: tommcfarlin.com