18.05.2025
Последние:

Мой клан: моды, читы, скины, текстуры, карты

Самые крутые подборки для улетного геймплея: читы, моды, текстуры, карты, скины.

Windows 

как установить gulp на windows 10

admin 0 Comments

Установка node + gulp для Windows 10

как установить gulp на windows 10. js set node gulp. как установить gulp на windows 10 фото. как установить gulp на windows 10-js set node gulp. картинка как установить gulp на windows 10. картинка js set node gulp. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Установка node js

Скачиваем на сайте nodejs.org стабильную версию Node, рекомендованную для большинства пользователей. Система автоматически определит вашу операционную систему и выдаст подходящую ссылку на скачивание.

как установить gulp на windows 10. js set node gulp 01. как установить gulp на windows 10 фото. как установить gulp на windows 10-js set node gulp 01. картинка как установить gulp на windows 10. картинка js set node gulp 01. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

После скачивания запускаем установщик и делаем все, как на скриншотах.

как установить gulp на windows 10. js set node gulp 02. как установить gulp на windows 10 фото. как установить gulp на windows 10-js set node gulp 02. картинка как установить gulp на windows 10. картинка js set node gulp 02. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

как установить gulp на windows 10. js set node gulp 03. как установить gulp на windows 10 фото. как установить gulp на windows 10-js set node gulp 03. картинка как установить gulp на windows 10. картинка js set node gulp 03. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

как установить gulp на windows 10. js set node gulp 04. как установить gulp на windows 10 фото. как установить gulp на windows 10-js set node gulp 04. картинка как установить gulp на windows 10. картинка js set node gulp 04. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Когда установщик закончит свою работу, откроется консоль и вы увидите следующее.

как установить gulp на windows 10. js set node gulp 05. как установить gulp на windows 10 фото. как установить gulp на windows 10-js set node gulp 05. картинка как установить gulp на windows 10. картинка js set node gulp 05. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Как запустить консоль Windows 10 PowerShell

Работа на платформе node js ведется через npm команды, вводимые в консоль. У Windows 10 имеется встроенная консоль PowerShell, чтобы консоль запустилась, нужно зайти в папку проекта и зажав сочетание клавиш CTRL+SHIFT, выбрать из контекстного меню «Открыть окно PowerShell здесь».

как установить gulp на windows 10. js set node gulp 06. как установить gulp на windows 10 фото. как установить gulp на windows 10-js set node gulp 06. картинка как установить gulp на windows 10. картинка js set node gulp 06. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

как установить gulp на windows 10. js set node gulp 07. как установить gulp на windows 10 фото. как установить gulp на windows 10-js set node gulp 07. картинка как установить gulp на windows 10. картинка js set node gulp 07. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Узнать версию node js

Установка Gulp под Windows 10

как установить gulp на windows 10. js set node gulp 08. как установить gulp на windows 10 фото. как установить gulp на windows 10-js set node gulp 08. картинка как установить gulp на windows 10. картинка js set node gulp 08. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Ошибка при установки Gulp

Система нам говорит (смотрим сообщение в консоли), что невозможно загрузить файл (gulp.ps1 cannot be loaded because running scripts is disabled) и предлагает почитать статью на сайте Microsoft о Политиках исполнения. Из статьи становится понятно, что политика выполнения PowerShell практикуется только на платформах Windows. Блокируется запуск скриптов с расширением .ps1. Что делать в таком случае? Меняем дефолтные настройки Windows через командную строку PowerShell.

Существенное дополнение

Если вы пишите код в редакторе VS Code, то вам вообще не нужна никакая консоль. У редактора имеется встроенный терминал, как раз для ввода различных команд. Больше не надо переключаться между отдельными вкладками, когда все в одном месте.

как установить gulp на windows 10. date article. как установить gulp на windows 10 фото. как установить gulp на windows 10-date article. картинка как установить gulp на windows 10. картинка date article. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Всем привет, друзья! Сегодня мы подробно рассмотрим, что такое Gulp и как с его помощью можно автоматизировать работу Front-end разработчика. В результате урока мы соберем серьезное и внушительное рабочее Front-end окружение для веб-разработки с использованием Gulp.

как установить gulp на windows 10. gulp beginners cover. как установить gulp на windows 10 фото. как установить gulp на windows 10-gulp beginners cover. картинка как установить gulp на windows 10. картинка gulp beginners cover. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

как установить gulp на windows 10. image j. как установить gulp на windows 10 фото. как установить gulp на windows 10-image j. картинка как установить gulp на windows 10. картинка image j. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Основные ресурсы урока:

С примером урока вы можете ознакомиться на GitHub: agragregra/gulp-lesson

Установка Gulp

Внимание! Если вы пользователь последней версии Windows, рекомендую использовать WSL для веб-разработки. Скачивать инсталлятор с сайта Nodejs.org в этом случае не нужно. Воспользуйтесь этим руководством: Использование подсистемы Linux для веб-разработки в Windows.

Если у вас возникли проблемы при прохождении урока с использованием Gulp 4, рекомендую откатиться на 3 версию, пройти полностью урок и только после этого обновить package.json до 4 версии. Для лучшего понимания. Откатить версию можно в файле package.json. Вместо «gulp»: «^4.x.x», напишите версию «^3.9.1», удалите папку «node_modules» и установите пакеты заново «npm i«.

После того, как Node установлен, можно приступать к установке Gulp. Откройте терминал (правая кнопка мыши в папке с зажатым Shift > Откройте здесь оболочку Linux) и выполните следующую команду:

Создание проекта Gulp

Давайте создадим папку проекта для примера, с которой будем работать, пусть это будет, например, папка myproject.

Очень важно! Не создавайте русскоязычные папки проектов и следите за тем, чтобы путь до папки проекта не содержал кириллических символов, то-есть не был написан на русском языке. В противном случае, у вас могут возникнуть проблемы при работе различных утилит Gulp. Папка вашего пользователя также не должна быть русскоязычной. Все только латинскими буквами.

Теперь откроем терминал в папке проекта. Для пользователей Windows достаточно зажать Shift и открыть контекстное меню. В нем появится пункт «Откройте здесь оболочку Linux». Оболочка Linux должна быть предварительно установлена, см урок: Использование подсистемы Linux для веб-разработки в Windows.

Далее выполним инициализацию проекта в той папке, которую создали:

Следуя инструкциям, заполним метаинформацию о нашем проекте:

Назовем проект «MyProject»

как установить gulp на windows 10. 3. как установить gulp на windows 10 фото. как установить gulp на windows 10-3. картинка как установить gulp на windows 10. картинка 3. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

как установить gulp на windows 10. 4. как установить gulp на windows 10 фото. как установить gulp на windows 10-4. картинка как установить gulp на windows 10. картинка 4. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Имя автора можно и указать 🙂

как установить gulp на windows 10. 6. как установить gulp на windows 10 фото. как установить gulp на windows 10-6. картинка как установить gulp на windows 10. картинка 6. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

license оставляем по умолчанию и вводим yes:

как установить gulp на windows 10. 7. как установить gulp на windows 10 фото. как установить gulp на windows 10-7. картинка как установить gulp на windows 10. картинка 7. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

В результате такой несложной первоначальной настройки нашего нового Gulp проекта в папке myproject нарисуется новый файл package.json.

как установить gulp на windows 10. 8. как установить gulp на windows 10 фото. как установить gulp на windows 10-8. картинка как установить gulp на windows 10. картинка 8. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Файл package.json является файлом манифеста нашего проекта, который описывает помимо той информации, что мы внесли в терминале, еще и информацию об используемых пакетах в нашем проекте.

Например, если мы установим в проект Gulp с ключом —save-dev, то пакет и используемая версия автоматически добавится в наш package.json. Такой учет позволит быстро разворачивать новый проект с использованием уже имеющегося package.json и устанавливать необходимые модули с зависимостями, которые прописаны в package.json в новых проектах.

Давайте установим в наш проект Gulp:

как установить gulp на windows 10. 9. как установить gulp на windows 10 фото. как установить gulp на windows 10-9. картинка как установить gulp на windows 10. картинка 9. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Кроме того, у нас появляется папка node_modules, которая теперь содержит установленный пакет gulp и необходимые зависимости. В данную папку автоматически будут сваливаться все модули и зависимости, которые мы будем устанавливать в проект. Папок с зависимостями может быть очень много, не смотря на то, что мы установили не так уж и много пакетов. Это связано с тем, что в дополнение к основным пакетам устанавливаются программы, необходимые для корректной работы основного пакета. Ни чего чистить и удалять из папки node_modules не нужно. Кроме того, у вас может появиться дополнительный файл package-lock.json. В этом нет ничего страшного, это служебный файл, на который можно просто не обращать внимания.

Структура каталогов в проектах

Работая с различными плагинами, программами и скриптами, будь то jQuery плагин, модуль для CMS, веб-проект или какое-то другое ПО, вы наверняка замечали, что у всех проектов есть схожая структура каталогов, например, большинство проектов имеет папку dist и app. Давайте создадим первоначальную структуру нашего учебного проекта. В результате мы должны создать следующую структуру в нашем проекте myproject (все файлы, которых не было, пока создаем пустыми):

    myproject/

      app/

        css/fonts/img/js/sass/index.html

      dist/node_modules/gulpfile.jspackage.json

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

Папка dist/ будет содержать уже готовый продукт, оптимизированный, сжатый, причесанный. Это папка продакшена.

gulpfile.js

Теперь давайте откроем в редакторе кода gulpfile.js и напишем в него:

Данной строчкой мы подключаем Gulp к нашему проекту, посредством функции require. Данная функция подключает пакеты из папки node_modules в наш проект, присваивая их переменной. В данном случае, мы создаем переменную gulp.

Далее мы уже можем работать с этой переменной и создавать таски (инструкции).

gulpfile.js:

как установить gulp на windows 10. 10. как установить gulp на windows 10 фото. как установить gulp на windows 10-10. картинка как установить gulp на windows 10. картинка 10. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Результат выполнения команды gulp mytask:

как установить gulp на windows 10. 11. как установить gulp на windows 10 фото. как установить gulp на windows 10-11. картинка как установить gulp на windows 10. картинка 11. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Если вы используете Gulp 4 и у вас появляется ошибка о невозможности завершения таска, можно добавить async перед function() и выполнять код асинхронно:

Это, конечно очень простой базовый пример создания таска. Как правило, таски несколько сложнее и включают некоторые дополнительные команды:

Это база Gulp, теперь можно создавать инструкции. Для начала давайте создадим обработчик, который будет компилировать Sass файлы в CSS (CSS препроцессинг).

Gulp Sass

Давайте установим пакет gulp-sass в наш проект с сохранением версии и названия в package.json.

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

Далее подключим gulp-sass в файле gulpfile.js. Обратите внимание, что переменные для подключения пакетов можно перечислять через запятую:

как установить gulp на windows 10. 12. как установить gulp на windows 10 фото. как установить gulp на windows 10-12. картинка как установить gulp на windows 10. картинка 12. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

gulpfile.js:

После этого, логичным будет выполнить в терминале наш новый таск sass:

В результате выполения данной команды в папке app/css появится файл main.css.

как установить gulp на windows 10. 13. как установить gulp на windows 10 фото. как установить gulp на windows 10-13. картинка как установить gulp на windows 10. картинка 13. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

От таки чудеса, друзя. Как видим, все просто 🙂

Выборка файлов для gulp.src

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

Давайте познакомимся ближе со всеми возможностями выборки файлов для обработки.

Самые распространенные шаблоны выборки

Давайте внесем некоторые изменения в таск sass и сделаем его более универсальным:

Дело в том, что брать напрямую один отдельный файл не всегда удобно, так как в папке sass могут появиться и другие файлы с расширением sass, которые могут использоваться в проекте.

Обратите внимание, что файлы sass, которые предназначены для импорта в другие файлы, как части одного общего, начинаются с нижнего подчеркивания _part-1.sass. Такие файлы не учавствуют в компиляции, как отдельные файлы, а добавляются через @import в основные файлы.

как установить gulp на windows 10. 14. как установить gulp на windows 10 фото. как установить gulp на windows 10-14. картинка как установить gulp на windows 10. картинка 14. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Наблюдение за изменениями в файлах (Gulp Watch)

Gulp поддерживает метод watch для проверки сохраняемых файлов и имеет следующий синтаксис:

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

Что мы видим: Gulp наблюдает за всеми sass файлами и при сохранении выполняет таск sass, который автоматически компилирует их в css файлы.

Также, мы можем создать отдельный таск для наблюдения за всеми необходимыми файлами

Для Gulp 4 код будет выглядеть так:

Если мы запустим в консоли gulp watch, то Gulp будет автоматически следить за всеми измененями в файлах sass при сохранении и компилировать их в css.

Было бы неплохо в дополнение к этой красоте сделать автоматическую перезагрузку страницы при изменениях в файлах. Для этой задачи нам подойдет Browsersync.

Автоматическое обновление страниц с использованием Bbrowser Sync

Мы уже умеем устанавливать дополнения для Gulp, поэтому давайте установим Browser Sync в наш проект:

И, конечно-же, подключим в файле gulpfile.js, как мы это делали ранее с пакетом gulp-sass.

Создаем таск для Browser Sync:

Отлично! Наш сервер для работы и автоматического релоада готов. Теперь давайте последим за изменениями в Sass. Если файл Sass обновляется, автоматически инжектим в HTML измененный CSS файл:

Обратите внимание, что мы выполняем таски [‘sass’, ‘browser-sync’] до запуска watch, так как их выполнение необходимо нам для корректного отображения изменений на момент запуска сервера.

Для Gulp 4 логичнее было бы написать так и выполнять всю конструкцию в дефолтном таске:

Расположим таск watch после всех других тасков и в результате получим такой gulpfile.js для Gulp 3:

Такой код получится для Gulp 4:

Для того, чтобы следить за изменениями в браузере, сделаем соответствующую разметку в файле index.html директории app с подключением файла стилей main.css:

Выполним в терминале команду «gulp». Результат завораживает:

как установить gulp на windows 10. 15. как установить gulp на windows 10 фото. как установить gulp на windows 10-15. картинка как установить gulp на windows 10. картинка 15. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Давайте разберемся, что у нас происходит в консоли (картина может разниться, в зависимости от версии ПО):

как установить gulp на windows 10. 16. как установить gulp на windows 10 фото. как установить gulp на windows 10-16. картинка как установить gulp на windows 10. картинка 16. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

И эта задача нам по плечу. Создайте в папке app/js файл common.js. Это основной пользовательский JS файл в нашем проекте. Модифицируем код:

Код для Gulp 4 (здесь лучше добавить дополнительный таск для обработки HTML и JS):

Здесь мы используем функцию browserSync.reload, которую нам любезно предоставил пакет Browser Sync. Обратите внимание на выборку файлов для слежения.

В принципе, мы уже имеем довольно продвинутое рабочее окружение. Но двигаемся дальше, это не все, на что способен Gulp.

Оптимизация JavaScript

Давайте рассмотрим, как можно оптимизировать JS файлы проекта. Чаще всего, в оптимизации нуждаются библиотеки и сторонние jQuery и JavaScript плагины. Давайте создадим в папке app паку libs, которая будет содержать необходимые проекту библиотеки. Все библиотеки будем размещать в отдельных папках.
Для установки новых библиотек рекомендую использовать Bower.

Обратите внимание, что для работы Bower необходим установленный https://git-scm.com/downloads. Если в ОС Windows вы используте оболочку Ubuntu bash, то установку Git выполнять не нужно.

Теперь в папке проекта создадим файл .bowerrc, в который напишем:

Если вы пользователь ОС Windows, у вас не получится просто взять и создать файл, начинающийся с точки. В этом случае можно просто поставить точку в конце файла и нажать Enter: .bowerrc.

Данной настройкой мы указываем путь по умолчанию для установки плагинов с помощью Bower.

Установим jQuery и Magnific Popup, для примера:

как установить gulp на windows 10. 17. как установить gulp на windows 10 фото. как установить gulp на windows 10-17. картинка как установить gulp на windows 10. картинка 17. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Обратите внимание, что все (ну, или почти все) плагины имеют папку dist, об этом мы говорили ранее. В этой папке располагаются готовые файлы продакшена, которые мы и будем использовать в нашем проекте.

Давайте создадим таск scripts, который будет собирать все JS файлы библиотек в один и минифицировать файл. Для этого установим 2 пакета: gulp-concat и gulp-uglifyjs.

Подключим новые библиотеки в gulpfile.js:

Создаем задачу для сборки и сжатия всех библиотек (перед watch):

Давайте проверим, как работает наш новый таск scripts, выполнив в терминале:

как установить gulp на windows 10. 18. как установить gulp на windows 10 фото. как установить gulp на windows 10-18. картинка как установить gulp на windows 10. картинка 18. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Выполнение таска scripts можно запустить перед выполнением watch. Gulp 3:

как установить gulp на windows 10. 19. как установить gulp на windows 10 фото. как установить gulp на windows 10-19. картинка как установить gulp на windows 10. картинка 19. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

На выходе, в папке app/css мы получаем дополнительно к main.css файл libs.css, который содержит стили всех библиотек. Файл main.css нет особого смысла минифицировать, так как он содержит кастомные (пользовательские) стили. А вот файл libs.css мы с удовольствием минифицируем.

Внимание! Если в файле libs.css не появляется кода библиотек, а вы по-прежнему видите в нем конструкции @import, создайте отдельный файл _libs.sass для библиотек, который начинался бы с нижнего подчеркивания. Затем импортируйте этот файл в главный, тем самым объеденив и библиотеки и пользовательские стили в один файл.

Для минификации CSS установим пакеты gulp-cssnano и gulp-rename:

И подключим их в нашем gulpfile.js:

И создадим соответствующий таск css-libs. Сразу добавим данный таск в watch для того, чтобы библиотеки собирались в процессе запуска проекта. Таск sass лучше вызвать до запуска css-libs, чтобы нам было что минифицировать:

как установить gulp на windows 10. 20. как установить gulp на windows 10 фото. как установить gulp на windows 10-20. картинка как установить gulp на windows 10. картинка 20. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Подготовка к продакшену

Результирующий код для Gulp 4 будет представлен в конце статьи.

Для продакшена (сборки в папку dist) мы создадим отдельный таск build в конце gulpfile.js. В данной инструкции мы осуществим сборку Sass, JS и выгрузку того, что у нас готово в папку dist.

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

Все прекрасно, но всегда есть одно «Но». Перед тем, как собирать проект нам желательно бы очистить папку dist, чтобы не оставалось лишних потрохов от предыдущих итераций с нашим проектом.

Установим и подключим пакет del:

Создаем таск очистки clean и добавляем его выполнение перед выполнение build:

Для Gulp 4 попробуйте составить таски самостоятельно, как мы это делали в предыдущих прмерах.

Оптимизация изображений

Как вы могли заметить, в нашем проекте на продакшене не хватает изображений. Давайте исправим это недоразумение и добавим обработку изображений в наш проект. Данный раздел выполнен с использованием Gulp 3. Код для Gulp 4 можно адаптировать самостоятельно, как мы это делали ранее.

В папке app/img есть 3 изображения, которые нам необходимо перенести в папку продакшена, оптимизируя.

как установить gulp на windows 10. 21. как установить gulp на windows 10 фото. как установить gulp на windows 10-21. картинка как установить gulp на windows 10. картинка 21. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Для оптимизации изображений установим 2 пакета (gulp-imagemin, imagemin-pngquant) и подключим их:

Далее создадим таск img для сжатия изображений на продакшен и вызовем его после очистки:

Все прекрасно. До тех пор, пока количество изображений в проекте не превышает 3 шт. Большое количество картинок будет обрабатываться значительно дольше, поэтому к обработке изображений было бы неплохо добавить кеш, чтобы картинки кешировались, экономя наше время.

Установи м подключим gulp-cache:

Модифицируем таск img:

Автоматическое создание префиксов CSS с помощью Gulp

Вендорные префиксы необходимы для обеспечения максимальной совместимости со всеми современными браузерами. Было бы логично сделать автоматическое добавление префиксов, чтобы написав в CSS или Sass:

Мы получили на выходе:

Установим пакет gulp-autoprefixer и подключим его в gulpfile.js:

И модифицируем наш таск sass:

Дефолтный таск Gulp

Внимание! Дефолтный таск для Gulp 4 отличается от приведенного в этой главе. Полный код для Gulp 4 можно будет посмотреть в конце статьи.

Также, необходимо создать автономный таск для очистки кеша Gulp, чтобы его можно было вызывать простой командой gulp clear:

Если у вас возникнут проблемы с изображениями или другими кешируемыми файлами, просто почистите кеш.

В результате, у нас должен получиться такой gulpfile.js. Gulp 3:

Результирующий код для Gulp 4:

С примером урока вы можете ознакомиться на GitHub: agragregra/gulp-lesson

Чтобы установить все пакеты и зависимости для скачанного примера, выполните команду npm i в папке проекта.

Премиум уроки от WebDesign Master

как установить gulp на windows 10. jekyll. как установить gulp на windows 10 фото. как установить gulp на windows 10-jekyll. картинка как установить gulp на windows 10. картинка jekyll. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Создание сайта от А до Я. Комплексный курс

как установить gulp на windows 10. opencart. как установить gulp на windows 10 фото. как установить gulp на windows 10-opencart. картинка как установить gulp на windows 10. картинка opencart. Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Создание современного интернет-магазина от А до Я

Источник

Gulp-rsync для Windows 10

Рассмотрим такой инструмент для web-разработки как gulp-rsync. С его помощью будет происходить моментальная загрузка сайта на хостинг и синхронизация файлов.

Установка gulp-rsync в проект

Сначала установим gulp-rsync в папку проекта:

Если не знакомы с gulp, рекомендую сначала ознакомиться.

Подключим плагин gulp-rsync и создадим задачу rs в gulpfile.

Настройка SSH в Windows 10

Мы сгенерируем два ключа: открытый ключ (публичный) и закрытый (приватный). Открытый ключ скопируем на сервер (хостинг), приватный останется только у вас на компьютере.

Генерация ключей на вашем устройстве

Теперь нам понадобится оболочка bash. Откроем bash. Терминал будет со значком доллара.

Установим необходимые права доступа на неё

Сгенерируем ключи доступа id_rsa (приватный) и id_rsa.pub (публичный). Несколько раз нужно будет нажать клавишу enter

Сохранение id_rsa на хостинге

Сохраним, сгенерированный в предыдущем пункте приватный ключ на хостинге:

Создание ключей авторизации на хостинге

Если возникнет ошибка, возможно вам необходимо включить SSH-доступ на хостинге.

Установим права 600.

Удаление id_rsa.pub на хостинге

Добавление id_rsa на ваше устройство

Теперь добавим id_rsa (закрытый ключ) в ssh-agent

Настройка беспарольного доступа завершена. Проверим rsync в действии.

Откроем bash в папке проекта и запустим деплой командой.

Статьи про Gulp

EnglishRussian
RootКорень
DestinationПункт назначения
IncludeВключать
ExcludeИсключать
SilentБесшумный
SSH (Secure SHell)Защищённая оболочка
Bash (Bourne Again SHell)‘Возрождённый’ shell

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Источник

Вам также понравится

подвисает ноутбук что делать windows 7 как почистить

admin 0

как убрать надпись insider preview в windows 10 в правом нижнем углу

admin 0

кнопка меню пуск для windows 10

admin 0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *