Gulp+React

Сборка Новой Эпохи

Современная сборка на Gulp 4.0

Для работы сборки у вас должны быть глобально установлены npm (last version), node.js, gulp-cli.

Поддерживается IE10+.

Особенности сборки

• React
• PUG
• SASS(SCSS)
• JS (Babel, Webpack, uglify)
• Минификация изображений
• Спрайты PNG (вставляем миксином SCSS)
• Спрайты SVG (вставляем миксином PUG)
• Обработка SVG

В сборке 2 глобальных таска - gulp --dev и gulp --prod. Главным образом, в первом нет минификации всего и вся и есть sourcemaps.

Запуск

1. npm install / yarn install
2. gulp

Команды

• gulp --dev - полная сборка проекта в рабочем режиме + сервер
• gulp --prod - сборка на продакшен, без сервера
• gulp lenta - собрать архив для Ленты
• gulp add-module --name some_name - добавить модуль
• gulp add-section --name some_name - добавить секцию

Документация по таскам

Общий принцип сборки: у нас есть корневой gulpfile.js, в котором подключаются плагины. Затем через цикл в него добавляются наши таски, список которых находится в tasks.js, а также объект с путями paths.js. Все это находится в объекте p с глобальной областью видимости.

Далее запускаются два таска - build, который просто прогоняет все основные задачи, собирая проект, и server, параллельно запускающий watch для наблюдения за изменением файлов и reload для моментальной перезагрузки страницы с помощью плагина browserSync.

JavaScript

JavaScript собирается с помощью Webpack, все настройки внутри таска js. Важно заметить, что JS файлы, которые создаются в компонентах командой add-module никуда автоматически НЕ СОБИРАЮТСЯ. JS файлы нужно подключать ручками в static/index.js командой import и вызывать ниже по коду. Там уже есть примеры. Желательно также при вызове функции оставлять коммент, что в ней происходит.

import header from '../../components/common/header/header';

// Код для бургер-меню
header()

Еще раз - если JS не работает это значит, что нужный файл не подключен/не вызыван.

React

Добавлен React.

Если есть желание запустить React на проекте:

1. Устанавливаем пакеты npm i react react-dom --save-dev;
2. Создаем обычный пустой компонент с файлом PUG, в котором создаем элемент с ID root;
3. В него подключаем установленные пакеты React и ReactDOM http://prntscr.com/mkndue ;
4. В папке ReactComponents создаем обычные React-модули со стандартной начинкой, какие вам нравятся.
5. Подключаем нужный React-модуль в наш компонент родитель, как показано на скриншоте выше. Аналог стандартного App.js. Это наша точка входа.
6. Все. Удачи!

Примечание! Стили используются как обычно и пути до картинок прописываются как обычно, кроме JS-файлов ничего никуда импортировать не нужно.

PNG-Sprite

Спрайт подключается SCSS миксином из генерируемого файла _png-sprite.

SVG-Sprite

Спрайт подключается PUG миксином из копонента svg-sprite. И добавляется на страницу в шаблоне src/pages/template/_layout.pug, нужно разкоммитить строчку с подключением.

SASS (SCSS)

• Пакет normalize.scss подключается и вызыватся в src/static/sass/_base.scss.
• Переменные находятся в src/static/sass/_variables.scss, там можно настроить такие вещи, как шрифт, его размер, параметры медиа-запросов и т.д.
• Глобальные стили (свой reset.css) находятся в src/static/sass/_global.scss, желательно настроить под проект.
• Стили для конкретного проекта в соответствии с его UI-китом находятся в src/static/sass/_ui.scss.

Add-Module

Добавляем компоненты одной командой gulp add-module --name YourModuleName.

FTP

Выпилено из сборки

Lenta

Таск для сборки готового архива для ленты. Прописываем в paths.js:

    folderName: "21082108__raif", // Имя директории с файлами - акутальная дата, два нижних подчеркивание и название проекта
    ZIPName: "raiffeisen", // полное название проекта
    ZIPCount: "01", // какой это архив по счету (каждый раз увеличиваем на один)

Спасибо за ознакомление!