Не претендую на новизну. Для кого-то написанное ниже - прописные истины, а для кого-то "а что так можно было?". Просьба не бить за элементарные примеры
Несмотря на название инструмент является универсальным и отлично подходит для сборки ресурсов в шаблоне битрикса.
Рассмотрим использование Elixir на следующих простых задачах:
Разумеется нам понадобится установленный node.js
Для корректного исполнения скриптов устанавливаем Gulp как глобальный пакет
В корне нашего шаблона создаем файл зависимостей package.json со следующим содержимым:
В нем указаны необходимые зависимости для node.js, а также скрипты:
Устанавливаем
В корне нашего шаблона создаем файл gulpfile.js - "руководство по сборке" со следующим содержимым:
Поскольку Elixir по умолчанию работает со структурой папок Laravel, то необходимо вторым параметром указывать каталоги для итоговых файлов. Иначе создаcтся лишний каталог "public". В данном скрипте мы указываем, что необходимо обработать исходники:
и в итоге получить
Создадим исходники
SASS
В каталоге шаблона создадим 3 файла:
resources/assets/sass/_variables.scss – файл будет содержать дефолтные значения наших переменных:
resources/assets/sass/_core.scss – это будет файл наших стилей:
resources/assets/sass/app.scss – основной скрипт для сборки стилей:
JS
Создаем файл resources/assets/js/app.js
Сборка
Проверяем. Создались наши файлы
Пропишем их в хидер шаблона header.php
Ну и создадим тестовую страничку
Видим 4 синих заголовка, а к H1 есть приписка? Значит работает.
Попробуем поменять значение переменной в SASS файле app.scss
Пересобираем. Проверяем. Один заголовок стал красным? Работает.
Ну и перед выгрузкой на продакшн выполняем
Чтобы получить сжатые версии наших файлов
Это только минимум из возможностей Elixir. Подробней о работе с ним можно посмотреть в документацииhttps://laravel.ru/docs/v5/elixir
Laravel Elixir предоставляет чистый и гибкий API для определения основных Gulp-задач вашего Laravel-приложения. Elixir поддерживает несколько основных препроцессоров CSS и JavaScript и даже инструменты тестирования. С помощью сцепки методов Elixir позволяет вам гибко определять свой файлопровод (asset pipeline). © Документация |
Несмотря на название инструмент является универсальным и отлично подходит для сборки ресурсов в шаблоне битрикса.
Рассмотрим использование Elixir на следующих простых задачах:
- сборка jQuery и наших JavaScript в один файл js
- сборка SASS в css
Разумеется нам понадобится установленный node.js
Для корректного исполнения скриптов устанавливаем Gulp как глобальный пакет
npm install --global gulp |
В корне нашего шаблона создаем файл зависимостей package.json со следующим содержимым:
{ "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "gulp": "^3.9.1", "laravel-elixir": "^5.0.0" }, "dependencies": { "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "jquery": "^2.0.0" } } |
В нем указаны необходимые зависимости для node.js, а также скрипты:
- npm run-script watch – режим разработки, непрерывное отслеживание наших файлов и сборка при изменении
- npm run-script prod - сборка минимизированных файлов
Устанавливаем
npm install |
В корне нашего шаблона создаем файл gulpfile.js - "руководство по сборке" со следующим содержимым:
var elixir = require('laravel-elixir'); /* true - создавать source maps false - не создавать source maps */ elixir.config.sourcemaps = false; elixir(function(mix) { mix.sass('app.scss', 'css') .browserify('app.js', 'js'); }); |
Поскольку Elixir по умолчанию работает со структурой папок Laravel, то необходимо вторым параметром указывать каталоги для итоговых файлов. Иначе создаcтся лишний каталог "public". В данном скрипте мы указываем, что необходимо обработать исходники:
resources/assets/js/app.js resources/assets/sass/app.scss |
и в итоге получить
js/app.js css/app.css |
Создадим исходники
SASS
В каталоге шаблона создадим 3 файла:
resources/assets/sass/_variables.scss – файл будет содержать дефолтные значения наших переменных:
$my-h1-color: #00FF00 !default; $my-h2-color: $my-h1-color !default; $my-h3-color: $my-h1-color !default; $my-h4-color: $my-h1-color !default; |
resources/assets/sass/_core.scss – это будет файл наших стилей:
h1 { color: $my-h1-color; } h2 { color: $my-h2-color; } h3 { color: $my-h3-color; } h4 { color: $my-h4-color; } |
resources/assets/sass/app.scss – основной скрипт для сборки стилей:
@import "variables"; @import "core"; |
JS
Создаем файл resources/assets/js/app.js
/** * подгружаем jQuery */ window.$ = window.jQuery = require('jquery') /** * пишем собственные скрипты */ $( document ).ready(function() { $('h1').append('<small> is very big header</small>'); }); |
Сборка
npm run-script dev |
Проверяем. Создались наши файлы
css/app.css js/app.js |
Пропишем их в хидер шаблона header.php
<?$asset = Bitrix\Main\Page\Asset::getInstance();?> <?$asset->addCss(SITE_TEMPLATE_PATH . '/css/app.css', false);?> <?$asset->addJs(SITE_TEMPLATE_PATH . '/js/app.js', false);?> <?$APPLICATION->ShowHead();?> |
Ну и создадим тестовую страничку
<? require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); $APPLICATION->SetTitle("Elixir Test"); ?> <h1>HEADER H1</h1> <h2>HEADER H2</h2> <h3>HEADER H3</h3> <h4>HEADER H1</h4> <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?> |
Видим 4 синих заголовка, а к H1 есть приписка? Значит работает.
Попробуем поменять значение переменной в SASS файле app.scss
$my-h3-color: #FF0000; @import "variables"; @import "core"; |
Пересобираем. Проверяем. Один заголовок стал красным? Работает.
Ну и перед выгрузкой на продакшн выполняем
npm run-script prod |
Чтобы получить сжатые версии наших файлов
Это только минимум из возможностей Elixir. Подробней о работе с ним можно посмотреть в документации