Сборка шаблонов WordPress при помощи gulp
Опубликовано: 01.09.2018
В продолжение моей прошлой статьи о сборке плагинов gulp -ом решил сделать продолжение и написать о моем опыте автоматизации создания шаблонов для WordPress.
Основная сложность заключается в структуре файлов шаблона и некоторой методологии ибо без нее никуда.
При упоминании слов css и методология в одном предложении, обыватели обычно поминают БЭМ, но есть пару неловких моментов, начиная по порядку с самых неловких:
БЭМ предполагает некоторую консистентность в именовании свойств HTML тегов, а у нас на секундочку CMS с кучей готовых конструкций, переопределить все их конечно можно, но неоправданно долго Каждый используемый плагин наверняка разбавит бережно созданные БЭМ теги простыми, обычными Любой плагин наверняка в силах сломать уже существующие БЭМ блоки, так как в их css файлах наверняка использовалось наследование и их вес почти наверняка больше чем у существующих блоков В процессе верстки не получится использовать большую часть тех тулов что рекомендует БЭМ К любому из перечисленных пунктов можно добавить еще 10 способных нарушить так сказать целостность БЭМ-аПоэтому про БЭМ для WordPress нужно сразу же забыть, и придумать свои лучшие практики, если они вам конечно же нужны.
Ускорение сайта mlpark.com - SPA на Wordpress
Мои рекомендации просты, используйте вложенность только в случае необходимости, используйте препроцессор (с ним писать быстрее), блоки понятие абстрактное и существуют по большей части в голове но не смотря на это нужно стараться сделать их независимыми друг от друга по средствам css селекторов
Создание сайта на MODX Revolution. Урок 2. Настройка MODX Revo. HTML шаблон на MODX Revolution
Сам по себе шаблон WordPress вещь небольшая которую вполне можно вполне держать в голове, но понятная структура все равно не помешает.
Я старался максимально сохранить каноническую структуру путем многих экспериментов изучения кода существующих тем, могу сказать уверенно что эта самая структура должна выглядеть вот так:
Здесь все банально за исключением разве что каталогов templates , less.
В templates я складываю все то что в WordPress принято подключать с помощью функции get_template_part().
В Less же я создаю несколько файлов особым образом:
Здесь есть некоторая логика, имена файлов начинаются с цифр и отделяются от имени файла нижним подчеркиванием число обозначает положение содержимого файла после конкатенации.
Имена less файлов не связаны с именами php файлов, имена фалов и их количество зависит от структуры блоков которая существует только в голове, (так как шаблон как уже говорилось , вещь не очень большая и при необходимости логику восстановить не долго ) .
Размазывать css правила по нескольким файлам на мой взгляд хорошая идея с точки зрения читаемость и лично мне помогает ускорить разработку
Так же пара слов про идею сортировать файлы дописыванием префиксов, да согласен это выглядит как костыль и это и есть костыль , но альтернатив не много, а мультиплатформенные альтернативы и вовсе мне неизвестны даже Linux утилита sort в разных окружениях по дефолту разные на стройки , а возможно и реализации, не проверял, в итоге неизвестно таких утилит по крайней мере простых.
Зато мне хорошо известно что даже в течение короткого времени мне часто приходится работать над одним и тем же проектом в разных ОС и на разных машинах.
Именно поэтому путь лучше будет так, тем более что это достаточно лаконичный костыль и легкий в изготовлении.
Остальные проблемы мне с легкостью можно решить при помощи готовых npm пакетов например моя IDE умеет удобно автодополнять пути к ресурсам (например картинкам), и мне бы хотелось использовать эту фитчу, поэтому
я просто пишу пути к ресурсам относительно каталога less после сборки же итогового css пути автоматически правятся при помощи gulp-css-url-adjuser. Так же при помощи streamqueue я задаю некоторую последовательность начальных файлов (таких как normalize.css) которые следует подключить вначале и их последовательность имеет значение, это решает проблему с тем фактом что style.css в шаблоне WordPress должен начинаться со специального комментария который у меня содержится каталоге css/common/ и называется theme-info.css от имеет примерно такое минимальное содержание /* Theme Name: My Theme URI: alkoweb.ru Description: My new theme Version: 1.0.0 Author: Petrozavodsky */Так же в моем gulp файле реализована возможность последовательно вызывать таски делается это вызовом их в качестве колбеков:
gulp.task('build', ['theme', 'concat']);Здесь сначала выполнится таск ‘theme’ после выполнится ‘concat’ и уже потом ‘build’ если он конечно же что либо возвращает ( в итоговом файле он у меня ничего не содержит )
Учитывая все это мой gulpfile выглядит примерно так:
var theme_name = 'theme-name'; var gulp = require('gulp'), rename = require('gulp-rename'), less = require('gulp-less'), csso = require('gulp-csso'), concat = require('gulp-concat'), autoprefixer = require('gulp-autoprefixer'), notify = require('gulp-notify'), urladjuster = require('gulp-css-url-adjuster'), streamqueue = require('streamqueue'), plumber = require('gulp-plumber'); gulp.task('theme', function () { return gulp.src('public_html/wp-content/themes/' + theme_name + '/less/*.less') .pipe(plumber()) .pipe(concat('public_html/wp-content/themes/' + theme_name + '/css/dest/all.less')) .pipe(less()) .pipe(autoprefixer(['last 3 versions', 'ie 10', 'opera 12'])) .pipe(urladjuster({ replace: ['../', ''] })) .pipe(csso()) .pipe(rename('main.css')) .pipe(gulp.dest('public_html/wp-content/themes/' + theme_name + '/css/dest')) .pipe(notify({message: 'Собрались стили темы'})); }); gulp.task('concat', ['theme'], function () { return streamqueue({objectMode: true}, gulp.src('public_html/wp-content/themes/' + theme_name + '/css/common/theme-info.css'), gulp.src('public_html/wp-content/themes/' + theme_name + '/css/vendor/normalize.css'), gulp.src('public_html/wp-content/themes/' + theme_name + '/css/vendor/wp-reset.css'), gulp.src('public_html/wp-content/themes/' + theme_name + '/css/dest/main.css') ) .pipe(plumber()) .pipe(concat('public_html/wp-content/themes/' + theme_name + '/css/dest/build.css')) .pipe(rename('style.css')) .pipe(gulp.dest('public_html/wp-content/themes/' + theme_name + '/')) .pipe(notify({message: 'Сбилдился css, можно работать'})); }); gulp.task('build', ['theme', 'concat']); gulp.task('watch', function () { gulp.watch(['public_html/wp-content/themes/' + theme_name + '/less/*.less'], ['build']); }); gulp.task('default', ['watch']);Для использования нужно всего подправить в коде переменную theme_name так что бы она содержала названия каталога вашей темы положить gulpfile.js ниже корневого каталога вашего веб сервера и установить нужные npm пакеты командами :
npm install -g gulp npm install --save-dev gulp gulp-rename gulp-less gulp-csso gulp-concat gulp-autoprefixer gulp-notify gulp-css-url-adjuster streamqueue gulp-plumberСобственно все , можно собирать