/gulp-start-project

Готовое окружение для разработки фронтенд части сайта.

Primary LanguageJavaScript

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