1.0.12 • Published 5 years ago

gulp-bitrix-templates-toolkit v1.0.12

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

Gulp Tasks для сборки шаблона 1С-Битрикс

NPM

Build Status npm.io Dependencies

Set of configurable Gulp tasks for use in Bitrix CMS templates.

Установка

Установка с использованием пакетных менеджеров

npm:

$ npm install --save-dev gulp-bitrix-templates-toolkit

yarn:

yarn add -D gulp-bitrix-templates-toolkit

Пример gulpfile.js

Скрипт gulpfile.js следует размещать в корне шаблона оформления: local/templates/[Каталог темы]/gulpfile.js.

Списки файлов для сборки фалов стилей и скриптов поставщиков приведены для примера. Их следует заменить используемыми ресурсами в конкретном проекте.

Аналогичная ситуация с файлами шрифтов, которые размещаются в каталоге ресурсов шаблона оформления.

const MBXTemplate = require("gulp-bitrix-templates-toolkit");
MBXTemplate.initGlobal(__dirname, "https://site.ru", true);

// Стили для включения в общий файл стилей vendor.css
//
mbx.config.vendorCssSrc = [
    mbx.path.join(mbx.config.nodePath, "normalize.css/normalize.css"),
    mbx.path.join(mbx.config.nodePath, "lightbox2/src/css/lightbox.css")
];

// Скрипты для включения в общий файл скриптов vendor.js
//
mbx.config.vendorJsSrc = [
    mbx.path.join(mbx.config.nodePath, "jquery/dist/jquery.min.js"),
    mbx.path.join(mbx.config.nodePath, "jquery-match-height/dist/jquery.matchHeight-min.js"),
    mbx.path.join(mbx.config.nodePath, "owl.carousel/dist/owl.carousel.min.js"),
    mbx.path.join(mbx.config.nodePath, "lightbox2/src/js/lightbox.js")
];

// Пути к файлам шрифтов для копирования в каталог ресурсов шаблона оформления
//
const fontsSourcePath = mbx.path.join(mbx.config.srcPath, "fonts");
mbx.config.fontFiles = [
    mbx.path.join(fontsSourcePath, "font-awesome-4/fonts",      "*.+(otf|eot|svg|ttf|woff|woff2)"),
    mbx.path.join(fontsSourcePath, "roboto/fonts",              "*.+(otf|eot|svg|ttf|woff|woff2)"),
    mbx.path.join(fontsSourcePath, "robotoslab/fonts",          "*.+(otf|eot|svg|ttf|woff|woff2)")
];

MBXTemplate.initTasks();

Если пакет добавлен в проект в виде репозитория или модуля, то для инициализации константы MBXTemplate следует указать:

const MBXTemplate = require("./src/scripts");

Обработка исходных файлов по-умолчанию

Набор скриптов уже включает в себя функции сборки основных файлов шаблона оформления сайта, шаблонов оформления компонент в шаблоне сайта и шаблонов оформления собственных компонент в каталоге local/components.

Файлы стилей

Обрабатываются исходники в формате scss и sass.

НазначениеИсходный файлСобранный файл
Стили шаблонаlocal/templates/Каталог темы/src/sass/*.scss(sass)local/templates/Каталог темы/assets/css/file name.css
Стили компонент шаблонаlocal/templates/Каталог темы/components/Namespace/Component Name/Template/src/*.scss(sass)local/templates/Каталог темы/components/Namespace/Component Name/Template/file name.css
Стили шаблонов локальных компонентlocal/components/Namespace/Component Name/templates/Template/src/*.scss(sass)local/components/Namespace/Component Name/templates/Template/file name.css

Клонирование репозитория в проект

Клонирование репозитория к себе в проект имеет смысл ТОЛЬКО при условии внесения собственных доработок в скрипты. Соотвествонно, предварительно нужно сделать Fork репозитория к себе в аккаунт.

Репозиторий должен быть размещён в каталоге local/templates/[Каталог темы]/src/scripts.

Клонирование репозитория:

$ git clone git@github.com:mvandrew/gulp-bitrix-templates-toolkit.git local/templates/[Каталог темы]/src/scripts

Добавление модулем в репозиторий проекта:

$ git submodule add git@github.com:mvandrew/gulp-bitrix-templates-toolkit.git local/templates/[Каталог темы]/src/scripts

Кроме этого, необходимо установить для него собственные зависимости:

npm:

$ cd local/templates/[Каталог темы]/src/scripts && npm install

yarn:

$ cd local/templates/[Каталог темы]/src/scripts && yarn install