Unit 14. Готовим Gulp для проекта

Работа по шагам:

1. Установите Node.js - скачать. Не забывайте после установки перезагрузить компьютер.

2. Запустите консоль от имени администратора! В консоли наберите

npm install gulp -g

3. После окончания установки - перезагрузите компьютер.

Теперь действия будут отличаться. Возможны два варианта - первый, делать по видео - полный цикл установки. Второе - запуск на основе скачанного архива. Распишу оба, итак, вы делаете все по видео:

1. Создаете папку проекта и открываете данную папку в VSCode. Открываете терминал (ctrl+`). Также терминал можно открыть через View - Terminal.

Набираете:

npm init

нажимаете Enter и отвечаете на вопросы.

2. У вас появился package.json файл - изучите его.

3. Устанавливаем локально Gulp:

npm install --save-dev gulp

4. После этого у вас появится папка node_modules и package_lock.json.

5. Создаем папку build и оставляем пустой.

6. Создаем папку src и в ней папки css, images. Как по видео создаем index.html, style.css, закачиваем картинку. Наполняем index.html и style.css. Проверяем как они отображаются - обычно - двойным кликом по index.html.

7. Устанавливаем пакеты для gulp, в терминале выполняем команду:

npm install -D gulp-cssnano gulp-imagemin gulp-changed browser-sync gulp-clean

8. Копируем файл gulpfile.js в папку проекта.

9. Запускаем команду:

gulp

в терминале. В результате в папке build появятся файлы проекта, а css - будет в минимизированном виде.

10. Запускаем:

gulp watch

и начинаем вносить изменения в index.html, style.css в папке src. Изменения сразу должны отображаться в браузере.

Если вы решили не заморачиваться, а использовать готовый проект, то вам нужно сделать следующее:

1. Скачать и распаковать архив c сайта.

2. Открыть папку с проектом в VSCode. Открыть терминал (ctrl+`). Также терминал можно открыть через View - Terminal.

3. Выполнить команду:

npm init

4. Запускаем команду:

gulp

в терминале. В результате в папке build появятся файлы проекта, а css - будет в минимизированном виде.

5. Запускаем

gulp watch

и начинаем вносить изменения в index.html, style.css в папке src. Изменения сразу должны отображаться в браузере.

Домашнее задание

По этому юниту домашнего задания нет!

Следи за новостями курсов на нашем канале

Открыть

Правила оформления домашних заданий

Открыть

Форум по задачам

Forum