Развертывание Gulp 5 для создания шаблона WordPress

Gulp — это мощный инструмент для автоматизации задач в веб-разработке. С его помощью можно значительно упростить и ускорить процесс разработки шаблонов WordPress. В этом гайде мы рассмотрим, как установить и настроить Gulp 5 для разработки шаблона WordPress, а также приведем примеры кода и объясним их.

Помощь по настройке Gulp 5 для разработки темы WordPress. Мы автоматизируем обработку SCSS, JS, изображений, SVG-спрайтов и настройку Live Reload.

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

Создайте тему WordPress со следующей структурой:

your-theme/
├── assets/
│   ├── css/          # Собранные CSS
│   ├── js/           # Собранные JS
│   ├── images/       # Оптимизированные изображения
│   └── svg/          # SVG-спрайты
├── src/
│   ├── scss/         # Исходные SCSS-файлы
│   │   ├── style.scss
│   │   └── ... 
│   ├── js/           # Исходные JS-файлы
│   │   ├── main.js
│   │   └── ...
│   ├── images/       # Исходные изображения
│   └── svg/          # Исходные SVG-иконки
├── functions.php
├── header.php
├── footer.php
├── index.php
├── style.css         # Главный файл темы WP
└── gulpfile.js

Шаг 1: Установка зависимостей

1.1 Установите Node.js

Загрузите с официального сайта.

1.2 Инициализация проекта

В корне темы (your-theme/) выполните:

npm init -y

1.3 Установите Gulp и плагины:

npm install --save-dev gulp@next browser-sync gulp-sass sass gulp-autoprefixer gulp-clean-css gulp-sourcemaps gulp-concat gulp-uglify gulp-imagemin gulp-svg-sprite gulp-cheerio gulp-replace gulp-if

Шаг 2: Создание gulpfile.js

Создайте файл gulpfile.js в корне темы с содержимым:

// gulpfile.js

import gulp from 'gulp';
import browserSync from 'browser-sync';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import cleanCSS from 'gulp-clean-css';
import sourcemaps from 'gulp-sourcemaps';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import imagemin from 'gulp-imagemin';
import svgSprite from 'gulp-svg-sprite';
import cheerio from 'gulp-cheerio';
import replace from 'gulp-replace';
import ifElse from 'gulp-if';
import { Transform } from 'stream';

// Настройки
const isProd = process.env.NODE_ENV === 'production';

const paths = {
  scss: './src/scss/**/*.scss',
  js: './src/js/**/*.js',
  images: './src/images/**/*.{jpg,jpeg,png,gif,svg}',
  svg: './src/svg/*.svg',
  php: './**/*.php',
  dest: {
    css: './assets/css/',
    js: './assets/js/',
    images: './assets/images/',
    svg: './assets/svg/'
  }
};

// Компиляция SCSS
function styles() {
  return gulp.src(paths.scss)
    .pipe(ifElse(!isProd, sourcemaps.init()))
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(autoprefixer({ cascade: false }))
    .pipe(ifElse(isProd, cleanCSS({ compatibility: 'ie8' })))
    .pipe(ifElse(!isProd, sourcemaps.write('.')))
    .pipe(gulp.dest(paths.dest.css))
    .pipe(browserSync.stream());
}

// Обработка JS
function scripts() {
  return gulp.src(paths.js)
    .pipe(concat('main.js'))
    .pipe(ifElse(isProd, uglify()))
    .pipe(gulp.dest(paths.dest.js))
    .pipe(browserSync.stream());
}

// Оптимизация изображений
function images() {
  return gulp.src(paths.images)
    .pipe(imagemin([
      imagemin.gifsicle({ interlaced: true }),
      imagemin.mozjpeg({ quality: 75, progressive: true }),
      imagemin.optipng({ optimizationLevel: 5 }),
      imagemin.svgo({
        plugins: [{ removeViewBox: true }, { cleanupIDs: false }]
      })
    ]))
    .pipe(gulp.dest(paths.dest.images));
}

// Создание SVG-спрайта
function svgSprites() {
  return gulp.src(paths.svg)
    .pipe(svgSprite({
      mode: {
        stack: {
          sprite: '../sprite.svg',
          example: true
        }
      }
    }))
    .pipe(cheerio({
      run: function ($) {
        $('[fill]').removeAttr('fill');
        $('[stroke]').removeAttr('stroke');
        $('[style]').removeAttr('style');
      },
      parserOptions: { xmlMode: true }
    }))
    .pipe(replace('>', '>'))
    .pipe(gulp.dest(paths.dest.svg));
}

// Перезагрузка браузера при изменении PHP/WordPress
function reload(done) {
  browserSync.reload();
  done();
}

// Сервер для разработки
function serve(done) {
  browserSync.init({
    proxy: 'http://localhost/your-wordpress-site/', // Замените на URL вашего WP
    notify: false,
    open: true
  }, done);
}

// Наблюдение за изменениями
function watch() {
  gulp.watch(paths.scss, styles);
  gulp.watch(paths.js, scripts);
  gulp.watch(paths.images, images);
  gulp.watch(paths.svg, svgSprites);
  gulp.watch(paths.php, reload); // Перезагрузка при изменении PHP
}

// Задачи по умолчанию (разработка)
export const dev = gulp.series(
  gulp.parallel(styles, scripts, images, svgSprites),
  serve,
  watch
);

// Сборка для Production
export const build = gulp.series(
  gulp.parallel(styles, scripts, images, svgSprites)
);

// Экспорт задач
export { styles, scripts, images, svgSprites, reload, serve, watch };

Шаг 3: Настройка темы WordPress

3.1 Главный файл темы (style.css)

В начало файла добавьте информацию о теме:

/*
Theme Name: My Gulp Theme
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: Тема с Gulp 5
Version: 1.0
*/

3.2 Подключение ассетов в header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
    <!-- Подключение стилей -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/style.css">
</head>
<body <?php body_class(); ?>>

3.3 Подключение скриптов в footer.php

<footer>
  <!-- Контент футера -->
</footer>
<?php wp_footer(); ?>
<!-- Подключение JS -->
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/main.js"></script>
</body>
</html>

Шаг 4: Запуск Gulp

4.1 Режим разработки

npx gulp dev

• Запустится локальный сервер через BrowserSync.
• Автоматическая компиляция SCSS → CSS, обработка JS, оптимизация изображений.
• Live Reload при изменениях.

4.2 Режим продакшена

Сначала установите переменную окружения:

export NODE_ENV=production # Для Linux/Mac
# или
set NODE_ENV=production   # Для Windows

Затем выполните сборку:

npx gulp build

• Файлы будут оптимизированы (минификация CSS/JS, сжатие изображений).
• Результат в папке assets/.

Использование functions.php для WordPress

Добавьте необходимые функции:

<?php
function theme_scripts() {
    // Стили и скрипты уже подключены через header/footer
}
add_action('wp_enqueue_scripts', 'theme_scripts');
?>

Полезные команды

Решение проблем

1. Ошибка компиляции SCSS
   Проверьте версии пакетов. Обновите:npm update gulp-sass sass
2. Изображения не оптимизируются
   Убедитесь, что в папке src/images есть файлы.
3. Live Reload не работает
   Проверьте настройки прокси в browserSync.init(). URL должен совпадать с вашим локальным WordPress.
4. SVG-спрайт не генерируется
   Установите gulp-cheerio и gulp-replace, если не сделано ранее.