Стартовый шаблон

Стартовый шаблон для простой верстки и верстки для bitrix'а. По умолчанию простая верстка, для битрикса надо указать директорию шаблона в файле gulpfile.js в объекте settings. В нем же список задач для запуска и настройки сборки.

Установка:

sudo npm i --unsafe-perm

Запустить сборку + наблюдение за изменением файлов:

npm run dev
// или
gulp

Запустить только сборку:

npm run build
// или
gulp build

Запустить отдельную задачу:

gulp htmlBuild
gulp cssBuild
gulp jsBuild
...

При необходимости можно настроить отдельную команду, которая будет менять настройки в зависимости от параметра. Примеры в package.json:

"scripts": {
    "custom-dev": "gulp --preset=custom-dev",
    "custom-build": "gulp build --preset=custom-build"
}

И в gulpfile.mjs:

switch (preset) {
    case "custom-dev":
        settings.server.enable = true;
        settings.imageMin = false;
        break;
    case "custom-build":
        settings.server.enable = false;
        settings.imageMin = true;
        break;
}

Структура файлов

• source - исходники проекта
  • .config
  • fonts
  • html
  • images
  • js
  • scss
  • sprites
  • upload
  • vendor
• www - скомпилированные файлы

.config

• modernizr.json - https://github.com/Modernizr/Modernizr/blob/master/lib/config-all.json
• sprites-template.* - шаблоны для генерации спрайтов, генерятся с именами sprites.* в соответствующих директориях

fonts

просто файлы шрифтов
в scss/_fonts.scss идет подключение

html

• layouts - шаблоны страниц, не компилируются
• pages - отдельные страницы, которые компилируются в html
  • ajax/* - формы, обработка ajax'а, подгружаемые вьюхи
  • _blank.pug - болванка для новой страницы
• sprites.pug - файл с миксинами для спрайтов, генерится автоматически
• variables.pug - глобальные переменные

images

Графика для проекта
sprites.svg - компилируется автоматом, этот файл нужно встроить в готовую страницу (php include)

js

Отдельные файлы скомпилируются в main.min.js

scss

• components/* - файлы для компонентов
• layouts/* - файлы для обвязки
• plugins/* - файлы для стилизации подключаемых плагинов
• _variables.scss - переменные для проекта
• _sprites.scss - файл с классами для спрайтов, генерится автоматически
• _mixins.scss - файл с миксинами scss
• _functions.scss - файл с функциями scss
• _base.scss - стили для стандартных элементов (параграфы, списки, таблицы etc)
• _controls.scss - стили для полей ввода, чекбоксов, etc. Здесь же стили для стилизации контролов, через плагины
• _forms.scss - стили для оформления непосредственно форм
• styles.scss, template_styles.scss - файлы, которые будут скомпилированы, в них подключаются все остальные файлы

sprites

Отдельные svg иконок, компилируются в общий файл images/sprites.svg, который подключается на страницу.
Подключение на страницу:

<svg class="icon icon-FILE_NAME"><use xlink:href="#icon-FILE_NAME"></svg>

или через pug-миксин

+icon-FILE_NAME('можно передать доп. класс')

В самих svg-файлах надо убрать всё лишнее (width, height, fill etc).

Чтобы изменить размер иконки надо изменить font-size. Ширина иконки равняется font-size 1:1, высота расчитывается пропорционально. Размеры меняются через наследование. Пример:

// исходная иконка
.icon.icon-example {
    font-size: 10px // width = 10px
}
// измененная иконка
.my-change .icon-example {
    font-size: 20px // width = 20px
}

upload

Временная графика для верстки (картинки товаров, галереи etc).

vendor

Подключение сторонних библиотек

• vendor.js - подключение js от плагинов
• vendor.css - подключение css от плагинов

История версий

4.0.0

Изменения:

• Сборщик переведен на модуль es6
• Добавлен imagemin

3.0.2

Изменения:

• форматирование файлов
• обновление пакетов
• удален imagemin (не смог заставить работать на актуальных версиях пакетов)

3.0.0

Изменения:

• структура изменена под размещение сборщика в корне сайта
• удален bower, установка плагинов перенесена на npm
• добавлен swiper
• мелкие исправления

2.1.0

Изменения:

• Добавлен gulp-babel

2.0.0

Изменения:

• gulp4
• удаление задачи для png-спрайтов
• вынесение сторонних плагинов из общих .js и .css файлов

1.0.0

Первая версия сборщика