Frontend light template

Простая сборка для небольших проектов

Основные технологии – CSS, JS, с помощью транспайлеров Babel и PostCSS используют многие современные возможности языков.

Используйте для:

1. Быстрого прототипирования интерфейсов

Добавляем html–файлы в корень проекта – их подхватывает Browsersync и перезагружает ваш браузер всегда когда обновились js, css, html и файлы в папке resources

2. Разработки в php окружении

Сборщик следит за обновлениями js, css и файлами в папке resources. Страницу придётся перезагружать вручную. Можно подумать и предложить как оптимизировать перезагрузку браузера.

Поддержка браузеров:

Последние версии браузеров Chrome, Opera, Firefox, Safari, Edge, а также Internet Explorer 11+

Старт проекта

Установи модули

npm i

или в разы в быстрее c yarn

yarn install

Команды для запуска

Запусти пример

gulp dev

Для быстрого прототипирования интерфейсов

gulp dev

Для разработки в php окружении

gulp

Сборка в папку build

gulp build

Собрать свг-спрайт

gulp svg-icons

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

├── build/                     # Сборка (автогенерация)
│   ├── css/                   # Стили
│   ├── js/                    # Скрипты
│   ├── resources/             # Подключаемые ресурсы
│   │   ├── fonts/             # Шрифты
│   │   ├── img/               # Изображения
├── gulp_tasks/                # Подключаемые скрипты с задачами для gulpfile.js
│   ├── old_tasks/             # Эту директорию можно использовать для тасков с предыдущего проекта
│   ├── build.js               # Сборка в папку build
│   ├── copy.js                # Копирование
│   ├── default.js             # Запуск разработки без с локального сервера
│   ├── dev.js                 # Запуск разработки вместе с локальным сервером
│   ├── img-optimize.js        # Оптимизация растровой графики
│   ├── lint.js                # Проверка форматировния JS-скриптов
│   ├── scripts.js             # Сборка ES2015 скриптов в Webpack
│   ├── serve.js               # Запуск локального сервера
│   ├── styles.js              # Сборка стилей
│   ├── svg-icons.js           # Сборка SVG иконок в один файл
│   ├── watch.js               # Отслеживание изменений и запуск задач
├── src/                       # Исходники
│   ├── css/                   # Стили
│       ├── blocks/            # Блоки
│       │   └── block.css      # Стили блока
│       ├── helpers/           # Помощники
│       │   ├── fonts.css      # Подключение шрифтов
│       │   ├── variables.css  # Переменные
│       └── index.css          # Главный стилевой файл
│   ├── js/                    # Скрипты
│       ├── api/               # Апи к бэкенду (может не использоваться)
│       ├── helpers/           # Помошники (могут быть любыми, в папке лежат примеры для использования)
│       └── index.js           # Главный скрипт
│   ├── icons/                 # SVG иконки для генерации векторного спрайта
│   ├── resources/             # Подключаемые ресурсы
│   │   ├── fonts/             # Шрифты
│   │   ├── img/               # Изображения
├── test/                      # Тесты
├── .babelrc                   # Конфигурация для компилятора Babel (используется с webpack.config.js)
├── .editorconfig              # Конфигурация настроек редактора кода
├── .eslintrc                  # Конфигурация форматирования JS
├── .gitignore                 # Список исключённых файлов из Git
├── gulpfile.js                # Файл для запуска Gulp.js
├── package.json               # Список модулей и прочей информации
├── readme.md                  # Документация шаблона
├── index.html                 # html файл для быстрого прототипирования интерфейса
└── webpack.config.js          # Конфигурация Webpack.js для JS