Лабораторная работа 4

Репозиторий: https://hub.mos.ru/gorokhov-stepan/lab_4.git

Корень проекта

• **package.json** — зависимости (TypeScript, Sass, Less) и команды сборки.
• **tsconfig.json** — компилятор TypeScript с strict и noImplicitAny.
• **.gitignore** — что не попадает в репозиторий (см. раздел внизу).

Папка typescript/ — лаба TypeScript

• **index.ts** — весь код по пунктам 2–6 методички:
  • п.2 — класс User, интерфейс IUser;
  • п.3 — псевдоним типа UserAlias;
  • п.4 — перегрузка distance;
  • п.5 — бинарное дерево;
  • п.6 — паттерны Adapter, Strategy, Observer и примеры вызова.
• **index.html** — страница для проверки: подключает скомпилированный index.js, вывод в <pre> и в консоли (F12).

Пункт 1 (установка TS и компиляция в реальном времени) — через npm run watch:ts в корне проекта.

Папка scss-sass/ — лаба SCSS / SASS / Less

styles/

• **numbers.scss** — задание 2, синтаксис SCSS: цикл раскраски чисел rgb(n, 256-n, 0).
• **mockup.scss** — задание 3, синтаксис SCSS: макет (логотип, меню, блок «Характеристика», три колонки, футер), вложенные правила и миксины.
• **numbers.sass**, **mockup.sass** — задание 4: то же на синтаксисе SASS.
• **numbers.less**, **mockup.less** — задание 5: то же на синтаксисе Less.

scss/ — задания 2 и 3, страницы на SCSS

• **task2/index.html** — задание 2: список чисел 1–100.
• **task3/mockup.html** — задание 3: вёрстка по макету из методички.

sass/ — задание 4, те же страницы на SASS

• **task2/index-sass.html** — задание 2.
• **task3/mockup-sass.html** — задание 3.

less/ — задание 5, те же страницы на Less

• **task2/index-less.html** — задание 2.
• **task3/mockup-less.html** — задание 3.

dist/

Сюда после сборки попадают готовые .css (подключаются в HTML). В репозиторий не загружаются — см. ниже.

index.html

Перенаправление на scss/task2/index.html.

Пункт 1 SCSS (watch) — например npm run watch:scss или npm run watch:sass в корне.

Что не лежит в репозитории и что сделать после клонирования

В репозиторий не добавлены:

node_modules/, typescript/index.js, typescript/dist/, scss-sass/dist/

Поэтому после клонирования нужно выполнить:

npm install
npm run build

После этого можно открыть в браузере:

• typescript/index.html
• scss-sass/scss/task2/index.html и scss-sass/scss/task3/mockup.html
• для SASS: scss-sass/sass/task2/index-sass.html, scss-sass/sass/task3/mockup-sass.html
• для Less: scss-sass/less/task2/index-less.html, scss-sass/less/task3/mockup-less.html

Для разработки с автопересборкой: npm run watch:ts, npm run watch:scss, npm run watch:sass и т.д. (список в package.json).