
Стартовий шаблон
Git-репозиторій: https://github.com/chomovva/starter-theme
Стартовий шаблон потрібен для швидкого створення gulp проекту верстки WordPress теми. Наприклад мені потрібно створити тему, для цього я скачую “стартовий” проект з Git, розпаковую архів в папку wp-content
на локальному сервері, перейменовують папку і заміняю назву теми на свою.
\style.css
\package.json
\src\views\helpers\_variables.pug
Далі відкриваю консоль і встановлюю плагіни Gulp.
npm install
Все, можна починати верстати)
Верстку і php файли теми я об’єднав в одному проекті для зручності внесення правок на етапах створення та оновлення wp-теми.
gulp default # запускає збірку проекту і моніторинг зміни файлів
gulp gutenberg # запуск збірки стилів і скриптів для редактора Gutenberg
gulp minify # мініфікація всіх стилів і скриптів
gulp clearcache # очистка кеша
gulp minscripts # мініфікація скриптів
gulp minstyles # мініфікація стилів
gulp images # мініфікація зображень
gulp packtheme # створення архіву з темою для CMS WordPress
gulp packsrc # створення архіву з вихідними файлами
gulp gutenberg_scripts # збірка скриптів для редактора Gutenberg
gulp gutenberg_styles # збірка стилів для редактора Gutenberg
gulp html # збірка html файлів, препроцесор Pug
gulp styles # збірка стилів, препроцесор SASS
gulp main_styles # сборка скрипту main.js
gulp deploy # завантаження WordPress теми на сервер
З чого складається
Проект складається з набору типових елементів сторінки невеликого сайту-візитки, які необхідні для верстки та готової WordPress теми на їх основі. Тема вже повністю робоча і містить всі основні файли шаблону WP.
“Початкиві файли” верстки знаходяться в папці src
, після компіляції вони переміщаються на рівень вище і відразу використовуються в WordPress.
\src
\images # зображення перед мініфікаціей
\layout # psd шаблони проекту
\scripts # скрипти
\styles # SCSS файли стилів
\svg # svg іконки
\views # PUG файли з яких компілюється html
Gulp плагіни
- gulp-sass – препроцесор SASS, використовується для компіляції * .css файлів з scss / sass
- gulp-pug – препроцесор PUG (Jade), використовується для компіляції HTML файлів.
- gulp-plumber – необхідний для відстеження помилок в Gulp, формує повідомлення з інформацією про помилку.
- gulp-autoprefixer – використовується для розстановки браузерних префіксів. Ці префікси забезпечують підтримку браузерами нових властивостей CSS. Префікси можна додавати вручну, але можна легко забути встановити будь-якої з них. Це дуже рутинна робота, для якої існує плагін gulp-autoprefixer, який використовує базу caniuse.com для визначення які префікси потрібні. Autoprefixer сканує CSS файли і автоматично проставляє префікси до css властивостей.
- gulp-imagemin – плагін для оптимізації графіки, вміє стискати зображення форматів PNG, JPEG, GIF і SVG.
- gulp-sourcemaps – генерує css sourscemaps, які дуже допомагають при налагодженні коду.
- gulp-uglify – мініфікаці js-файлів.
- gulp-clean-css – мініфікація css-файлів
- gulp-rename – перейменування файлів, в проекті додає суфікс .min до імені мініфіцірованних файлів
- gulp-cache – використовується спільно з оптимізацією зображень, дозволяє не перебирати всі зображення, а тільки неоптимізовані використовуючи кеш, щоб не витрачати час на переобхід вже оптимізованих картинок.
- del – видалення файлів.
- browser-sync – запускає сервер доступний по локальній мережі, відповідає за автооновлення сторінки у всіх браузерах на всіх пристроях при змінами файлів і синхронізує позицію скролінгу і заповнення даних в формах.
- gulp-zip – створення zip архівів, в проекті використовується для швидкого створення архіву теми готового до завантаження на хостинг
- gulp-concat – об’єднання файлів.
- gulp-util – допоміжні функції такі як ведення логу, підсвічування повідомлень в консолі, і так далі.
- vinyl-ftp – завантаження проекту на сервер по FTP.
Стилі
Стилі написані на SASS, використовується синтаксис SCSS. SCSS сумісний зі стандартним CSS, це означає, що можна перейменувати файл *.css
в *.scss
, і він буде працювати, як ні в чому не бувало, а це зручно.
Вихідні файли стилів знаходяться в папці \src\styles\
, після компіляції вони переміщуються в папку \styles
, тобто на два рівні вище.
Команда gulp default
запускається в тому числі і компіляцію стилів при якій автоматично додаються браузерні префікси і формуються source maps. Оскільки мініфіковані файли потрібні вже в кінці розробки – мініфікація запускається окремою командою gulp minstyles
.
Стилі в проекті розділені на “основні” і “критичний CSS”. “Критичний css” – це такий метод верстки, при якому стилі, які необхідні для відтворення першої видимої частини сторінки виділяються в окремий файл. Для миттєвої відтворення критичний CSS вбудовують в HTML, всі інші стилі завантажуються окремим файлом асинхронно. Це зменшує час відтворення першої частини сторінки.
Стилі редактора Gutenberg для адмінки компілюються окремо в файл gutenberg.css
. Компіляція запускається командою gulp gutenberg_styles
.
\base # бібліотеки, normalize, "базові" стилі
\blocks # блоки сторінки: хлібні крихти, пагінація, сайдбарі, меню
\helpers # міксини, функції
\home # блоки домашньої сторінки, якщо ця сторінка у вигляді LandingPage
\pages # стилі характерні для окремих типів сторінок: архів, домашня
\widgets # стилі віджетів WP, наприклад хмара тегів, архів
critical.scss # файл стилей, который встраивается inline в страницу
main.scss # основной файл стилей, загружается асинхронно
gutenberg.scss # стили редактора Gutenber для админки
* # тут же розташовуються стилі плагінів, наприклад слайдера Slick.js, модальних вікон Fancybox
gulp.task( 'styles', function () {
return gulp.src( [ './src/styles/*.scss', '!./src/styles/gutenberg.scss' ] )
.pipe( plumber() )
.pipe( sourcemaps.init() )
.pipe( styles().on( 'error', styles.logError ) )
.pipe( autoprefixer() )
.pipe( sourcemaps.write( '.' ) )
.pipe( gulp.dest( './styles/' ) )
.on( 'end', browserSync.reload );
} );
gulp.task( 'minstyles', function () {
return gulp.src( [ './styles/*.css', '!./styles/*.min.css' ] )
.pipe( minstyles( { compatibility: 'ie8' } ) )
.pipe( rename( { suffix: '.min' } ) )
.pipe( gulp.dest( './styles/' ) );
} );
gulp.task( 'gutenberg_styles', function () {
return gulp.src( [ './src/styles/gutenberg.scss' ] )
.pipe( plumber() )
.pipe( sourcemaps.init() )
.pipe( styles().on( 'error', styles.logError ) )
.pipe( autoprefixer() )
.pipe( sourcemaps.write( '.' ) )
.pipe( gulp.dest( './styles/' ) );
} );
Скріпти
Скрипти так само як і стилі після компіляції зберігаються на рівень вище. Скрипти адмінпанелі для Gutenberg компілюються окремо. Мініфікація запускається командою gulp minscripts
.
gulp.task( 'scripts', function () {
return gulp.src( [ './src/scripts/*.js', '!./src/scripts/gutenberg.js' ] )
.pipe( plumber() )
.pipe( gulp.dest( './scripts/' ) )
.pipe( minscripts() )
.pipe( rename( { suffix: '.min' } ) )
.pipe( gulp.dest( './scripts/' ) )
.on( 'end', browserSync.reload );
} );
gulp.task( 'minscripts', function () {
return gulp.src( [ './scripts/*.js', '!./scripts/*.min.js', '!./scripts/gutenberg.js' ] )
.pipe( plumber() )
.pipe( minscripts() )
.pipe( rename( { suffix: '.min' } ) )
.pipe( gulp.dest( './scripts/' ) );
} );
gulp.task( 'gutenberg_scripts', function() {
return gulp.src( './src/scripts/gutenberg/*.js' )
.pipe( plumber() )
.pipe( concat( 'gutenberg.js') )
.pipe( gulp.dest( './scripts/' ) );
}
);
gulp.task( 'main_scripts', function() {
return gulp.src( './src/scripts/main/*.js' )
.pipe( plumber() )
.pipe( concat( 'main.js') )
.pipe( gulp.dest( './scripts/' ) );
}
);
Завантаження WordPress теми на сервер
Для автоматизації завантаження теми на хостинг зручно використовувати Gulp, тобто заздалегідь вказати перелік файлів і папок, які потрібно завантажити, облікові дані FTP і однією командою шкидко та зручно все зробити.
Логін і пароль від FTP вказуються в окремому файлі pass.js
, який доданий в виключення Git, це робиться для того щоб уникнути його попадання у відкритий репозиторій.
const pass = require( './pass.js' );
styles.compiler = require( 'node-sass' );
gulp.task( 'deploy', function() {
var conn = ftp.create( {
host: pass.host,
user: pass.login,
password: pass.password,
parallel: 10,
log: gutil.log
} );
var globs = [
'./**/**/*',
'!./node_modules',
'!./src',
'!./gulpfile.js',
'!./package-lock.json',
'!./package.json',
'!./index.html',
'!./.gitignore',
'!./pass.js',
'!./README.md',
'!./examples',
'!./.git'
];
return gulp.src( globs, { buffer: false } )
.pipe( conn.dest( '/public_html/' ) );
});
module.exports = {
host: 'хост',
login: 'логин',
password: 'пароль',
};