Как создать автоматическую сборку и минификацию CSS и JS в WordPress

Оптимизация загрузки стилей и скриптов — одна из важных задач для повышения производительности WordPress-сайта. В этой статье мы подробно разберём, как организовать автоматическую сборку, минификацию и объединение CSS и JS файлов в вашем проекте, используя инструменты сборки и нативные возможности WordPress. Это позволит значительно сократить количество HTTP-запросов и уменьшить общий вес страницы.

Почему важна минификация и объединение CSS и JS

Минификация — это процесс удаления из кода всего лишнего: пробелов, комментариев, переносов строк. Объединение (конкатенация) — процесс слияния нескольких файлов в один. Вместе они уменьшают вес ресурсов и количество запросов, что ускоряет загрузку сайта.

В WordPress стандартно подключение стилей и скриптов осуществляется с помощью wp_enqueue_style() и wp_enqueue_script(). Но для сборки и минификации потребуется добавить этап предварительной обработки файлов. В ручном режиме это неудобно, поэтому используем автоматизацию.

Инструменты для сборки и минификации

Для автоматической сборки мы рекомендуем использовать:

• Node.js и npm — пакетный менеджер для установки инструментов.
• Gulp — таск-раннер для автоматизации задач.
• gulp-sass для компиляции SCSS в CSS (если используете препроцессоры).
• gulp-clean-css — для минификации CSS.
• gulp-uglify — для минификации JS.
• gulp-concat — для объединения файлов.

Если вы предпочитаете более современный подход, можно использовать Webpack или Rollup, но для простоты разберём пример на Gulp.

Настройка Gulp для сборки CSS и JS

Для начала создайте в корне темы или плагина файл gulpfile.js и package.json. Для создания package.json выполните в терминале:

npm init -y

Установите необходимые пакеты:

npm install gulp gulp-sass gulp-clean-css gulp-uglify gulp-concat --save-dev

Пример простого gulpfile.js для сборки стилей и скриптов:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');

// Путь к исходникам
const paths = {
  styles: 'src/scss/**/*.scss',
  scripts: 'src/js/**/*.js'
};

// Задача для стилей
function wptavernBuildStyles() {
  return gulp.src(paths.styles)
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('style.min.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
}

// Задача для скриптов
function wptavernBuildScripts() {
  return gulp.src(paths.scripts)
    .pipe(concat('scripts.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
}

// Наблюдение за изменениями
function wptavernWatch() {
  gulp.watch(paths.styles, wptavernBuildStyles);
  gulp.watch(paths.scripts, wptavernBuildScripts);
}

// Экспортируем задачи
exports.styles = wptavernBuildStyles;
exports.scripts = wptavernBuildScripts;
exports.watch = wptavernWatch;
exports.default = gulp.series(wptavernBuildStyles, wptavernBuildScripts, wptavernWatch);

Этот файл позволяет компилировать SCSS в минифицированный CSS и объединять JS в один минифицированный файл. Результат попадает в папку dist.

Подключение собранных файлов в WordPress

После сборки нужно подключить файлы в WordPress с помощью стандартных хуков:

function wptavern_enqueue_assets() {
  wp_enqueue_style('wptavern-style', get_template_directory_uri() . '/dist/css/style.min.css', [], null);
  wp_enqueue_script('wptavern-scripts', get_template_directory_uri() . '/dist/js/scripts.min.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'wptavern_enqueue_assets');

Если вы используете дочернюю тему или плагин, замените get_template_directory_uri() на соответствующий путь.

Кэширование и версии

Для правильной работы кэширования браузеров полезно добавлять версию файлов. В примере ниже мы используем время последней модификации файлов:

function wptavern_enqueue_assets() {
  $style_path = get_template_directory() . '/dist/css/style.min.css';
  $script_path = get_template_directory() . '/dist/js/scripts.min.js';
  
  $style_version = file_exists($style_path) ? filemtime($style_path) : false;
  $script_version = file_exists($script_path) ? filemtime($script_path) : false;

  wp_enqueue_style('wptavern-style', get_template_directory_uri() . '/dist/css/style.min.css', [], $style_version);
  wp_enqueue_script('wptavern-scripts', get_template_directory_uri() . '/dist/js/scripts.min.js', [], $script_version, true);
}
add_action('wp_enqueue_scripts', 'wptavern_enqueue_assets');

Альтернативные решения: плагины для минификации и объединения

Если не хотите настраивать сборку вручную, можно использовать плагины, которые автоматизируют минификацию и объединение:

• Clearfy Pro — мощный плагин оптимизации с функциями минификации и объединения CSS/JS.
• WPRemark — плагин для ускорения сайта с возможностью оптимизации ресурсов.

Такие плагины удобны для пользователей без навыков работы с инструментами сборки. Однако они могут быть менее гибкими, чем ручная настройка.

Советы и рекомендации

Минификация и объединение — важные, но не единственные способы оптимизации. Обратите внимание также на:

• Отложенную загрузку скриптов (defer или async).
• Использование современных форматов изображений и lazy load.
• Кэширование на стороне сервера и CDN.

Для добавления defer в скрипты можно использовать фильтр script_loader_tag:

function wptavern_add_defer_attribute($tag, $handle) {
  if ('wptavern-scripts' === $handle) {
    return str_replace(' src', ' defer src', $tag);
  }
  return $tag;
}
add_filter('script_loader_tag', 'wptavern_add_defer_attribute', 10, 2);

Выводы

Автоматизация сборки и минификации CSS и JS в WordPress — практическая задача, которая значительно улучшит скорость сайта и пользовательский опыт. Используйте инструменты типа Gulp для гибкости или плагины для простоты. Правильно подключайте собранные файлы и не забывайте о кэшировании.

Подробнее о плагинах для оптимизации можно узнать на WPSHOP.RU.