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

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

Многие товарищи создают свои рабочие и не очень 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: