Frontend сборка web приложения

Данная сборка сконфигурирована для разработки фронтэнда на sass, typescript и pug. Собирается все с помощью gulp и webpack.

Установка

С помощью Git

git clone https://github.com/igorrybalko/frontend-skeleton.git

С помощью NPM

npm install frontend-skeleton

Или скачать с GitHub https://github.com/igorrybalko/frontend-skeleton

Из сторонних расширений frontend-skeleton включат в себя:

  • Bootstrap 4
  • jQuery
  • Slick-carousel

Из Bootstrap используются только стили.

Gulp содержит следующие команды:

  • styles - запускает компиляцию стилей
  • scripts - запускает компиляцию скриптов
  • views - запускает компиляцию разметки
  • watch - запускает отслеживание за изменениями файлов
  • default - запускат команду watch. Чтобы запустить команду default в консоли достаточно набрать комманду gulp без параметров

Если у вас установлен http-server, то можно запустить localhost:8081 командой

npm start

Основная структура

frontend-skeleton/
└── src/
    ├── images/
    │    ├── marker.png
    │    └── noimage.png
    ├── pug/
    │    ├── includes/
    │    │    ├── footer.pug
    │    │    ├── head.pug
    │    │    └── header.pug
    │    └── pages/
    │          └── index.pug
    ├── scss/
    │    ├── core/
    │    │    ├── common.scss
    │    │    ├── mixins.scss
    │    │    ├── user_text.scss
    │    │    └── vars.scss
    │    ├── modules/
    │    │    ├── footer.scss
    │    │    ├── header.scss
    │    │    └── homepage.scss
    │    └── main.scss
    └── ts
         ├── modules/
         │    ├── App.ts
         │    ├── AppHelper.ts
         │    └── JqPlugins.ts
         └── index.ts

После скачивания выполнить команду npm i, дабы установить все зависимости