Статьи

Разрабатывайте темы WordPress быстрее с Gulp

Октябрь 26, 2018

Эта статья Gulp является частью серии, созданной в сотрудничестве с SiteGround . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

Простая разработка тем WordPress частично ответственна за ее успех. Разработчик, обладающий интерфейсом и знанием PHP, может обратиться к превосходному Кодексу и начать работу над своим следующим шедевром.

Разработка темы возможна только с помощью текстового редактора и графического пакета, но современные наборы инструментов могут революционизировать ваш рабочий процесс. В этом уроке мы будем использовать Gulp для запуска задач, в том числе:

  • копирование новых файлов тем PHP
  • оптимизация изображений
  • компиляция файлов Sass SCSS в один минимизированный файл CSS
  • объединение упорядоченных файлов JavaScript, удаление операторов отладки и минимизация
  • автоматическое обновление браузера при обновлении файлов.

Что такое Gulp?

Gulp — это система сборки на основе JavaScript, которая берет ваши исходные файлы и преобразует их в оптимизированные версии. Если вы новичок в Gulp, пожалуйста, обратитесь к разделу Введение в Gulp.js для полной инструкции по установке и использованию. Краткое описание начальных шагов:

  1. Установите Node.js.
  2. Установите Gulp глобально: npm install gulp-cli -g
  3. Создайте папку проекта и перейдите в нее: mkdir mytheme затем cd mytheme .
  4. Инициализируйте ваш проект с помощью npm: npm init

Файлы вашего проекта

Процесс сборки Gulp (или любой другой) требует набора исходных файлов, содержащих ваш неизмененный код и изображения. Они обрабатываются, обрабатываются и минимизируются для создания файлов сборки .

WordPress устанавливается в папку веб-сервера, возможно, /var/www/ в Linux / Apache. Ваша тема WordPress должна быть определена в ее собственной подпапке в /wp-content/themes/ . Поэтому папка с нашими встроенными файлами может быть /var/www/wp-content/themes/mytheme/ . Как минимум, темы требуют двух файлов:

  • таблицу стилей style.css содержащую метаданные в комментариях вверху, и
  • файл шаблона index.php .

Большинство тем содержат гораздо больше файлов для представления сообщений, страниц, индексов, категорий, тегов и ошибок. Межстраничные пароли, такие как верхние и нижние колонтитулы, обычно определяются как файлы изображений и JavaScript.

Вы можете разместить свои исходные файлы где-нибудь в папке mytheme . Это может быть полезно, если вы распространяете тему для скачивания, изменения и создания другими пользователями. Однако для целей данного руководства мы будем использовать исходную папку, недоступную с веб-сервера, например ~/mytheme/ . Преимущества такого подхода:

  1. Исходными файлами вашей темы можно управлять в одной папке и хранилище, не загрязняя папки build или WordPress.
  2. Последняя созданная папка темы содержит только те файлы, которые ей требуются.
  3. Gulp, его плагины и другие приложения не содержатся в папке темы. Они не могут быть случайно скопированы на производственный сервер, что является ненужным и может иметь последствия для безопасности.

Папка исходного проекта требует еще четыре подпапки:

  • template — файлы темы WordPress PHP
  • images — изображения, используемые вашей темой
  • scss — исходные файлы Sass SCSS
  • js — любое количество отдельных исходных файлов JavaScript на стороне клиента.

Установить зависимости

В исходной папке ( ~/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 папка node_modules содержащая код модуля. Это должно быть опущено в вашей системе управления версиями (для пользователей Git добавьте node_modules в ваш файл .gitignore ).

Создать файл конфигурации Gulp

Создайте новый gulpfile.js конфигурации gulpfile.js в корне вашей исходной папки. Добавьте этот код, чтобы начать: 

 // Gulp.js configuration 'use strict' ; const // source and build folders dir = { src : 'src/' , build : '/var/www/wp-content/themes/mytheme/' }, // Gulp and plugins 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 settings const php = { src : dir.src + 'template/**/*.php' , build : dir.build }; // copy PHP files 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 : 

 // image settings const images = { src : dir.src + 'images/**/*' , build : dir.build + 'images/' }; // image processing 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 Compilation

WordPress не может напрямую использовать файлы Sass; Вы должны скомпилировать в один файл style.css . Добавьте следующий код в gulpfile.js : 

 // CSS settings 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 processing gulp.task( 'css' , [ 'images' ], () => { 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 чтобы:

  • сначала запустите задачу Gulp images (изображения могут потребоваться в вашем CSS)
  • скомпилируйте код Sass в исходном scss/style.scss используя быстрый компилятор LibSass
  • Используйте PostCSS для автоматического добавления ссылок на ресурсы, применения префиксов поставщиков, объединения медиазапросов и минимизации получающегося кода CSS
  • выведите таблицу стилей в /var/www/wp-content/themes/mytheme/style.css .
  • принудительная перезагрузка браузера Browsersync (подробнее об этом позже).

Исходный scss/style.scss должен содержать метаданные темы WordPress вверху, например 

 '_base' ; @ import '_forms' ; @ import '_tables' ; @ import 'components/_widget1' ; // etc...

Важно использовать /*! как первая строка. Это гарантирует, что cssnano minifier не удалит комментарий и сделает вашу тему непригодной для использования.

Плагин 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 settings const js = { src : dir.src + 'js/**/*' , build : dir.build + 'js/' , filename : 'scripts.js' }; // JavaScript processing 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 чтобы:

  • обработать все файлы JavaScript в исходной папке js
  • упорядочить файлы соответствующим образом. Добавьте комментарии вверху ваших файлов JavaScript для объявления зависимостей, например, // requires: lib1.js или // requires: config.js lib1.js
  • объединить в один файл
  • убрать все операторы отладки и ведения журнала консоли
  • минимизировать код
  • выведите полученный код в /var/www/wp-content/themes/mytheme/js/scripts.js .
  • принудительная перезагрузка браузера Browsersync (подробнее об этом позже).

Запустить все

Вместо того, чтобы вызывать каждую задачу отдельно, мы можем добавить следующий код в gulpfile.js : 

 // run all tasks gulp.task( 'build' , [ 'php' , 'css' , 'js' ]);

Теперь вы можете использовать gulp build для параллельного запуска задач php , js , css и images . (Обратите внимание, images являются зависимостью задачи css поэтому нам не нужно вызывать ее напрямую.)

Включить просмотр файлов и Browsersync

Ваш рабочий процесс может быть радикально улучшен с помощью:

  1. Позвольте Gulp наблюдать за изменениями файлов перед запуском соответствующей задачи.
  2. Автоматическая перезагрузка файлов CSS и JavaScript при их изменении (без обновления страницы).
  3. Автоматическое обновление страницы при изменении файла шаблона.

Во-первых, нам нужно определить задачу browsersync в gulpfile.js . Это создаст прокси-сервер для вашего веб-сервера под управлением WordPress на localhost (измените этот домен или используйте IP-адрес при необходимости): 

 // Browsersync options 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, проследите за изменениями файлов и запустите соответствующую задачу: 

 // watch for file changes gulp.task( 'watch' , [ 'browsersync' ], () => { // page changes gulp.watch(php.src, [ 'php' ], browsersync ? browsersync.reload : {}); // image changes gulp.watch(images.src, [ 'images' ]); // CSS changes gulp.watch(css.watch, [ 'css' ]); // JavaScript main changes gulp.watch(js.src, [ 'js' ]); });

Наконец, добавьте задачу Gulp по default которая запускает начальную сборку и запускает задачу watch : 

 // default task gulp.task( 'default' , [ 'build' , 'watch' ]);

Теперь запустите gulp из командной строки. Консоль будет отображать вывод, который включает в себя строки, похожие на: 

 [BS] Proxying: http://localhost [BS] Access URLs: ------------------------------------- Local: http://localhost:3000 External: http://192.168.1.99:3000 ------------------------------------- UI: http://localhost:8001 UI External: http://192.168.1.99:8001 ------------------------------------- [BS] Watching files...

Вместо загрузки вашего сайта разработки с http://localhost/ введите адрес http://localhost:3000/ или внешний URL, если вы просматриваете с другого устройства. Ваш сайт WordPress будет загружаться, как и раньше, но Gulp будет следить за изменениями и немедленно применять обновления. Вам больше не нужно переключаться в браузер и нажимать кнопку «Обновить» снова!

Нажмите Ctrl / Cmd + C, когда хотите остановить обработку Gulp.

Улучшать дальше

Мы рассмотрели основы разработки тем WordPress с помощью Gulp, но есть несколько тысяч плагинов, которые помогут вам в вашем рабочем процессе. Вы можете рассмотреть дополнительные задачи для:

Несколько часов написания задач Gulp могут сэкономить много дней ручной обработки в течение длительного времени.

58
Share: