20 Лис 2019

Стартовий шаблон

Шаблон проекту на gulp для створення WordPress теми

Головна сторинка » Блог » Стартовий шаблон

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: 'пароль',
};

51голос

Рейтинг статті

Підписатися

0 Коментарі

Вбудовані Відгуки

Переглянути всі коментарі