Готовим Gulp для проекта (update 2022-01-06)

Материалы

Текст

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

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

1. Скачайте код урока.

2. Распакуйте архив. Откройте папку в VScode.

3. Наберите npm i

4. Наберите npm i -g gulp

Дождитесь установки компонентов. В ходе установки могут выскакивать WARN - это не является ошибкой.

5. Наберите в консоли команду gulp

Если вы работаете в Windows то скорее всего будет показано предупреждение о том, что "Выполнение сценариев в вашей системе отключено...". Чтобы исправить это - выполните действия ниже.

Разрешаем запуск gulp

Открываем терминал power shell от администратора.

Пишем и запускаем: Set-ExecutionPolicy RemoteSigned

На вопрос отвечаем: A (Да для всех) и нажимаем Enter.

5. Наберите в консоли команду gulp еще раз. Теперь у вас должна пройти компиляция и появиться папка build с содержимым.

6. Наберите gulp watch

На этом юнит выполнен. Убедитесь что при внесении изменений в html, css код, браузер отображает изменения ( после сохранения файла). Удобно настроить автосохранение в VSCode.

Возможные проблемы

Если вы работаете с Linux, MacOS - то команды могут потребовать sudo для запуска от имени администратора.

Если вы работаете с Linux, MacOS - то необходимо исправить Gulpfile

'css' errored after 105 ms
для устранения ошибки в файле gulpfile.js замените строку
function css() {
    const source = './src/css/style.css';
на
function css() {
    const source = './src/css/*';

Если вы знаете JavaScript и хотите сами настроить все - то можно использовать инструкцию ниже

Начнем с шага 2.

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