envrt

ENVRT

Это пример рабочего окружения проекта Lexico. Установка этого пакета позволит вам сразу приступить к работе, не задумываясь о настройке рабочего окружения. Чтобы установить пакет просто введите в консоль:

npm install -g envrt

Это установит пакет глобально, после чего вы сможете применить его в нужной вам папке, выполнив команду:

envrt

Эта команда создаст необходимое рабочее окружения, с названием родительской папки. Перейдите в папку и установите все зависимости выполнив команду:

npm install

После установки всех пакетов можно приступать к работе, выполнив команду:

npm run gulp

Удачной разработки.

Для кого пакет?

Если вы собираетесь разрабатывать свой проект используя следующие технологии, тогда этот пакет сэкономить вам кучу времени.

• Если в разработке вы используете следующие технологии и Фреймворки:
  • NodeJS
  • Babel
  • Sass
  • Jade
  • SVG
• Если вы поддерживаете следующие версии браузеров:
  • IE 10+
  • Chrome 37+
  • Firefox 32+
  • Safari 6.1+
• Если вы добавляете SVG-иконки прямо в HTML.
• Если вы используете ES2015, ES2016, ES2017(async/await)
• Если вы используете Fetch вместо Ajax.

Тогда этот пакет для вас.

В ином случае придется изменять настройки проекта, что в принципе не запрещается.

Структура проекта

Разработка

Основной точкой входа в сборку проекта является gulp 4.0, в дополнение к нему, для сборки JavaScript выступает webpack 2.

Разработка большинства проектов состоит из трех этапов:

1. Frontend

• Backend
• Production

Каждый из этих этапов имеет свои особенности, которые имеют собственные различия. Например, при разработке фронт-энда вам нужно быстро просмотреть изменения в HTML или стилях. При разработке бэк-энда вам потребуется обновлять изменения на сервере. А уже на продакшине вы, возможно, захотите использовать минифицированые стили и сжатые картинки.

Lexico Environment покрывает все этапы разработки. Для этого в проекте созданы три отдельные задачи, которые выполняют необходимые условия для конкретного этапа. Просто выполните одну из команд:

• npm run front – для начала разработки.
• npm run back – для начала серверной разработки.
• npm run prod – для создания папок public и templates со сжатыми файлами проекта.

Что эти задачи делают?

Выполняя каждую задачу, вы запускаете определенный процесс. Давайте рассмотрим их:

Frontend

npm run gulp front делает:

• очищает папки public, templates, manifests после предыдущих запусков.
• компилирует sass с использованием автопрефексера и соурс-мапов
• сжимает SVG иконки и добавляет их в папку Jade
• компилирует Jade
• параллельно запускается сервер и webpack.

В этом случае будет скомпилирован файл index.jade, из папки build в папку public. Это сделано для того, чтобы сервер BrowserSync просто следил за изменениями в этой папке и перезагружал страницу браузера.

Backend

npm run gulp back делает все тоже, что и npm run gulp front, за небольшим исключением:

• Jade файлы компилируются и кладутся в папку templates
• параллельно запускается сервер nodemon и webpack

У внимательного читателя здесь может возникнуть следующий вопрос "зачем разделять практически идентичные задачи, когда можно сразу класть компилируемые файлы Jade в папку templates и запускать сервер?". Дело в том, что для обновления HTML или CSS поднимать еще один сервер (в дополнению к BrowserSync), совершенно не выгодно. Будет наблюдаться задержка между изменениями в коде и в браузере, а это только усложнит работу.

Эта задача создана с упором на работу в NodeJS. Но если при разработке вам потребуется добавить небольшие изменения в стили или JavaScript, то задача также справится и с этим.

Production

npm run gulp prod делает:

• очищает папки public, templates, manifests после предыдущих запусков.
• компилирует sass с использованием PostCSS и создает уникальное имя для файла стилей, которое кладет в файл-манифест
• сжимает SVG иконки и добавляет их в папку Jade
• сжимает картинки
• компилирует JavaScript и создает уникальное имя для файла скриптов, которое кладет в файл-манифест
• компилирует Jade, минифицирует, добавляет новые названия из манифестов и кладет все страницы в папку templates.

Эта задача самая интересная. Она как ракета готовая к запуску, которая может последовать судьбе Вояджера и отправится далеко за пределы солнечной системы, а может и просто сжимать джипег. В общем сюда можно еще прикрутить Докер, и отправлять контейнер на сервер, добавить интерактив в настройку и т.д.

Пакеты

Название пакета	Описание

Для заметок

Версия 0.0.1