Рубрика: insights

Более 5 лет назад когда обьемы фалов стали мешать сайтам, наша студия перешла на препроцессор Sass на базе спборщика пакетов grunt.
Последние пару лет, для сравнения взят на использование Gulp. Также имеется опыт работы с webpack.
Сегодня рассмотрим вариант использование, нашего репозитория для создания идеального примера.

За основу будет взята наша хот старт тема из репозитория

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


// =================================
// ========= Config of File Gulpfile ================
// =================================

// config gulp and dependencies.
var gulp = require (‘gulp’),
watch = require (‘gulp-watch’),
browserSync = require (‘browser-sync’),
sass = require (‘gulp-sass’), // scss compilator
concat = require (‘gulp-concat’), // create one big js-file dist.js and vendor.js
uglify = require (‘gulp-uglify’),// minificator
imagemin = require (‘gulp-imagemin’), //minify-any-image
plumber = require (‘gulp-plumber’), // looking mistake in Gulp
notify = require (‘gulp-notify’), //
autoprefixer = require (‘gulp-autoprefixer’),// weblit
sourcemaps = require (‘gulp-sourcemaps’),
cleanCSS = require (‘gulp-clean-css’),
del = require (‘del’);

Каждый плагин к примеру gulp-watch gulp-autoprefixer после его установки будет иметь в руте папку node_modules/gulp....

Ниже пример, результат мы получили в и директорию APP откуда мы подключаем скрипты, уже к WordPress
При этом, основной файл Style.css тоже присутствует, он играет роль для найтройки темы.

Оригинал кода для файта Style.css , далее по ссылке

/*
Theme Name: Sierra group p.e.
Author : Platinum Trade
Description : Blog theme for Web dedelopers
Version : 1.1
Text Domain: web-master
*/

/*@import ‘/app/css/style.css’ screen;*/
/*Мы информируем не подключаем других разработчиков, где находятся стили */

Далее, пример подключения новых стилей, укороченный вариант.


function sierra_group_register_all_scripts_and_styles() {
// ======== CSS
wp_register_style( 'vendor', get_template_directory_uri() . '/app/css/vendor.css', false, '', 'all' );
wp_register_style ('style', get_template_directory_uri() .'/app/css/style.css', false,'', 'all');

// ======== JS
wp_register_script(‘vendor’, get_template_directory_uri() . ‘/app/js/vendor.js’, array(‘jquery’), true);
wp_register_script(‘dist’, get_template_directory_uri() . ‘/app/js/dist.js’, array(‘jquery’), true);
}

Далее следует указать их инициализацию, но не в этом суть.