Готовый шаблон для всех проектов с сборщиком GULP
Необходимые пакеты на ПК: Node.js - https://nodejs.org/en/
Быстрый старт:
- Клонируем этот репозиторий
- В терминале вводим команду npm i
- После установки вводим команду gulp
ВНИМАНИЕ Все файлы в html подключаются по пути от папки build. Папка src — рабочая область.
Сборка нового проекта завершена.
Существующие команды:
gulp build: собирает все файлы проекта в папку билд сжимает их. Без оптимизации изображений!
gulp clean: удаляет папку build.
gulp webserver: запускает вебсервер с livereload.
gulp buildSass: билдит .css в папку нашей работы области в 1 файл в несжатом виде.
gulp buildCss: билдит .css в сжатом виде в папку build/css и выполняет buildSass.
gulp buildJs: сжимает и минифицирует .js файлы и билдит их в 1 файл в папку build/js.
gulp vendors: перемещает содержимое папки vendors (папка для файлов плагинов) в исходном состоянии в папку build/vendors.
gulp img: перемещает изображения в папку build/img. Без оптимизации!
gulp imgmin: оптимизирует изображения и закидывает их в build/img.
gulp buildFonts: перемещает шрифты в build/fonts.
gulp buildHtml: выполняет импорты .html в .html, очищает кэш всех подключенных css и js-файлов, перемещает все собранные .html файлы в папку build.
gulp deploy: заливает build на сервер (при наличии файла deploy.json).
gulp dest: перемещает все остальные папки, содержащиеся в src в build.
Но используем только следующие две команды:
gulp: Используем при разработке. Выполняет все вышеперечисленные команды за исключением gulp clean, gulp imgmin и gulp deploy.
gulp prod: Используем для перед началом посадки на CMS или для деплоя на сервер. Выполняет все вышеперечисленные команды, но в отличие от команды gulp, выполняет оптимизацию изображений и заливает файлы на сервер.
Чтобы собранный билд деплоился на сервер:
- Убедиться, что сайт ещё не посажен.
- Убедиться, что сайт на Beget создан.
- Создать в корневой папке (рядом с gulpfile.js) файл deploy.json.
- Написать в нём:
{
"host": "АДРЕС_САЙТА_НА_BEGET",
"user": "ИМЯ_ПОЛЬЗОВАТЕЛЯ_BEGET",
"password": "ПАРОЛЬ_ОТ_BEGET"
}
- Выполнить команду gulp prod.
Чтобы использовать импорт html-компонентов:
- Создать в папке components ваш компонент (например, footer.html) с вёрсткой.
- В файле, куда нужно вставить ваш компонент в нужном месте прописать @import "ИМЯ_ФАЙЛА.html". Например @import "footer.html".