alexsoin/gulp-start-project

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 страницы, т.к. отдельные части страниц уже будут находиться в отдельных файлах.

alexsoin / gulp-start-project