Створюйте теми для WordPress швидше разом з Gulp

452

Від автора: це одна із складових успіху тим 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’, [‘type’], () => {
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
Версія: 1.0.0
Author: Craig Buckler (@craigbuckler)
Author URI: http://www.sitepoint.com/
Tags: Gulp
Ліцензія: 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, [‘type’]);
// CSS-зміни
gulp.watch(css.watch, [‘css’]);
// основні зміни в JavaScript
gulp.watch(js.src, [‘js’]);
});

І нарешті, додайте завдання default, яка буде запускати первісну збірку і стартувати завдання watch:

// завдання за замовчуванням
gulp.task(‘default’, [‘build’, ‘watch’]);

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

Створюйте теми для WordPress швидше разом з Gulp

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

Для зупинки Gulp натисніть Ctrl/Cmd + C.