1. Модуль 1. Автоматизация, структура проекта.
1.1. 1. Task-runner
1.1.1. 2. Установка Gulp
1.1.1.1. 1.Скачивание с node.js.org это пакетный менеджер для работы с разнымы утилитами и для доступа команды NPM
1.1.1.2. 2.Скачать Gitbash.Для проверки установка nodejs забиваем в gitbash node -v и npm -v для пакетного менеджера.
1.1.1.3. 3.Заходим на сайт Gulpjs.com копируем npm и запустим в gitbash. На маке забиваем через sudo. Для проверки забиваем gulp -v.
1.1.2. 3. Настройка gulpfile.js
1.1.2.1. Создать папку для Gulp
1.1.2.2. 1.Создать внутри папки файл Package.json
1.1.2.3. 2.Внутри Package.json написать следушее
1.1.2.3.1. 1.{ "name": "gulp-web", "version": "1.0.0", "description": "project using gulp4", "author": "Dmitrijs Valaks",
1.1.2.4. 4.Создать в папке Gulp файл "gulpfile.js". Здесь будем прописовать все необхадимое модули.
1.1.2.4.1. 3.Нужно создать две переменные:"use strict"; const {src, dest} = require("gulp); const gulp = require("gulp);
1.1.2.5. 3.Теперь нужно установить Gulp вот так:
1.1.2.5.1. 2.Заходим в Gitbush Через папку который создали и забиваем эту команду:npm install --save-dev gulp После этого в папке должен появиться папки "node_modules" "package-lock.json
1.1.2.6. Устанавливаем Плагины для Gulp
1.1.2.6.1. npm i browser-sync --save-dev npm i del --save-dev npm i gulp --save-dev npm i gulp-autoprefixer --save-dev npm i gulp-cssbeautify --save-dev npm i gulp-cssnano --save-dev npm i gulp-imagemin --save-dev npm i gulp-plumber --save-dev npm i gulp-rename --save-dev npm i gulp-rigger --save-dev npm i gulp-sass --save-dev npm i gulp-strip-css-comments --save-dev npm i gulp-uglify --save-dev npm i panini --save-dev. После в файле package.json появиться все эти плагины. Теперь надо подключить эти плагины Gulpfile.js
1.1.2.6.2. Установка выглядеть так:const browsersync = require("browser-sync").create(); Остальные точно также. Только в browsersync поставим create();
1.1.3. 4. Удобная структура проекта
1.1.3.1. Удобная структура папок.
1.1.3.1.1. В папке gulp создадим папку под названием SRC.
1.1.3.1.2. Указываем откуда взять и куда скомпилировать.
1.1.4. 5. Создаем gulp таски
1.1.4.1. Создаем Gulp Таски
1.1.4.1.1. В файле Gulp.js прописываем эти команды:
1.1.5. 6. Работа с плагином panini
2. Модуль 2. БЭМ, SASS, Bootstrap 4
2.1. 1. БЭМ методология: Блок - Элемент - Модификатор.
2.1.1. 2. Процесс работы с проектом
2.1.2. 3. Работа с библиотеками
2.1.3. 4 Препроцессор SASS
2.1.4. 5. Модульная работа с Bootstrap4
2.1.5. 6. Как работать с @media