Установка gulp 4: Gulp 4 — установка и настройка. Создание Gulp сборки для верстки сайта

Используем Gulp для ускорения процесса верстки

Что такое Gulp? Как его установить? Как им пользоваться?

Подписаться на Telegram-канал блога

Что такое Gulp?

Определение из Wikipedia

Gulp — это таск-менеджер для автоматического выполнения часто используемых задач (например, минификации, тестирования, объединения файлов), написанный на языке программирования JavaScript.

Существует огромное количество полезных инструментов для HTML-верстки. Самый простой и наиболее показательный инструмент — Autoprefixer.

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

Gulp, с плагином gulp-autoprefixer, делает это автоматически в реальном времени

Думаю, только этот пример уже не оставляет сомнений в полезности Gulp, а таких плагинов для

Gulp более 4 тысяч

---

Как установить Gulp?

Чтобы установить Gulp, сначала необходимо установить Node. js

Процесс установки Node.js описан в статье Node.js — зачем верстальщику и как установить

После того, как Node.js установлен, переходим к установке Gulp

Нажимаем на клавиатуре сочетание клавиш Win+R

В открывшемся окне Выполнить вводим cmd и нажимаем “ОК”

Если ранее пробовали устанавливать Gulp, то необходимо удалить прежнюю версию, для этого введем и запустим клавишей Enter команду

npm rm --global gulp

После удаления прежней версии Gulp, или если устанавливаем Gulp впервые, вводим команду

npm install --global gulp-cli

Когда процесс установки закончится, проверим, что

Gulp корректно установлен, с помощью команды

gulp -v

Если в пункте CLI version: указана версия (на момент написания статьи — 2. 3.0), то Gulp установлен корректно (на пункт Local version: пока не обращаем внимания)

---

Стартовый шаблон gulp-dev

На данный момент, не будем углубляться во все подробности работы Gulp.

Вместо этого покажу свой шаблон Gulp, расскажу его возможности и как им пользоваться.

Этот шаблон использую для верстки уже достаточно долгое время. Сейчас выложил его на GitHub для написания данной статьи — gulp-dev

---

Что входит в данный шаблон

1. Browsersync — будет перезагружать страницу в браузере автоматически при сохранении файлов
2. Stylus — ускоряет написание CSS (рассмотрим в одной из следующих статей)
3. Autoprefixer — автоматически расставит префиксы в CSS
4. Pug — ускоряет написание HTML (рассмотрим в одной из следующих статей)

Данный набор инструментов позволяет ускорить процесс верстки в разы

Также в шаблон добавлены сброс стилей Bootstrap Reboot и jQuery, так как использую их в каждом проекте.

Они добавлены как статичные файлы, к Gulp они не относятся. При необходимости можно просто отключить их в файле app/pug/index.pug

---

Установка шаблона gulp-dev

Заходим на страницу шаблона gulp-dev

Кратко расскажу о некоторых файлах (про папки dist и app расскажу ниже)

1. package.json — содержит служебную информацию о репозитории, в этом же файле содержится список зависимостей(плагинов), которые необходимо установить
2. gulpfile.js — содержит настройки Gulp, чтобы Gulp мог запуститься и знал, что ему делать
3. .gitignore — если используем Git, файлы и папки указанные в этом файле будут игнорироваться при коммитах, то есть эти папки и файлы не будут отслеживаться и в Git-репозиторий они добавляться не будут

Нажимаем на “Code”, затем на “Download ZIP”

Создадим новую папку new_project для проекта (например, на рабочем столе)

Открываем скачанный ZIP-файл gulp-dev-main, внутри ZIP-файла открываем папку gulp-dev-main и копируем все её содержимое в созданную на рабочем столе папку new_project

Далее нажимаем на клавиатуре сочетание клавиш Win+R

В открывшемся окне Выполнить вводим cmd и нажимаем “ОК”

В окне командной строки необходимо перейти в созданную папку new_project

В командной строке пишем cd и через пробел путь до папки (можно скопировать из адресной строки окна и вставить в командной строке правой кнопкой мыши или сочетанием клавиш “Shift+Insert”) и нажимаем Enter

Следующие команды будем запускать для папки new_project

Далее, устанавливаем все выше перечисленные инструменты одной командой

npm i

В папке с проектом появится папка node_modules, в которой хранятся все необходимые файлы для работы Gulp.

Изменять или удалять папку node_modules нельзя

Запускаем Gulp командой

gulp dev

Когда Gulp будет запущен, автоматически откроется браузер с начальной страницей шаблона

Окно командной строки, где запустили Gulp, не закрываем до завершения работы с ним

---

Что происходит при запуске Gulp?

Постараюсь простыми словами объяснить, что делает Gulp при запуске шаблона gulp-dev

1. Сначала, создает структуру папок (добавляет папки src, dist/fonts, dist/img)
2. Далее генерирует файл index.html (dist/index.html
   ) из файла index.pug (app/pug/index.pug) и файл main.css (dist/css/main.css) из файла main.styl (app/styl/main.styl)
3. Далее запускает локальный сервер и наблюдение за всеми файлами в папке dist для автоматической перезагрузки страницы в браузере при их изменении

---

Структура шаблона

Папка src/ — для PSD макетов, JPG превью, технического задания и так далее. Черновая папка с файлами которые не будут содержаться в итоговой верстке

Папка app/ — содержит папки pug и styl для соответствующих файлов (подробнее про Pug и Stylus в следующих статьях)

Папка dist/ — итоговая папка с готовой версткой, здесь храним и редактируем все файлы, которые будут содержаться в итоговой верстке (шрифты, изображения, HTML файлы, файлы CSS стилей и JS скриптов), за исключением файлов, которые будут генерироваться автоматически из папки app

Структуру и названия папок не меняем!

Менять структуру и названия можно только при условии, что решите редактировать настройки Gulp в файле gulpfile.js

---

Пример использования

По Pug и Stylus будут следующие статьи.

На данный момент, просто посмотрим как автоматически генерируются index.html и main. css и обновляется страница при их изменении

Откроем файл index.pug (app/pug/index.pug) в редакторе кода (я использую Sublime Text 3)

Внесем изменения в index.pug

<!DOCTYPE html>
html
	head
		meta(charset="UTF-8")
		meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
		title
		link(rel="stylesheet", href="css/bootstrap-reboot.min.css")
		link(rel="stylesheet", href="css/main.css")
	body
		header.header
			.container
				.header__flex
					.header__logo
						a(href="")
							img(src="img/logo.png", alt="")
					.header__phone
						a(href="tel:88001111111") 8 (800) 111-11-11
		//- Scripts
		script(src="js/jquery-3.5.1.min.js")
		script(src="js/main.js")

Повторюсь, синтаксис Pug разберем в одной из следующих статей

Сохраняем index.pug с внесенными изменениями, при этом автоматически генерируется index. html и страница в браузере перезагружается

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <header>
      <div>
        <div>
          <div><a href=""><img src="img/logo.png" alt=""/></a></div>
          <div><a href="tel:88001111111">8 (800) 111-11-11</a></div>
        </div>
      </div>
    </header>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Аналогично откроем main.styl (app/styl/main.styl)

Внесем изменения

// Please delete before starting
body
	background lightgreen

Сохраняем main.

styl — Gulp генерирует main.css (dist/css/main.css) — страница в браузере перезагружается

body {
  background: #90ee90;
}

---

Итоги

Для Gulp существует более 4000 плагинов. Его можно настроить под любую функциональность — минификация HTML/CSS/JS, оптимизация изображений, расстановка префиксов, автоматическая перезагрузка страниц в браузере, использование любых препроцессоров и шаблонизаторов и многое другое

Следующие статьи будут про Pug и Stylus, в них рассмотрим синтаксис и базовые возможности этих инструментов

Планировщик задач Gulp 4 — Stepik

Освойте работу с планировщиком задач Gulp 4 и сделайте свою работу комфортнее и быстрее. Настройте сборщик для работы с Pug, Less, Sass, Stylus, Type Script, Coffee Script и другими современными технологиями.

What you will learn

• Инициализировать проект с помощью NPM от Node JS
• Находить нужные для работы пакеты и модули, а также устанавливать их
• Автоматизировать обработку стилей и скриптов в вашем проекте
• Настраивать автоматическое отслеживание изменений файлов проекта
• Быстро использовать готовую сборку в дальнейшем и не тратить время на настройку каждый раз
• Отслеживать только новые файлы в проекте и сжимать изображения с помощью Gulp
• Настраивать Gulp на обработку препроцессоров Pug, Stylusm Sass, Less
• Настраивать транспиляцию кода с языков Type Script и Coffee Script в Java Script в стандарте ES5, который поддерживается во всех браузерах

About this course

В этом видео курсе вы изучите работу с Gulp. В курсе для вас подготовлен 21 видео урок. Обязательно изучите все дополнительные материалы прикрепленные к урокам. Курс состоит из 3 модулей, в которых вы научитесь работать с Gulp.

В первой главе мы будем работать с менеджером пакетов NPM, инициализировать проект с помощью Node.js и создавать конфигурационный файл package.json, установим Gulp глобально и локально, научимся устанавливать и подключать NPM плагины в наш проект. Создадим базовую версию сборки проекта на Gulp, которая позволит нам обрабатывать стили, скрипты и отслеживать изменения в этих файлах автоматически. Так же я покажу, как повторно использовать готовую сборку в своих новых проектах размещу её на GitHub и вы в любой момент сможете скачать код настроенного Gulp проекта.

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

В третей главе я покажу как настроить плагины для работы с препроцессорами Sass, Stylus, Pug и языками Type Script и Coffee Script. После подведения итогов данного курса у вас будет полное понимание как работать с Gulp, как добавить что то в эту сборку или изменить её под себя, а так же вы получите готовый код сборки финальной версии нашего планировщика задач Gulp.

Все уроки и задания из этого курса полностью включены в курс «Frontend разработчик на HTML, CSS и JavaScript», который содержит в себе шесть разных курсов. Подробнее можно ознакомиться на странице курса.

Whom this course is for

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

Initial requirements

Этот курс подойдет для тех, кто знает основы HTML и Java Script. Если вы только начинаете свой путь, то рекомендую записаться на курсы:

1. Вёрстка на HTML & CSS для начинающих
2. Супер курс по языку JavaScript

и только потом переходить к данному курсу.

Meet the Instructors

How you will learn

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

Course content

Certificate

Stepik

What you will get

Price

FAQ

How to pay from the company?

Share this course

https://stepik. 4.0.2″ // другие вещи } }

Когда я запускаю npm i , я получаю сообщение об умеренных уязвимостях безопасности. Итак, я делаю npm audit и получаю этот

 === отчет о безопасности аудита npm ===
                                 Проверка вручную
             Некоторые уязвимости требуют вашего внимания для устранения
                                                                                
          Посетите https://go.npm.me/audit-guide для получения дополнительных рекомендаций.
  Умеренный отказ в обслуживании по регулярному выражению
  Пакет glob-parent
  Исправлено в >=5.1.2
  Зависимость gulp [dev]
  Глоток пути > глобус-наблюдатель > чокидар > глобус-родитель
  Дополнительная информация https://npmjs.com/advisories/1751
  Умеренный отказ в обслуживании по регулярному выражению
  Пакет glob-parent
  Исправлено в >=5.1.2
  Зависимость gulp [dev]
  Глоток пути> винил-фс> глоб-поток> глоб-родитель
  Дополнительная информация https://npmjs. com/advisories/1751
обнаружены 2 уязвимости средней степени серьезности в 751 отсканированном пакете
  2 уязвимости требуют ручной проверки. Подробности смотрите в полном отчете.
 

Тогда я подумал, что все дело в изменении версии gulp на самую старшую версию, где она (вероятно) пропатчена. Но вроде это уже самая старшая версия, так что делать с уязвимостью?

• node.js
• npm
• глоток

3

Если кому-то интересно, как я на самом деле «решил» эту проблему, я начал использовать пряжу для всех своих проектов. Мне кажется, это лучше, чем npm.

Следующие команды позаботятся о вас:

1. Установить пряжу
2. Удалите «package-lock» npm, чтобы не смешивать менеджеры пакетов проектов
3. Беговая пряжа
4. Наслаждайтесь

Команды:

 npm i --global yarn
rm -rf пакет-lock.json
пряжа
 

5

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Автоматизируйте рутинные дела с помощью Gulp 4 | от Ровадз | Edraak Engineering

Опубликовано в

·

7 минут чтения

·

10 октября 2020 г.

Photo by Philip Swinburn on Unsplash

В Edraak мы постоянно ищем способы автоматизации повторяющихся рутинных задач, будь то компиляция SCSS/SASS, перемещение/переименование файлов, очистка/минимизация JavaScript/CSS, или даже запуск скриптов Bash! Это не только повышает производительность и рабочий процесс разработчиков, но и экономит их драгоценное время и усилия.

Одним из наиболее эффективных наборов инструментов является gulp , предназначенный для
автоматизируйте и улучшите свой рабочий процесс.

В этом сообщении блога я познакомлю вас с gulp и функцией файла gulpfile.js , с которым вы могли столкнуться во время предыдущего проекта (будь то интерфейс или сервер). Кроме того, объясняются различные способы использования этого инструментария и проводится простое вводное руководство, освещающее различные варианты его использования.

Автоматизация

• Компиляция SCSS/SASS
• Компиляция TypeScript
• Очистка и минимизация кода JS/CSS
• Просмотр файлов для перезагрузки браузера и повторная компиляция TS/CSS
• Оптимизация изображений для ускорения загрузки сайта

Простая интеграция с другими инструментами:

• Интеграция инструментов и библиотек с gulp для обогащения вашего рабочего процесса разработки (например, Browsersync, Babel или Webpack)

Чтобы было ясно, gulp автоматизирует и организует только инструменты, отвечающие за вышеуказанные функции. Некоторые инструменты компилируют SCSS/SASS, например 9.0011 node-sass , Typescript, например tsc , и JavaScript в более старых версиях, совместимых с любым браузером, например Babel .

Прежде чем начать, вы должны установить Nodejs и NPM, так как gulp работает в среде узла

• Начните с формирования вышеуказанной структуры папок.
• gulpfile.js в корне нашего каталога, где мы будем вводить функции для выполнения gulp.
• В папке src находится JS/SCSS.
• package.json и package-lock.json будут добавлены после того, как мы запустим npm init -y в этом каталоге, что позволит нам использовать здесь любой пакет NPM.

В указанной выше папке необходимо выполнить следующие команды:

• npm init -y : это позволяет использовать пакеты NPM. Флаг -y написан для ответа «да» на все вопросы, заданные NPM, поскольку они не являются жизненно важными в нашем текущем контексте.
• npm установить глоток -D : это устанавливает gulp локально, в то время как флаг -D превращает этот пакет в зависимость разработки (т. е. пакет, с которым может взаимодействовать разработчик). Возможно, вы также заметили gulp-cli, который можно установить глобально. Однако я предпочитаю устанавливать gulp локально и вызывать его с помощью сценариев NPM. Это упрощает изменение версии gulp и ограничивает количество инструментов, которые необходимо установить перед началом разработки.
• Команда npm init -y создает файл с именем package.json . Вы должны изменить его свойство scripts , чтобы оно соответствовало приведенному ниже.

 { 
 "scripts": { 
 "dev": "gulp" 
 } 
 } 

Затем запустите npm run dev , чтобы запустить gulp из папки node_modules , которую мы создали после установка первого пакета с помощью НПМ.

Задачи Gulp — это асинхронные функции, которые выполняются параллельно или последовательно. Но сначала мы должны определить их в файле gulpfile.js , который находится в корне нашего каталога.

Однако, поскольку таксы асинхронны, мы можем выполнять их параллельно или последовательно.

В Gulpfiles.js мы должны экспортировать функцию по умолчанию (задача Gulp), чтобы при выполнении NPM запустить Dev , Gulp будет запускаться и запустить экспортные функции по умолчанию от Gulpfiles. js .

PS: в конце этой статьи вы найдете код в виде GitHub gist.

Теперь, когда вы запускаете npm run dev вы увидите в терминале следующий вывод:

Наши задачи будут вызывать только одну функцию с именем cb (обратный вызов). Эта единственная функция передается всем задачам gulp, чтобы они могли сообщить gulp о завершении.

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

Функция серии , импортированная из задач gulp, может выполнять столько функций, сколько вам нужно, но последовательно, выполняя одну перед переходом к следующей.

С другой стороны, функция parallel выполняет все переданные ей задачи gulp одновременно.

Чтобы скомпилировать SCSS в CSS, нам нужно использовать node-sass . Для этого требуется пакет под названием gulp-sass , который объединяет его с gulp.

Чтобы установить их, напишите следующую команду: npm install node-sass gulp-sass glob -D , затем перейдите к вашему gulpfile.js , чтобы добавить к нему логику. Я также установил пакет под названием glob , который предоставляет доступ ко всем путям к файлам, которые соответствуют выражению мини-совпадения в виде массива. Мы вернемся к этому чуть позже.

Объяснение функции compileSCSS :

• Импортируйте модуль scss из gulp-sass , который использует node-sass для компиляции SCSS/SASS и интегрирует его с gulp .
• Получение функции sync из glob, которая после предоставления ей выражения мини-совпадения вернет массив совпадающих путей к файлам. В свою очередь, пути к файлам будут служить входными данными для gulp. В нашем случае поместите все файлы внутрь, которые заканчиваются на .scss в src/scss независимо от того, как они называются ( *. scss) или на каком уровне они вложены **/*.scss .
• Импорт функции соединения из встроенного пакета в Nodejs с именем path . В основном он объединяет строки для создания пути к файлу. Вы можете связываться со строками вручную, но я считаю, что лучше использовать эту функцию.

Подводя итог, мы используем функцию src из gulp, которая говорит ей использовать все файлы, возвращенные как пути из 9Функция 0011 sync в качестве входных данных для их обработки (в нашем случае их компиляции). После этого (который возвращает поток) мы вызовем .pipe для этих файлов и передадим их как поток в модуль sass , который будет скомпилировано.

.on('error') — это прослушиватель событий, который вызывает функцию sass.logError , если в выводе возникает какая-либо ошибка, что позволяет нам отлаживать их. события в потоках, которые, кстати, возвращаются источник и труба .

После того, как модуль sass скомпилирует наши файлы SCSS, они будут переданы в виде потока функции dest , импортированной из gulp, которая поместит вывод из этого потока в src/dist .

Теперь вы можете запустить npm run dev Вы также можете посмотреть нашу папку src/dist (не забудьте поставить немного SCSS, чтобы получить окончательную компиляцию).

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

Начните с установки пакета под названием gulp-clean-css , который объединяет clean-css с gulp.

Объяснение функции minifyCSS :

Вы можете заметить, что эти две функции очень похожи. Здесь наш src — это все файлы, оканчивающиеся на .css в папке src/dist , которые мы передаем функции cleanCSS . После завершения этого шага мы вернем их в src/dist 9.0012, которая заменит скомпилированные файлы CSS новыми, скомпилированными и очищенными файлами.

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

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

• Прочтите документацию здесь. Они очень хорошо объясняют, как работает gulp.
• Если вы хотите скомпилировать машинописный текст, вам нужно найти пакет, который интегрирует компилятор машинописного текста с gulp. То же самое относится к (Babel, Webpack и т.