От автора: одна из составляющих успеха тем WP – простота их разработки. Разработчик со знаниями front-end’а и PHP может ознакомиться с замечательным кодексом и приступить к созданию своего нового шедевра.
Для разработки тем достаточно иметь текстовый редактор и графический пакет. Современные же инструменты могут произвести целую революцию в процессе разработки тем. В этом уроке мы с помощью Gulp запустим следующие задачи:
копирование новых PHP-файлов темы;
оптимизация изображений;
компиляция Sass SCSS файлов в один минифицированный CSS-файл;
объединение упорядоченных 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
Создастся папка 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, чтобы:
первой запустилась команда images (в CSS могут быть нужны изображения);
скомпилировать Sass-код в исходном файле scss/style.scss с помощью быстрого компилятора LibSass;
с помощью PostCSS автоматически добавить ссылки на файлы, применить вендорные префиксы, запаковать медиа запросы, а также минифицировать конечный CSS-код;
сохранить стили в /var/www/wp-content/themes/mytheme/style.css;
принудительно перезагрузить CSS с помощью Browsersync (более подробно немного позже).
В исходном файле 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, чтобы:
обработать все JS-файлы в папке js;
отсортировать файлы, а также добавить в верхнюю часть JS-файлов комментарии с зависимостями;
конкатенировать все в один файл;
отрезать весь отладочный код и логи;
минифицировать код;
сохранить конечный код в /var/www/wp-content/themes/mytheme/js/scripts.js;
принудительно перезагрузить CSS с помощью Browsersync (более подробно немного позже).
Запускаем все
Чтобы не вызывать все задачи по отдельности, в gulpfile.js можно добавить следующую строку:
// запустить все задачи
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);
}
});
Теперь добавьте задачу 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.
