Gulp start project - Окружение для разработки веб-проектов
Готовое окружение для разработки фронтенд части сайта.
Требования к окружению
Для создания окружения необходимо иметь следующие установленные инструменты:
- node.js
- npm
- git
- gulp
Если у вас данных инструментов нет, то их необходимо установить.
Установка
1. Клонирование
Скачайте файлы с github или клонируйте его c помощью команды:
git clone https://github.com/alexsoin/gulp-start-project.git
2. Установки зависимостей проекта
Для установки зависимостей проекта необходимо в командной строке ввести команды:
npm install
Если требуются дополнительные пакеты, то для их установки нужно выполнить команду:
- Установка пакета, при этом информация о нём, автоматически прописывается в секцию "devDependencies" файла "package.json" (такие пакеты как gulp-autoprefixer)
npm install название_пакета --save-dev
- Установка пакета, при этом информация о нём, автоматически прописывается в секцию "dependencies" файла "package.json" (такие пакеты как bootstrap)
npm install название_пакета --save-prod
Как использовать окружение
Обычный режим:
gulp
- сборка и запуск live-server
Выборочная сборка:
gulp css:build
- для сборки CSS файловgulp clean:build
- для очистки каталогаbuild
gulp html:build
- для сборки HTML файловgulp js:build
- для сборки JS файловgulp fonts:build
- для сборки шрифтовgulp image:build
- для сборки изображения
Список инструментов
Окружение, предназначенное для разработки фронтенд проекта, построено на базе следующих инструментов:
- Node.js (среды, в которой будет выполняться окружение);
- npm (пакетного менеджера, входящего в Node.js; будет использоваться для загрузки Gulp, плагинов и фронтенд пакетов);
- jQuery, Popover, Bootstrap (пакеты, которые будут использоваться для сборки css и js частей сайта);
- Gulp и его плагины (будут использоваться для сборки проекта и выполнения других веб задач).
Файловая структура Gulp проекта
Корневая директория
В корне проекта расположены папки:
src
(для исходных файлов) внутри расположены каталоги:fonts
(для шрифтов);img
(для исходных изображений);js
(для js-файлов);libs
(для сторонних библиотек);style
(для стилей);template
(для HTML фрагментов);- файл
index.html
.
build
(для готовых файлов; будет создана после первой сборки; в эту папку их будет помещать сборщик Gulp);
и файлы: gulpfile.js
, package.json
. Файл gulpfile.js
содержит задачи для сборщика проекта Gulp.
Директория js
В директории js
распологаются два файла: main.js
и my.js
. Файл my.js
используется для написания своих скриптов, а
main.js
– для определения списка файлов, содержимое которых необходимо будет включить в итоговый js-файл. Под итоговым понимается файл, который должен получиться на выходе (в каталоге build
).
Директория style
Директория style
отведена под стили. В данной директории находятся три файла: main.scss
(содержит список файлов, содержимое которых необходимо включить в итоговый файл стилей), my.scss
(используется для написания своих стилей) и variables.scss
(содержит SCSS переменные, с помощью которых будем изменять стили Bootstrap 4, а также использовать его для создания своих переменных).
Директория template и файл index.html
Файл index.html
- это главная страница создаваемого проекта. Кроме index.html
в данную директорию можно поместить и другие html страницы.
Директория template
предназначена для помещения в неё фрагментов HTML страниц. Например, в данной директории можно создать файлы head.html
и footer.html
, и импортировать их содержимое (используя синтаксис //= путь_к_файлу
) сразу в несколько страниц. Это позволит более просто создавать и редактировать html страницы, т.к. отдельные части страниц уже будут находиться в отдельных файлах.