| ======================================================== | |
| === Запуск скаченой темы в Jekyll и установка Gulp === | |
| ======================================================== | |
| Jekyll | |
| —— | |
| jb | |
| js | |
| Gulp | |
| —- | |
| g1 | |
| g2 | |
| g3 | |
| Описание установки | |
| ================== | |
1. Из папки проекта открываем командную строку cmd | |
| 2. Пишем команду для сборки проекта | |
| jb | |
| jekyll build | |
| 3. Появиться должны файлы в проекте _site и т.д | |
| 4. Проверим, посмотрим в браузере, через сервер | |
| js | |
| jekyll server | |
| ——————————————————— | |
| ——————————————————— | |
| ——————————————————— | |
| ====================================== | |
| === !!! Ставлю в проект Gulp !!! === | |
| ====================================== | |
| g1 | |
| g2 | |
| g3 | |
| Описание установки | |
| —————— | |
| В папке сайта инициализирую Gulp подтверждаю вопросы и в конце пишу yes | |
| g1 | |
| npm init | |
| ——————————— | |
| В папку сайта устанавливаю Gulp | |
| g2 | |
| npm i gulp —save-dev | |
| —————————————— | |
| В папу сайта устанавливаю плагины для Gulp | |
| g3 | |
| npm i —save-dev gulp-sass browser-sync gulp-concat gulp-uglifyjs gulp-clean-css gulp-rename node-bourbon gulp-notify gulp-autoprefixer gulp-sourcemaps | |
| ——————————————————————————————————————————————————- | |
| в корень проекта установим | |
gulpfile. js | |
| и заполним его | |
| ——————————————————————————————————————————————————- | |
| ——————————————————————————————————————————————————- | |
| ============================ | |
| === ПОДРОБНОЕ ОПИСАНИЕ === | |
| ============================ | |
Откроем терминал в папке проекта. | |
| Shift и открыть контекстное меню. | |
| В нем появится пункт «Открыть окно PowerShell сдесь»: | |
| Далее выполним инициализацию проекта в той папке, которую создали: | |
| — | |
| npm init | |
| Следуя инструкциям, заполним метаинформацию о нашем проекте: | |
| и в конце напишим | |
| yes | |
| В результате такой несложной первоначальной настройки | |
| нашего нового Gulp проекта в папке Проекта нарисуется новый файл | |
| — | |
package. json. | |
| ДАВАЙТЕ УСТАНОВИМ В НАШ ПРОЕКТ GULP: | |
| ———————————— | |
| npm i gulp —save-dev | |
| в корень проекта установим | |
| gulpfile.js | |
| и заполним его | |
| УСТАНОВИМ ПЛАГИНЫ GULP ДЛЯ ПРОЕКТА | |
| ———————————- | |
| можно подряд много вписать | |
| npm i —save-dev gulp-sass browser-sync gulp-concat gulp-uglifyjs gulp-clean-css gulp-rename node-bourbon gulp-notify gulp-autoprefixer gulp-sourcemaps | |
| или по одному установить | |
| npm i —save-dev gulp-sass | |
| npm i —save-dev browser-sync | |
| npm i —save-dev gulp-concat | |
и т. д | |
| ======================================================================================================== | |
Видео курс Верстка страниц с использованием Gulp
О курсе
Gulp – это специальный инструмент, таск менеджер, позволяющий автоматизировать и ускорить выполнение множества рутинных задач разработки, с которыми каждый день приходится сталкиваться при создании веб-сайта.
Данный курс поможет вам в теории и на практике изучить возможности применения Gulp, начиная от основ использования и базовых правил, заканчивая рассмотрением более сложных структур. Проходя уроки курса, вы шаг за шагом познакомитесь со всеми возможностями Gulp API. Вы пройдете через весь процесс создания страницы, от создания репозитория для хранения проекта, через создание gulpfile.
js для структуры проекта, подготовку макета сайта в Figma, обеспечение структуры страницы в html, добавление стилей к существующей странице и скриптов в проект, к итоговому результату — упаковке проекта и деплою на сервисе netlify.
По прохождению курса вы будете разбираться в основах работы тасков и их создании, а также узнаете возможности библиотек, которые работают с GulpJs. Если вы еще не знакомы с GulpJs, или хотите больше разобраться в работе тех или иных методов, то данный курс поможет вам в этом.
Читать дальше…
Этот курс входит в специальности:
Frontend Developer Верстальщик сайтов JavaScript Developer
Предварительные Требования
Для прохождения данного курса нужны базовые знания HTML, CSS и JavaScript.
Читать дальше…
Вы научитесь
- Понимать и уметь применять особенности Gulp в полном цикле разработки лендинга.
- Устанавливать Gulp, выполнять настройку рабочего окружения и создавать таски для проверки корректности установки и отсутствия ошибок.
- Понимать особенности 4-й версии Gulp, ее отличия от 3-й версии, понимать разновидности Gulp файлов и особенности Gulp API.
- Применять существующие для Gulp плагины, понимать особенности их подключения и настройки в тасках для разных задач. Использовать плагины для работы с HTML, с PUG, плагины для обработки JS и графики
Читать дальше…
Скачать материалы курса Для получения материалов курса нужно авторизоваться
Получить сертификат Для получения сертификата нужно авторизоваться
Сластен Максим
Front-End Developer
Другие курсы автора
- Длительность: 4 ч 9 м
- Курс создан: 09.02.2022
- Уроков: 5
- Обновлен: 09.02.2022
- Язык: русский
Что входит в курс
- 5 видео уроков
- Домашние задания
СМОТРЕТЬ
Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео
Войти Регистрация
№1
Установка Gulp.
Настройка рабочего окружения
0:23:16
Материалы урокаДомашние заданияТестирование
Цель урока — познакомиться с описанием курса, настроить рабочее окружение. Создать таск для Gulp для проверки корректности установки и отсутствия ошибок.
Читать дальше…
Свойства и возможности Gulp
0:53:50
Материалы урокаДомашние заданияТестирование
Цель урока — познакомиться с особенностями 4 версии Gulp, разновидностью Gulp файлов и Gulp API.
Читать дальше…
Подготовка gulpfile.js
1:06:58
Материалы урокаДомашние заданияТестирование
Цель урока – создать набор тасков для автоматизации задач. В уроке будет автоматизирована обработка html и шаблонизатора pug. Рассмотрены примеры автоматизации и обработки процессов и скриптов с помощью gulp плагинов.
Читать дальше…
Создание страницы
0:43:52
Материалы урокаДомашние заданияТестирование
Цель урока – на основе полученных в предыдущих уроках знаний собрать сборку тасков для создания веб страницы.
Подготовить репозиторий для хранения проекта и дальнейшей публикации страницы, познакомиться с инструментом Figma для работы с дизайном страницы и получения контента. Создать структуру файлов и папок для удобной разработки сайта.
Читать дальше…
Упаковка и деплой
1:02:02
Материалы урокаДомашние заданияТестирование
Цель урока – выполнить стилизацию проекта, добавить скрипты для работы компонентов и реализации дизайна. На основе созданных тасков модифицировать разметку для замены путей в финальном файле. Выполнить финальную минификацию перед коммитом и отправкой сайта на github. Реализовать деплой репозитория на сервис Netlify.
Читать дальше…
Следующий курс:
Видео курс JavaScript: Расширенные возможности — видео курсы ITVDN
ПОКАЗАТЬ ВСЕ
Регистрация через
✖или E-mail
Нажав на кнопку «Зарегистрироваться»,
Вы соглашаетесь с условиями использования.
Уже есть аккаунт
Получите курс бесплатно
✖Вы выбрали курс для изучения
«»
Чтобы получить доступ к курсу, зарегистрируйтесь на сайте.
РЕГИСТРАЦИЯ
Спасибо за регистрацию
✖Перейдите на почту и подтвердите Ваш аккаунт,
чтобы получить доступ ко всем
бесплатным урокам и вебинарам на сайте ITVDN.com
ПОДТВЕРДИТЬ ПОЧТУ НАЧАТЬ ОБУЧЕНИЕ
Спасибо за регистрацию
✖Ваш аккаунт успешно подтвержден.
Начать обучение вы можете через Личный кабинет
пользователя или непосредственно на странице курса.
НАЧАТЬ ОБУЧЕНИЕ
Подтверждение аккаунта
На Ваш номер телефона было отправлено смс с кодом активации аккаунта. Пожалуйста, введите код в поле ввода.
Отправить код еще раз
Изменить номер телефона
Ошибка
✖нпм — Как установить gulp 4
спросил
Изменено 2 года, 6 месяцев назад
Просмотрено 62к раз
Я использую gulp-watch.
Текущая версия gulp-watch использует вызов gulp.parrallel. Этот вызов доступен только из gulp 4.
Однако gulp 4 недоступен в репозитории npm. npm info gulp dist-tags возвращает: {последняя: '3.9.0'} .
Я вижу, что в репозитории git есть ветка 4.0. Но попытка установить его с вариациями этой команды не удалась: npm install https://github.com/gulpjs/gulp#v4.0.0 .
- нпм
- глоток
- глоток-часы
1
# Удалите предыдущую установку Gulp и связанные с ней пакеты, если таковые имеются $ npm rm gulp -g $ npm rm gulp-cli -g $ cd [ваш-проект-каталог/] $ npm rm gulp --save-dev $ npm rm gulp --save $ npm rm gulp --save-необязательно $ npm cache clean # для npm < v5 # Установите последние инструменты Gulp CLI по всему миру $ npm установить gulpjs/gulp-cli -g # Установите Gulp 4 в свой проект как зависимость от разработчиков $ npm установить глоток --save-dev # Проверьте установленные версии.
Убедитесь, что ваши версии не ниже, чем показано.
$ глоток -v
---
[10:48:35] CLI версии 2.0.1
[10:48:35] Локальная версия 4.0.0
Подробная информация находится на этой странице блога: https://demisx.github.io/gulp4/2015/01/15/install-gulp4.html
8
Gulp удалил ветку 4.0 из своего репозитория GitHub, поэтому предыдущий способ установки с использованием npm install gulpjs/gulp.git#4.0 --save-dev больше не работает.
Они заявляют в своем README, что правильный способ установить gulp 4.0 — запустить команду:
npm install gulp@next
3
npm установить gulpjs/gulp.git#4.0 --save-dev
3
Выполните следующую команду, чтобы проверить версию gulp cli, установленную на вашем компьютере.
глоток -v
Если вы не используете версию 4, выполните следующие действия, чтобы глобально установить gulp на свой компьютер.
npm удалить -g gulp npm install -g "gulpjs/gulp#4.0"
Теперь установите gulp 4 локально
npm uninstall gulp --save-dev npm установить "gulpjs/gulp#4.0" --save-dev
1
ноябрь 2018 г. » npm аудит говорит запустить: npm install --save-dev [email protected]
для установки gulp-4, CLI версия должна быть 1.2.2 которая будет поддерживать gulp 4.0
для установки gulp-cli 1.2.2 запустить sudo npm install [email protected] -g 9[0014
и для установки gulp 4.0 запустите npm install 'gulpjs/gulp.git # 4.0' --save-dev
при запуске gulp -v command
120 вы должны получить :38:36] CLI версии 1.2.2
[11:38:36] Локальная версия 4.0.0-alpha.2
аналогичная проблема на GitHub
0
Моя установка была немного другой.
Работает
npm install 'gulpjs/gulp.git#4.0' --save-dev
Или
npm установить 'gulpjs/gulp # 4.0' --save-dev
Выдал мне ошибку:
н/мин ОШИБКА! код EINVALIDTAGNAME npm ОШИБКА! Недопустимое имя тега "gulp#4.0": Теги не может иметь никаких символов, которые кодирует encodeURIComponent.
NB У меня были проблемы только с установкой моего локального gulp-4, поэтому я взглянул на свою последнюю установку package.json и увидел это:
"глоток": "github:gulpjs/gulp#4.0",
Итак, я решил установить локальный gulp с помощью
npm install "github:gulpjs/gulp#4.0" --save-dev
и это сработало, локальная установка gulp 4 прошла успешно.
[15:45:55] CLI версии 1.4.0 [15:45:55] Локальная версия 4.0.0-альфа.2
По состоянию на 28 декабря 2018 г. следующая команда должна отлично работать при локальной установке версии 4.
н/мин i-D глоток
Я написал пакетный файл , который выполняет свою работу на основе ответа @demisx.
Проблема, с которой я столкнулся, заключалась в отсутствующем параметре конфигурации npm «префикс», поэтому моим глобальным каталогом был двоичный каталог узла. Я почти уверен, что так было не всегда, но я мог (повторно) запустить этот скрипт из корневого каталога проекта:
@ECHO OFF эхо настройка npm set USERNAME=<введите имя пользователя> установить USERPROFILE=C:\Users\%USERNAME% установить APPDATA=%USERPROFILE%\AppData\Roaming вызов конфигурации npm, установка префикса %APPDATA%\npm SET DIR_PROJECT="D:/stuff/plugins/wallpaper_engine/raintime-dev" echo Удалите предыдущую установку Gulp и связанные с ней пакеты, если таковые имеются вызов npm rm gulp -g вызов npm rm gulp-cli -g эхо компакт-диск %DIR_PROJECT% компакт-диск /D %DIR_PROJECT% вызвать npm rm gulp --save-dev вызвать npm rm gulp --save вызвать npm rm gulp --save-необязательно вызвать очистку кэша npm echo Установите новейшие инструменты командной строки Gulp по всему миру вызвать npm установить gulpjs/gulp-cli -g echo Установите Gulp 4 в свой проект из ветки 4.
0 GitHub как зависимость от разработчиков
rem вызов npm установить gulpjs/gulp # 4.0 --save-dev
вызвать npm установить gulpjs/gulp --save-dev
echo Проверьте установленные версии.
вызвать глоток -v
Пауза
В итоге скрипт показал это:
[14:59:48] CLI версии 2.0.1 [14:59:48] Локальная версия 4.0.0
Надеюсь, это поможет!
Я решил эту проблему, запустив:
which gulp
РМ -РФ /USR/локальные/бен/глоток
нпм i -g gulp
Windows по-прежнему не обновляется. Приведенные ниже команды из другого поста Linux, похоже, очистили его, а затем и успех.
Не удается обновить gulp до 4.0 с 3.9
Удалите предыдущую установку Gulp и связанные с ней пакеты, если таковые имеются:
$ npm rm gulp -g $ npm rm gulp-cli -g $ cd [ваш-проект-каталог/] $ npm rm gulp --save-dev $ npm rm gulp --save $ npm rm gulp --save-необязательно
0
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Учебник: Node 12 LTS + Gulp 4 + VS2019| Тристрам Толлидей
Как срывать пластырь.
Больно, но стоит потери волос.Это руководство проведет вас через обновление вашего проекта до использования последних версий Node, Gulp и Visual Studio 2019. Я буду говорить о них вместе, так как это распространенный рецепт, и после нескольких часов кровавого пота и поиски в stackoverflow/gitrepo, вы можете узнать из моей боли.
Следуя этому руководству, вы сможете запустить свой проект в Task Runner Explorer в Visual Studio 2019.. Пойдем.
Предупреждение. Если вы находитесь в середине спринта, возможно, сейчас не время для обновления. вам понадобится хороший час, чтобы убедиться, что все работает гладко, и у вас есть время, чтобы исправить ошибку
Ура Ура, с недавним объявлением NodeJs о выходе Node 12 из LTS, стоит вернуться к устаревшим проектам. По сути, долгосрочная поддержка означает, что эта версия Node будет получать исправления ошибок и исправления безопасности в течение длительного времени. В случае v12 будет безопасно использовать до апреля 2022 года , что означает, что обновление до него будет все, что вам нужно сделать еще 2 с небольшим года.
Если вы запускаете свои проекты на узле 10, вам хватит еще на год, поэтому не спешите обновляться, особенно если вы используете старые пакеты, подверженные конфликтам.
Однако, если вы используете Node 8 или ниже 😬, вам придется обновиться до Нового года 2019, чтобы обеспечить безопасность вашего проекта.
Узел 13 тоже отсутствует. Почему бы не обновить это вместо этого?
Нечетное количество версий Node — это экспериментальные ветки, которые не будут получать долгосрочную поддержку. Если вы хотите поэкспериментировать с последними предложениями Node, во что бы то ни стало запустите свой проект на Node 13 (хотя обязательно рассмотрите nvm). Если вы запускаете производственный проект для клиента или бизнеса, придерживайтесь выпусков LTS.
Установка узла 12
Выберите вариант установки:
A) Стандартная установка (без nvm) просто загрузите и установите
B) установка nvm при условии, что вы уже используете nvm (инструкции по установке в ссылке, если нет), добавление узла 12 по-прежнему является простым процессом:
доступен список nvmдоступен полный список выпусков
в строке долгосрочной поддержки , помните последнюю версию 12, поэтому в приведенном выше примере это 12.
13.0
nvm install 12.13.0
// сделайте себе cuppanvm use 12.13.0
🎉 Теперь вы гордый пользователь узла .JS 12 экземпляров 🎉 9 ReferenceError: primordials не определен Gulp 3 имеет зависимости, с которыми Node 12 не может справиться. Итак, следующий шаг — обновить gulp до версии 4, последней и лучшей версии Gulp. Последний и лучший, но нужно немного повозиться Итак, откройте ваш Если вы хотите использовать Gulp 4 с проводником диспетчера задач в Visual Studio 2019, вам также потребуется установить его глобально с Как только мы закончим с этим, нам нужно обновить наши зависимости gulp, это совсем другая игра. У каждой зависимости есть свой собственный ад, но быстрая проверка межсетевых сетей поможет вам с вашими конкретными модулями. Однако… вот два, которые доставили мне наибольшее огорчение: Какими бы замечательными ни были SASS и Gulp, я не могу вспомнить ни одной новой установки gulp-sass/node-sass, которая прошла бы гладко. Сохраняйте хладнокровие во время этого процесса, в конце концов вы его запустите. Лучший совет, который я могу дать: 1. Уничтожьте каталог node_modules. Удалить, удалить, стереть. Если его след существует, он будет преследовать вас и потерпит неудачу. 2. Замените новой версией в вашем 3. Если вы по-прежнему получаете сообщения об ошибках, убедитесь, что вы запускаете gulp из консоли с правами администратора. 4. Внимательно прочитайте ошибки, они могут выглядеть как битая стена текста, но там будет подсказка, чего не хватает в сообщении. Это немного странная зависимость, и она действительно применима только к проектам, использующим специальные платформы, такие как .NET, поэтому большинство людей могут ее пропустить. Однако, если вы используете Со всем, что добавлено в ваш package.json, вы сможете запустить Учитывая приведенный выше совет, вы должны быть в хорошей форме, базовая миграция не слишком сложна, поскольку это скорее изменение синтаксиса, чем полное переписывание. Это немного более подробно, но в целом выглядит аккуратнее и современнее. В Gulp 4 есть отличная документация по этому процессу и различным способам, которыми вы можете сообщить Gulp, когда ваша задача выполнена. Если все хорошо, теперь вы сможете открыть Visual Studio 2019 и увидеть, как работает средство запуска задач: Иногда самые неблагодарные задачи являются самыми трудными, но с точки зрения ремонтопригодности, безопасности и прогресса они приносят наибольшее удовлетворение. Теперь идите вперед, товарищ Node 12er… и создавайте инновационные вещи. Если у вас есть уязвимости, исправление аудита Чтобы Task Runner Explorer работал с Gulp, необходимо правильно настроить несколько вещей: Это вызвано тем, что VS2019 не находит новый узел, поэтому вам нужно добавить его путь непосредственно в VS. Gulp 4 — Dependency Hell
package.json для вашего проекта и замените текущий gulp ( 3.x.x ) на последний стабильный выпуск gulp, на момент написания его 94.0.2 npm install [email protected] -g Если вы этого не сделаете эта Visual Studio 2019 не сможет обнаружить gulp и не покажет задачи как доступные.
package.json 94.0.2 , что удобно совпадает с версией Gulp, которую вы используете, и я предполагаю, что она связана с ней.
gulp-msbuild
gulp-msbuild У меня есть один простой совет: удалите его и замените на msbuild . Это гораздо более удачный и чистый пакет, в нем больше смысла, и, кажется, он реже выходит из строя. npm install . Если все прошло успешно, у вас не должно быть ошибок и, что еще лучше, у вас не должно быть уязвимостей.
Если у вас возникают проблемы с определенным плагином gulp, обычно вам нужно заменить его более современным плагином gulp. gulp-util устарел в пользу отдельных плагинов, поэтому просто следите за консолью, когда запускаете gulp, и она подскажет, что нужно исправить. Пример обновления
Уязвимости пакетов npm
npm должно устранить подавляющее большинство из них.
Все остальное, что уязвимо, потребует ручной настройки, обычно обновления пакетов или замены их более современными эквивалентами. Вы можете найти эти неправильные пакеты с npm аудит , а затем отслеживание проблемных пакетов. Visual Studio 2019 Task Runner Explorer
Visual Studio 2019 по-прежнему считает, что использует более старую версию узла gulpfile.js в корне вашего проекта . package.json с зависимостями или devDependencies package.json ) package.json , консоль вывода сообщит вам, что не так. Опять же, это может выглядеть как стена текста, но там будут подсказки к тому, чего не хватает.