Стартовый шаблон - Блог chomovva

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

Скрины

vote
Article Rating
Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x