Современный стартовый инструментарий для веб-разработки с использованием Gulp Task Runner и Webpack bundler.
Идеально подходит для быстрой сборки статических HTML сайтов или верстки.
Все задачи выполняются через Gulp. Webpack используется только для сборки Javascript (особенно для ES6 Import/Export, так как Gulp не может сделать это надлежащим образом).
Для создания окружения необходимо иметь следующие установленные инструменты:
- node.js
- npm
- git
- gulp
- webpack
Если у вас данных инструментов нет, то их необходимо установить.
Также рекомендуется вместо npm
использовать yarn
, синтаксис не особо отличается, но зато прирост в скорости установки пакетов ощутимо заметен.
Скачайте файлы с github или клонируйте его c помощью команды:
git clone https://github.com/alexsoin/gw-starter-kit.git
Для установки зависимостей проекта необходимо в командной строке ввести команды:
npm install
Если требуются дополнительные пакеты, то для их установки нужно выполнить команду:
- Установка пакета, при этом информация о нём, автоматически прописывается в секцию "devDependencies" файла "package.json" (такие пакеты как gulp-autoprefixer)
npm install название_пакета --save-dev
- Установка пакета, при этом информация о нём, автоматически прописывается в секцию "dependencies" файла "package.json" (такие пакеты как bootstrap)
npm install название_пакета --save-prod
- Переходим в клонированную директорию
- Удаляем папку
.git
- Редактируем файл
package.json
, меняем в нем параметрыname
,description
,author
иrepository.url
на свои значения.
Режим живого сервера
npm run watch
- сборка и запуск live-server в режиме developernpm run prodwatch
- сборка и запуск live-server в режиме production
Режим сборки
npm run build
- сборка проекта в режиме productionnpm run devbuild
- сборка проекта в режиме developer
Выборочная сборка:
gulp templates
- сборка html файловgulp styles
- сборка css стилейgulp scripts
- сборка js скриптовgulp fonts
- сборка шрифтовgulp images
- сборка картинокgulp clean
- очистка папки конечной сборки
Окружение, предназначенное для разработки фронтенд проекта, построено на базе следующих инструментов:
- Node.js (среды, в которой будет выполняться окружение);
- npm (пакетного менеджера, входящего в Node.js; будет использоваться для загрузки Gulp, плагинов и фронтенд пакетов);
- jQuery, Popover, Bootstrap (пакеты, которые будут использоваться для сборки css и js частей сайта);
- Gulp и его плагины (будут использоваться для сборки проекта и выполнения других веб задач).
- Webpack и его плагины (будут использоваться для сборки js скриптов).
В корне проекта расположены папки:
├── gulpfile.js # Конфигурация и задачи Gulpfile
├── package.json # Зависимости и скрипты Node.js
├── README.md # Описание проекта
├── dist # Директория выгрузки проекта
├── src # Для исходных файлов
│ ├── assets # Хранятся стили, скрипты и тд
│ │ ├── fonts # Для шрифтов
│ │ ├── img # Для изображений
│ │ ├── js # Для js-файлов
│ │ │ └── main.js # Вы можете создать любое количество js файлов в этом каталоге
│ │ └── style # Для scss стилей
│ │ ├── main.scss # Основной файл таблицы стилей
│ │ ├── _my.scss # Пользовательская таблица стилей
│ │ └── variables.scss # Переменные таблиц стилей
│ ├── data # Хранятся json файлы для вывода данных при разработке
│ │ ├── dev.json # json файл для вывода данных при develop разработке
│ │ ├── prod.jso # json файл для вывода данных при production разработке
│ │ └── site.jso # Общий json файл для вывода данных
│ └── views # Для фрагментов twig файлов
│ ├── index.twig # Вы можете создать любое количество страниц в этом каталоге
│ ├── layout # Хранятся шаблоны страницы
│ │ └── index.twig # Вы можете создать любое количество шаблонов в этом каталоге
│ └── partials # Хранятся части часто используемого кода на страницах
│ └── header.twig # header сайта
└── webpack.config.js # Настройки webpack
В директории js
распологаются два файла: main.js
и my.js
. Файл my.js
используется для написания своих скриптов, а
main.js
– для определения списка файлов, содержимое которых необходимо будет включить в итоговый js-файл. Под итоговым понимается файл, который должен получиться на выходе (в каталоге build
).
Директория style
отведена под стили. В данной директории находятся три файла: main.scss
(содержит список файлов, содержимое которых необходимо включить в итоговый файл стилей), my.scss
(используется для написания своих стилей) и variables.scss
(содержит SCSS переменные, с помощью которых будем изменять стили Bootstrap 4, а также использовать его для создания своих переменных).
Файл index.twig
- это главная страница создаваемого проекта. Кроме index.twig
в данную директорию можно поместить и другие twig файлы из которых будут созданы html страницы.
Директория layout
предназначена для помещения в неё шаблонов страниц.
Директория partials
предназначена для помещения в неё фрагментов страниц. Это позволит более просто создавать и редактировать html страницы, т.к. отдельные части страниц уже будут находиться в отдельных файлах.
В данной сборке используется шаблонизатор twig.