Разрабатывайте темы для WordPress быстрее вместе с Gulp

От автора: одна из составляющих успеха тем WP – простота их разработки. Разработчик со знаниями front-end’а и PHP может ознакомиться с замечательным кодексом и приступить к созданию своего нового шедевра.

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

Что такое Gulp?

Gulp – JS-система, которая берет ваши файлы и оптимизирует их. Если вы не работали в Gulp, пожалуйста, прочитайте введение в Gulp.js. Там описан процесс установки и указаны инструкции по работе с сервисом. Установка вкратце:

Файлы проекта

Для создания чего-либо в Gulp (или другом таск раннере) необходимы исходные файлы: неизмененный код и изображения. Эти файлы обрабатываются, изменяются и минифицируются в файлы билда.

WordPress должен быть установлен в папку на веб-сервере, например, в /var/www/ на Linux/Apache. Тема для WP должна располагаться в своей папке в директории /wp-content/themes/. Папка с файлами билда в таком случае будет /var/www/wp-content/themes/mytheme/. По минимуму темам нужно два файла:

В большинстве тем файлов намного больше, эти файлы отображают посты, страницы, индексы, категории, теги и ошибки. Межстраничные части, такие как хедер и футер, зачастую идут в виде изображений и JS-файлов.

Исходные файлы можно поместить в любом месте в папке mytheme. Так удобно делать в случае, если вы собираетесь распространять свою тему, чтобы другие люди могли ее скачивать, изменять и достраивать. Тем не менее, в целях нашего урока мы будем использовать папку, недоступную с веб-сервера, например, ~/mytheme/. Преимущества такого подхода:

В папке исходного проекта необходимо создать еще 4 папки:

Установка зависимостей

Из исходной папки (~/mytheme/) запустите следующую npm-команду для установки Gulp и всех плагинов:

npm install --save-dev autoprefixer browser-sync css-mqpacker cssnano gulp gulp-concat gulp-deporder gulp-imagemin gulp-newer gulp-postcss gulp-sass gulp-strip-debug gulp-uglify gulp-util postcss-assets

Создастся папка node_modules, в ней будет храниться код модулей. Эту папку необходимо исключить из системы управления версиями (для пользователей Git, добавьте node_modules в файл .gitignore).

Создание файла настроек Gulp

В корне исходной папки создайте файл настроек gulpfile.js. Добавьте следующий код:

// Gulp.js настройки
'use strict';

const

  // исходная папка и папка билда
  dir = {
    src         : 'src/',
    build       : '/var/www/wp-content/themes/mytheme/'
  },

  // Gulp и плагины
  gulp          = require('gulp'),
  gutil         = require('gulp-util'),
  newer         = require('gulp-newer'),
  imagemin      = require('gulp-imagemin'),
  sass          = require('gulp-sass'),
  postcss       = require('gulp-postcss'),
  deporder      = require('gulp-deporder'),
  concat        = require('gulp-concat'),
  stripdebug    = require('gulp-strip-debug'),
  uglify        = require('gulp-uglify')
;

// Browser-sync
var browsersync = false;


// PHP-настройки
const php = {
  src           : dir.src + 'template/**/*.php',
  build         : dir.build
};

// копирование PHP-файлов
gulp.task('php', () => {
  return gulp.src(php.src)
    .pipe(newer(php.build))
    .pipe(gulp.dest(php.build));
});

В коде мы определяем папки по умолчанию, загружаем модули, после чего создаем задачу php, которая будет копировать и обновлять файлы в папке с темой. Задача специально сделана очень простой, чтобы она копировала PHP-файлы как есть.

Сохраните gulpfile.js и создайте несколько файлов .php в папке template. Введите следующую команду:

gulp php

Все файлы будут скопированы в папку с темой (/var/www/wp-content/themes/mytheme/).

Обработка изображений

Часто файлы изображений сжимают с помощью инструментов типа imagemin. Добавьте следующий код в файл gulpfile.js:

// настройки изображений
const images = {
  src         : dir.src + 'images/**/*',
  build       : dir.build + 'images/'
};

// обработка изображений
gulp.task('images', () => {
  return gulp.src(images.src)
    .pipe(newer(images.build))
    .pipe(imagemin())
    .pipe(gulp.dest(images.build));
});

Сохраните и запустите команду gulp images. Сжатые версии новых или обновленных изображений из исходной папки images будут скопированы в /var/www/wp-content/themes/mytheme/images/.

Компиляция Sass

WP не может напрямую использовать файлы Sass, их нужно компилировать в один файл style.css. Добавьте в gulpfile.js следующий код:

// CSS-настройки
var css = {
  src         : dir.src + 'scss/style.scss',
  watch       : dir.src + 'scss/**/*',
  build       : dir.build,
  sassOpts: {
    outputStyle     : 'nested',
    imagePath       : images.build,
    precision       : 3,
    errLogToConsole : true
  },
  processors: [
    require('postcss-assets')({
      loadPaths: ['images/'],
      basePath: dir.build,
      baseUrl: '/wp-content/themes/wptheme/'
    }),
    require('autoprefixer')({
      browsers: ['last 2 versions', '> 2%']
    }),
    require('css-mqpacker'),
    require('cssnano')
  ]
};

// обработка CSS
gulp.task('css', ['images'], () => {
  return gulp.src(css.src)
    .pipe(sass(css.sassOpts))
    .pipe(postcss(css.processors))
    .pipe(gulp.dest(css.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});

Запустите новую задачу с помощью команды gulp css, чтобы:

В исходном файле scss/style.scss вверху должны быть метаданные WP-темы. Например:

/*!
    Theme Name: My Theme
    Theme URI: http://www.sitepoint.com/
    Description: Demonstration theme
    Version: 1.0.0
    Author: Craig Buckler (@craigbuckler)
    Author URI: http://www.sitepoint.com/
    Tags: Gulp

    License: MIT
    License URI: http://opensource.org/licenses/mit-license.php
*/

@import '_base';
@import '_forms';
@import '_tables';
@import 'components/_widget1';
// и т.д...

Крайне важно, чтобы первой строкой шли символы /*!. Эти символы нужны минификатору cssnano. Без них он удалит комментарий, что сделает тему непригодной для использования.

Плагин postcss-assets позволяет ссылаться на изображения следующим образом:

.widget1 {
  width: width('myimage.jpg');
  height: height('myimage.jpg');
  background-image: resolve('myimage.jpg');
}

Также можно инлайнить изображения с помощью автоматической кодировки Base64:

.widget2 {
  background-image: inline('myimage.jpg');
}

Обработка JavaScript

Добавьте следующий код в gulpfile.js:

// JavaScript-настройки
const js = {
  src         : dir.src + 'js/**/*',
  build       : dir.build + 'js/',
  filename    : 'scripts.js'
};

// обработка JavaScript
gulp.task('js', () => {

  return gulp.src(js.src)
    .pipe(deporder())
    .pipe(concat(js.filename))
    .pipe(stripdebug())
    .pipe(uglify())
    .pipe(gulp.dest(js.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());

});

Запустите новую задачу с помощью команды gulp js, чтобы:

Запускаем все

Чтобы не вызывать все задачи по отдельности, в gulpfile.js можно добавить следующую строку:

// запустить все задачи
gulp.task('build', ['php', 'css', 'js']);

Теперь с помощью команды gulp build можно параллельно запустить задачи php, js, css и images. Обратите внимание на то, что images является зависимостью в задаче css, поэтому вызывать ее напрямую нельзя.

Включаем проверку файлов и Browsersyncs

Ваш рабочий процесс можно радикально улучшить, если:

Во-первых, в файле gulpfile.js нужно создать задачу browsersync. Это создаст прокси-сервер для вашего сервера с WP на localhost (измените домен или используйте IP-адрес):

// Browsersync-настройки
const syncOpts = {
  proxy       : 'localhost',
  files       : dir.build + '**/*',
  open        : false,
  notify      : false,
  ghostMode   : false,
  ui: {
    port: 8001
  }
};


// browser-sync
gulp.task('browsersync', () => {
  if (browsersync === false) {
    browsersync = require('browser-sync').create();
    browsersync.init(syncOpts);
  }
});

Теперь добавьте задачу watch для запуска Browsersync, проверки файлов на изменения, а также для запуска соответствующей задачи:

// следим за изменениями в файлах
gulp.task('watch', ['browsersync'], () => {

  // изменения страниц
  gulp.watch(php.src, ['php'], browsersync ? browsersync.reload : {});

  // изменения изображений
  gulp.watch(images.src, ['images']);

    // CSS-изменения
  gulp.watch(css.watch, ['css']);

  // основные изменения в JavaScript
  gulp.watch(js.src, ['js']);

});

И наконец, добавьте задачу default, которая будет запускать первоначальную сборку и стартовать задачу watch:

// задача по умолчанию
gulp.task('default', ['build', 'watch']);

Теперь запустите gulp в командной строке. В консоли отобразятся похожие строки:

Чтобы не загружать ваш сайт с http://localhost/, укажите адрес http://localhost:3000/ или внешний URL, если просматриваете сайт с другого устройства. Ваш WP-сайт все так же будет загружаться, только теперь Gulp будет следить за изменениями и будет сразу же их применять. Больше не нужно переключаться в браузер и нажимать на кнопку обновить!

Для остановки Gulp нажмите Ctrl/Cmd + C.

Автор: Craig Buckler

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Gulp. Основы

Прямо сейчас посмотрите курс по Gulp!

Смотреть курс

Комментарии Вконтакте: