+7 (812) 703-02-02 info@hse.spbstu.ru

BEND-AVT. Автоматизация процессов веб-разработки

Длительность дисциплины: 28 ак.ч.


Аннотация

Данный курс предназначен для освоения слушателями основ автоматизации процессов разработки веб-приложений.

Автоматизация позволяет минимизировать временные затраты на выполнение стандартных задач процесса веб-разработки, позволяет создавать более универсальных код, который компилируется в один или несколько различных релизов.

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


Знания и умения, полученные в результате изучения

В результате обучения слушатели будут:

  • Знать:
    • принципы работы с системами контроля версий;
    • приемы работы с git в командной строке;
    • принципы работы с препроцессорами и постпроцессорами;
    • приемы управления автоматизацией часто выполняемых задач;
    • приемы разработки в режиме «непрерывной интеграции».
  • Уметь:
    • устанавливать git, npm, bower, gulp;
    • управлять задачами автоматизации;
    • создавать код на языке SassScript;
    • устанавливать модули npm;
    • работать с потоками автоматизации;
    • проектировать цепочку автоматизации рабочего процесса от исходного кода проекта до сборки релиза;
    • создавать условия изменения сборок при изменении критериев проекта.

Содержание дисциплины

Темы лекции

Тема 1

  • Технологический процесс разработки веб-приложения.
  • Системы контроля версий: централизованные и распределенные.
  • Работа с GIT. Основные консольные команды.
  • Просмотр изменений, графическое представление данных в консоли.
  • Создание репозитория. Работа с GitHub, GitLab, Bitbucket.
  • Работа в группе. Применение изменений. Работа с ветками.
  • Использование клиентов GitHub Desktop, SourceTree.
  • Работа с препроцессорами Less, Sass, Stylus.
  • Сравнительный анализ препроцессоров. Отличия синтаксиса.
  • Отличие SCSS и SASS.
  • Программы для компиляции Koala, CodeKit, Compass, Dreamweaver CC.
  • Вложенные правила, cсылка на родителя, вложенные свойства, шаблонные селекторы.
  • Основы SassScript. Переменные и область видимости.
  • Типы данных, операции, функции, интерполяция.

Тема 2

  • Управляющие директивы и выражения.
  • Работа с циклами в Sass.
  • Миксины.
  • Функции.
  • Работа с фреймворками. Bourbon.
  • Стили релиза скомпилированного документа. Работа с исходным кодом при тестировании проекта.
  • Работа с менеджерами пакетов bower, npm.
  • Системы сборки задач. Сравнение Gulp, Grunt и Webpack.
  • Установка и запуск задач. Gulp 4.
  • Потоки Vinyl-FS.
  • Часто используемые задачи. Расширения для автоматизации задач.
  • Организация gulpfile.
  • Стили, ресурсы, спрайты.
  • Инкрементальная сборка, watch.
  • Обработка ошибок.

Темы практики

Тема 1

  • Установка и запуск git.
  • Работа в консоли.
  • Создание локального и внешнего репозитория.
  • Управление коммитами и ветками проекта.

Тема 2

  • Установка компилятора для препроцессоров.
  • Сравнение less, sass и scss.
  • Основы SassScript.
  • Работа с переменными. Область видимости.
  • Типы данных, операции, функции.
  • Автоматизация стилевых описаний для фронтенд разработки.

Тема 3

  • Создание функций.
  • Работа с циклами и условиями.
  • Работа с фреймворком Bourbon.
  • Тестирование кода. Создание сборки для отладки разработчиком и формирование финального релиза.

Тема 4

  • Установка менеджеров пакетов.
  • Установка gulp и дополнительных модулей.
  • Проектирование задач автоматизации.
  • Создание файла gulpfile.js.
  • Итеративное улучшение потока задач, работа с pipe.
  • Инкрементальная сборка, watch.
  • Создание множественных сборок проекта с вариативными частями.
  • Публикация кода в репозитории. Потоковая загрузка файлов на конечный сервер.