Сборка плагина WordPress при помощи Gulp

Опубликовано: 01.09.2018

видео Сборка плагина WordPress при помощи Gulp

Установка NPM и Gulp. Компиляция SASS

Сейчас модно в web разработки использовать автоматическую сборку проектов, и это хорошо, хорошо потому что удобно и  сильно ускоряет весь процесс.


Gulp 9: Создание плагинов при помощи through2

Сейчас самым  лучшим и популярным на мой взгляд инструментом для сборки я является Gulp, именно поэтому сегодня я расскажу именно про Gulp, про GruntJS я бы тоже мог рассказать так как использовал и его, но Grunt сейчас уже сильно отстал от Gulp по всем параметрам поэтому не буду его поминать боле.

Bootsrap 4. Урок 1 - Подготовка проекта и установка

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

Я давно использую Gulp в своих проектах в том числе на WordPress, сегодня я хочу рассказать о том как собирать, оптимизировать и компилировать css в ваших плагинах. Для тем я тоже планирую ещё одну отдельную статью, так как имеется своя специфика. Так же не смотря на то что Gulp и Node.js работают под любой операционной системой как обычно в Windows есть неприятные особенности о которых я тоже упомяну.

Сначала мой gulpfile.js комментарии потом.

var gulp = require('gulp'), rename = require('gulp-rename'), less = require('gulp-less'), csso = require('gulp-csso'), autoprefixer = require('gulp-autoprefixer'), notify = require('gulp-notify'), plumber = require('gulp-plumber'); gulp.task('plugins', function () { return gulp.src([ 'public_html/wp-content/plugins/**/admin/css/*.less', 'public_html/wp-content/plugins/**/public/css/*.less' ]) .pipe(plumber()) .pipe(less()) .pipe(autoprefixer(['last 3 versions', 'ie 10', 'opera 12'])) .pipe(csso()) .pipe(rename({ extname: ".css" })) .pipe(gulp.dest(function(file){ return file.base; })) .pipe(notify({message: 'Стили плагина собрались!!!'})); }); gulp.task('watch', function () { gulp.watch(['public_html/wp-content/plugins/**/*.less'], ['plugins']); }); gulp.task('default', ['watch']);

И так что я использую из плагинов , я решил обойтись минимальным набором:

gulp-rename — просто переименовывает фалы; gulp-less — компилирует Less; gulp-csso — отличная утилита от Яндекса для оптимизации css; gulp-autoprefixer — добавляет вендорные префиксы в ваш css избавляя вас от этого сомнительного занятия; gulp-notify — умеет показывать всплывающие подсказки кроссплатформенно; gulp-plumber — умеет показывать ошибки gulp тасков в нормальном виде не прерывая процесс.

* все плагины я снабдил ссылками на npmjs.com

Если вы под Windows то советую создать gulp файл вне публичной директории вашего web сервера и это важно так как в виду ограничений файловой системы этой ОС вы скорее всего не сможете снова запустить ваш сервер после останови если директория node_modules со всей ей вложенностью будет лежать в публичной директории вашего web сервера node_modules из-за того что путь веб сервер неспособен будет просканировать все директории что бы примерно представлять причины этого можно это .

Кстати Winginx о котором я писал раньше в полном объеме подвержен этой проблеме.

Так же если у вас Windows и ещё не установлен NodeJS то самое время его поставить.

В случае с Linux это можно сделать одной командой

apt-get install nodejs

После используя пакетный менеджер npm устанавливаем gulp глобально:

npm install -g gulp

Создаем проект npm и следуя подсказкам создаем проект npm

npm init

Далее устанавливаем плагины локально:

npm install —save-dev gulp gulp-rename gulp-less gulp-csso gulp-autoprefixer gulp-notify gulp-plumber

Готово !

Можно проверить в терминале заходим в корень проекта пишем gulp watch теперь можем править файлы less после рядом с файлом .less появится скомпилированный и оптимизированный файл .css с тем же именем.

Теперь пара слов о структуре моего проекта:

в качестве плагина я взял каркас стандартного плагина с гитхаба — WordPress Plugin Boilerplate так как он хорошо подходит для демонстрации .

Именно этим объясняются пути внутри каталога плагинов в моем примере:

return gulp.src([ 'public_html/wp-content/plugins/**/admin/css/*.less', 'public_html/wp-content/plugins/**/public/css/*.less' ])

Корень моего сайта находится в файле public_html/ файл gulpfile.js лежит не внутри public_html а рядом с ним и поэтому не влияет на работу Web сервера ( кстати код из примера работал под Windows и под Ubuntu ).

Я использую Less в примере и в реальных проектах так как в отличии от некоторых других препроцессоров он легко совместим с уже написанным ранее css, поддерживает все основные, никогда не поздно использовать его в проекте даже если изначально этого не планировалось фишки и в целом не плох.

gulp-notify не обязательный плагин но он умеет показывать красивые всплывающие нотификации:

В windows:

В Ubuntu:

Если коротко — «Ну во-первых это красиво».

На этом все.

rss