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

Дата публикации: 2017-04-07

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

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

копирование новых PHP-файлов темы;

оптимизация изображений;

компиляция Sass SCSS файлов в один минифицированный CSS-файл;

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

объединение упорядоченных JS-файлов, удаление отладочного кода и минификация;

автоматическое обновление браузера после пересохранения файлов.

Что такое Gulp?

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

установите Node.js;

выполните глобальную установку Gulp: npm install gulp-cli –g;

создайте папку проекта и перейдите в нее: mkdir mytheme и далее cd mytheme;

инициализируйте проект с помощью npm: npm init.

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

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

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

файл стилей style.css с метаданными в комментариях в верхней части;

файл шаблона index.php.

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

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

исходными файлами темы можно управлять из одной папки и репозитория, не загрязняя билд или папки WP;

папка с конечной темой содержит только нужные файлы;

В папке темы нет Gulp, плагинов и других приложений. Их нельзя случайно скопировать на рабочий сервер, что могло бы привести к проблемам с безопасностью.

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

template – PHP-файлы темы WP;

images – изображения вашей темы;

scss – файлы Sass SCSS;

js – любое количество исходных файлов клиентского JS.

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

Из исходной папки (~/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

1	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));
});

// 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

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));
});

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

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());
});

// 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, чтобы:

первой запустилась команда images (в CSS могут быть нужны изображения);

скомпилировать Sass-код в исходном файле scss/style.scss с помощью быстрого компилятора LibSass;

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

с помощью PostCSS автоматически добавить ссылки на файлы, применить вендорные префиксы, запаковать медиа запросы, а также минифицировать конечный CSS-код;

сохранить стили в /var/www/wp-content/themes/mytheme/style.css;

принудительно перезагрузить CSS с помощью Browsersync (более подробно немного позже).

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

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

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

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

/*!

Theme Name: My Theme

Theme URI: //www.sitepoint.com/

Description: Demonstration theme

Version: 1.0.0

Author: Craig Buckler (@craigbuckler)

Author URI: //www.sitepoint.com/

Tags: Gulp

License: MIT

License URI: //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');
}

.widget1 {

width: width('myimage.jpg');

height: height('myimage.jpg');

background-image: resolve('myimage.jpg');

}

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

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

.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());

});

// 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, чтобы:

обработать все JS-файлы в папке js;

отсортировать файлы, а также добавить в верхнюю часть JS-файлов комментарии с зависимостями;

конкатенировать все в один файл;

отрезать весь отладочный код и логи;

минифицировать код;

сохранить конечный код в /var/www/wp-content/themes/mytheme/js/scripts.js;

принудительно перезагрузить CSS с помощью Browsersync (более подробно немного позже).

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

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

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

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

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

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

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

позволить Gulp проверять изменения в файлах перед запуском соответствующей задачи;

автоматически перезагружать CSS и JS файлы после внесения изменений (без обновления страницы);

автоматически обновлять страницу при изменении файла шаблона.

Во-первых, в файле 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);
  }
});

// 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']);

});

// следим за изменениями в файлах

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']);

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

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

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

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

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

Автор: Craig Buckler

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

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

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс