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

Обновлено: 05.07.2024

JavaScript-разработчики уделяют программированию очень мало времени. Большая часть работы включает в себя выполнение рутинных заданий:

генерирование HTML из шаблонов и файлов содержимого;
сжатие изображений;
компиляция Sass в CSS код;
удаление значений console и debugger из скриптов;
объединение и минификация файлов CSS и JavaScript;
развертывание файлов на серверах.

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

Звучит сложно!

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

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

Сборщики проектов: варианты

Первым популярным решением подобного рода был Grunt – сборщик проектов, созданный на основе Node.js. Grunt был невероятно популярным. Но низкая скорость работы и сложность настройки были его слабыми местами.

Затем появился Gulp , обладающий следующими преимуществами:

Возможность просмотра файлов.
Плагины для Gulp просты и предназначены для выполнения одной задачи.
Код конфигурации на JavaScript, который легче для понимания.
Gulp быстрее из-за того, что использует потоки Node.js для передачи данных через серию плагинов.

Версии Gulp

Gulp.js 3.9.1 был единственной версией много лет. И хотя был доступен Gulp 4, его нужно было устанавливать с помощью npm install gulp@next . Причина этого заключалась в том, что плагины оставались совместимыми. Но Gulp 4 использовал новый синтаксис конфигурации.

10 декабря 2018 года Gulp.js 4.0 был объявлен единственной версией и появился в менеджере пакетов npm. Любой, кто станет использовать npm install gulp , получит версию 4. Эта версия будет использоваться и в данном руководстве.

Шаг 1: установите Node.js

Примечание: Node.js и Gulp работают в Windows, но некоторые плагины могут работать некорректно, если они зависят от собственных бинарных файлов Linux. Одним из вариантов решения проблемы в Windows 10 является подсистема Windows для Linux .

После установки запустите командную строку и введите следующую команду. Она позволит узнать номер версии:

Вскоре вы станете активно использовать npm – менеджер пакетов Node.js, который необходим для установки модулей. Узнайте номер его версии:

Затем добавьте следующую строку в конце

Шаг 2: установите Gulp глобально

Установите интерфейс командной строки Gulp глобально, чтобы сборщик можно было запустить из любой папки проекта:

Убедитесь, что Gulp установлен, проверив его версию:

Шаг 3: Настройте проект

Примечание: пропустите этот шаг, если у вас уже есть файл конфигурации package.json .

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

Затем нажмите « Return », чтобы принять значения по умолчанию. Файл package.json , в котором хранятся параметры конфигурации npm , будет создан автоматически.

Примечание: Node.js устанавливает модули в папку node_modules . Нужно добавить их в свой файл .gitignore , чтобы убедиться, что они не попадут в репозиторий. При развертывании проекта в другой системе можно будет запустить npm install , чтобы их восстановить.

Предполагается, что ваш проект содержит папки, перечисленные ниже.

Папка src: предварительно обработанные исходники

Содержит следующие подкаталоги:

html ‒ исходные файлы и шаблоны HTML;
images ‒ оригинальные несжатые изображения;
js – предварительно обработанные файлы скриптов;
css – предварительно обработанные файлы Sass ( .scss )

Папка build: скомпилированные/обработанные файлы

Когда понадобится, Gulp создаст файлы и подпапки:

html ‒ скомпилированные статические файлы HTML;
images ‒ сжатые изображения;
js ‒ единственный объединенный и минифицированный файл JavaScript;
css – единственный скомпилированный и минифицированный файл CSS.

Примечание: Если вы работаете в Unix-системе, то можете воссоздать структуру исходных папок с помощью следующей команды:

Шаг 4: Установите Gulp локально

Теперь можно установить Gulp в папку проекта:

Эта команда устанавливает Gulp как зависимость. После чего раздел « devDependencies » в package.json обновляется соответствующим образом. В рамках этого руководства предполагается, что Gulp и все плагины являются зависимостями.

Альтернативные варианты развертывания

Зависимости разработки не устанавливаются, если в операционной системе для переменной среды NODE_ENV задано значение production . Обычно это делается на сервере с помощью команды macOS/Linux:

В этом руководстве предполагается, что ресурсы будут скомпилированы в папку build , переданы в репозиторий Git или загружены непосредственно на сервер.

Эта команда устанавливает Gulp как зависимость приложения в разделе « dependencies » файла package.json . Сборщик будет установлен при вводе npm install и может быть запущен везде, где развернут проект.

Шаг 4: Создайте файл конфигурации Gulp

Создайте новый файл конфигурации gulpfile.js в корне папки проекта. Добавьте в него базовый код:

Код ссылается на модуль Gulp, устанавливает для переменной devBuild значение true при запуске в режиме разработки и определяет расположение исходных файлов и папок сборки.

gulpfile.js ничего не сделает до того, пока вы не выполните следующий шаг.

Шаг 5: Создайте таск для Gulp

Сам по себе Gulp ничего не делает. Необходимо:

Установить плагины Gulp.
Написать инструкции (таск), которые они должны выполнить.

Большинство заданий (тасков) будут использовать:

Любое количество методов плагина может быть вызвано с помощью .pipe (plugin) между .src и .dest.

Задания для изображений

Создадим инструкцию (таск), которая сжимает изображения и копирует их в соответствующую папку сборки. Поскольку этот процесс может занять некоторое время, будем сжимать только новые и измененные файлы. Для этого понадобятся два плагина: gulp-newer и gulp-imagemin . Установите их с помощью командной строки:

Теперь можно ссылаться на оба модуля в верхней части gulpfile.js :

Затем определите функцию обработки изображений в конце gulpfile.js :

Этот код делает следующее:

Создает новую функцию таска с именем
Определяет папку out , в которой будут находиться файлы сборки.
Читает поток файлов из папки src/images/ . **/* .
Передает все файлы в модуль gulp-newer .
Передает оставшиеся новые или измененные файлы через gulp-imagemin , который устанавливает необязательный аргумент optimisLevel .
Сохраняет сжатые изображения в папку Gulp dest/images/ .
Экспортирует таск images , который вызывает функцию images .

Сохраните gulpfile.js и поместите несколько изображений в папку проекта src/images/ . Затем запустите задание из командной строки:

Все изображения будут сжаты, и вы увидите следующее:

Попробуйте снова запустить gulp images . Файлы не обрабатываются, поскольку ни одно из изображений не было изменено.

Задание для HTML

Создадим таск, который копирует файлы из исходной папки HTML. Мы можем сжать HTML-код, чтобы удалить ненужные пробелы и атрибуты, используя плагин gulp-htmlclean.

Также будет установлен плагин gulp-noop . Он не выполняет никакой операции:

Эти модули загружаются в начале gulpfile.js :

Теперь можно экспортировать функцию для обработки html в конец gulpfile.js :

Мы передаем HTML только через gulp-htmlclean , если NODE_ENV установлен на production . Поэтому HTML остается несжатым во время разработки. Что будет полезно для отладки.
Экспортируемый таск html использует series() для объединения заданий, которые выполняются друг за другом. В этом случае функция images() запускается до функции html(). В результате файлы HTML могут ссылаться на изображения.

Сохраните gulpfile.js и запустите gulp html из командной строки. Будут выполняться оба таска – html и images .

Задание для JavaScript

Обработаем файлы JavaScript, построив сборщик пакетов. Он делает следующее:

Гарантирует, что зависимости будут загружены с помощью плагина gulp-deporder . Анализирует комментарии в верхней части каждого скрипта, чтобы обеспечить правильное упорядочение – например, // requires: defaults.js lib.js .
Объединяет все файлы скриптов в один файл js , используя gulp-concat .
Удаляет значения console и debugging с помощью gulp-strip-debug при работе в режиме разработки.
Минифицирует код с помощью ES6-совместимого gulp-terser .
Добавляет карту источника в режиме разработки с помощью gulp-sourcemaps .

Установите модули плагинов:

Затем загрузите их в начало gulpfile.js :

Примечание: для большей эффективности модули gulp-strip-debug и gulp-sourcemaps загружаются только в режиме разработки.

Экспортируйте новую функцию задания:

Добавьте файлы JavaScript в папку src/js/ . Затем запустите gulp js .

Задание для CSS

Создадим задание (таск), которое будет компилировать файлы Sass ( .scss ) в один файл .css , используя gulp-sass . Это плагин Gulp для node-sass , который связан с LibSass C/C++ . Предполагается, что ваш основной файл Sass scss/main.scss отвечает за загрузку всех файлов.

Инструкция также будет использовать PostCSS через плагин gulp-postcss . PostCSS требуется собственный набор плагинов:

Source Map будет добавлена в файл CSS при повторном запуске в режиме разработки с помощью gulp-sourcemaps .

Установите все модули:

Загрузите их в начало gulpfile.js :

Теперь можно экспортировать новый таск в конец gulpfile.js . Обратите внимание, что задание images установлено как зависимость, потому что плагин postcss-assets может ссылаться на изображения в процессе сборки:

Сохраните файл, добавьте файлы Sass .scss и запустите таск из командной строки:

Шаг 6: Автоматизируйте выполнение заданий

Чтобы запустить все задания в одной команде, экспортируйте таск build в gulpfile.js :

Метод gulp.parallel() выполняет все задания одновременно. Его можно комбинировать с gulp.series() для создания сложных цепочек зависимостей. В этом примере exports.html, exports.css и exports.js запускаются параллельно. Но каждый из них может иметь последовательности зависимостей, включая таск images.

Введите в командной строке gulp build , чтобы выполнить все таски.

Кроме этого Gulp предоставляет метод .watch() , который может запускать соответствующий таск при каждом изменении файла. Он передает набор файлов или папок для мониторинга, любые и функцию таска для запуска (необязательно в методах gulp.series() ли gulp.parallel() ).

Экспортируем новый таск watch в конец gulpfile.js :

Gulp нужно знать, когда будет завершена функция таска. Этого можно добиться, используя JavaScript Promise, транслятор событий, дочерний процесс или функцию обратного вызова. В данном примере мы используем функцию обратного вызова done() , чтобы указать, что все задания watch() были настроены.

Вместо того чтобы запустить gulp watch немедленно, добавим таск по умолчанию. Его можно выполнить, запустив gulp без дополнительных аргументов:

Сохраните gulpfile.js и введите в командной строке gulp . Ваши изображения, HTML, CSS и JavaScript будут обработаны. Затем Gulp продолжит проверку обновлений и будет повторно выполнять задания по мере необходимости. Нажмите Ctrl/Cmd + C , чтобы прервать мониторинг и вернуться в командную строку.

Шаг 7: Пожинаем плоды!

Другие плагины, которые могут быть полезны:

gulp-load-plugins : загружает все модули плагинов Gulp автоматически;
gulp-preprocess : простой препроцессор HTML и JavaScript;
gulp-less : плагин препроцессора Less CSS ;
gulp-stylus : плагин препроцессора Stylus CSS ;
gulp-size : отображает размеры файлов;
gulp-nodemon : использует nodemon для автоматического перезапуска приложений Node.js при их изменении.

Таски Gulp могут запускать любой JavaScript- код или модули Node.js. Они не обязательно должны быть плагинами. Например:

browser-sync : автоматически перезагружает ресурсы, когда происходят изменения;
del : удаляет файлы и папки (может очищать папку build в начале каждого запуска).

множество плагинов ;
конфигурация с использованием pipe легко читаема и понятна;
js можно адаптировать для использования в других проектах;
упрощает развертывание;

домашняя страница Gulp ;
плагины Gulp ;
домашняя страница npm .

После применения описанных выше процессов к простому сайту его общий вес уменьшился более чем на 50%.

Что такое Gulp.js? Gulp – это отличный вариант для автоматического запуска заданий и упрощения процесса разработки.

Дайте знать, что вы думаете по данной теме в комментариях. За комментарии, лайки, отклики, дизлайки, подписки низкий вам поклон!

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

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

Установка node js

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

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

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

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

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

Для того чтобы убедится установился ли node js, проверяем его версию. Вводим в консоли команду node -v, если в ответ вы увидите название версии v.12.16.1, значит все в порядке. Делает такую же проверку и для npm. Команда npm -v должна вернуть номер версии 6.13.4. Все проверяемые номера версий актуальны на момент выхода этой статьи, у вас скорее всего будут уже другие номера версий.

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

Переходим на сайт gulpjs, запускаем в консоли команду npm install gulp-cli -g. Данная команда устанавливает Gulp глобально, то есть запускать его можно из любой папки на компьютере. Вроде как Gulp установился, но при проверки версии gulp -v, мы видим следующую картину. Что-то пошло не так.

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

Запускаем PowerShell от имени администратора
Проверяем текущие параметры для политики выполнения: Get-ExecutionPolicy -List
Устанавливаем требуемый уровень (меняем политику выполнения) Set-ExecutionPolicy -Scope LocalMachine Unrestricted
Проверяем версию Gulp, если после ввода gulp -v, вы видите CLI version: 2.2.0, значит установка прошла успешно.

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

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

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

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

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

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

Она выглядит вот так:

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

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

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

Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики. Распространяется через менеджер пакетов NPM под MIT лицензией.

Если Вы будете копировать код с этой страницы - имейте в виду, что я ставлю кое-где лишние проблелы - исключительно для того, чтобы текст лучше помещался на экран. Смело удаляйте их.

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

Установка

Рассмотрим установку с помощью npm. Подразумевается, что nodejs Вы уже установили.

О том как установить npm читайте в моей статье Установка npm

О том как установить более старую версию Gulp - Установка архивной версии Gulp

$ npm install gulp-cli --global

C:\Users\ao\AppData\Roaming\npm\gulp -> C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js + gulp-cli@2.2.0 updated 7 packages in 7.386s

Проверить версию gulp

CLI version: 2.2.0 Local version: Unknown

Про установку не последней, а какой-то определённой версии Gulp читайте здесь

Затем переходим непосредственно к установке gulp в текущий проект

$ npm install gulp --save-dev

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

Посмотрим, как изменился наш файл package.json

Подробнее о том, зачем этот файл нужне читайте в статье npm

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

Если теперь посмотреть содержимое папки node_modules можно увидеть, что установка Gulp добавила не одну папку, как, например, сделал бы jquery а несколько десятков.

Старые версии npm создавали всегда одну папку и размещали все зависимости туда.

Новые версии npm сохраняют зависимости в родительскую папку node_modules.

Установка более старой версии

Иногда бывает нужно установить не текущую, а более ранню версию Gulp.

Особенно это касается версии 3.9.1 , которая сильно отличается от 4 и выше.

npm install gulp@3.9.1 --save-dev

npm install gulp-cli@1.2.1 --save-dev

Список версий Gulp находится здесь , Gulp-cli - здесь . Нужно открыть вкладку Versions

Если Вы хотите сперва удалить Вашу версию Gulp а уже потом установить другую - сделать это можно командой uninstall

npm uninstall gulp

Gulpfile.js

После установки Gulp нужно в корневой директории проекта (в моём случае - heiheiru) создать файл gulpfile.js в который мы будем записывать инструкции для Gulp.

Первым делом запишем туда

Начиная с верси 4.0 можно пользоваться новым синтаксисом JavaScript (ES2015+)

Но для этого нужно устанавливать babel и следить чтобы не было ошибок. Я видел на форумах жалобы, сам пока не пробовал.

После того как файл gulpfile.js создан можно запустить Gulp

[11:22:35] Using gulpfile

\Desktop\Sites\heihei\gulpfile.js [11:22:35] Task never defined: default [11:22:35] To list available tasks, try running: gulp --tasks

Gulp жалуется на то, что не определно задание по умолчанию - default task

Нужно его определить

default запустится но теперь Gulp пожалуется на непонятное закрытие.

[11:31:44] Using gulpfile

Эту ошибку можно устранить несколькими способами. Подробности здесь. Я пользуюсь следующим:

Организация файлов

Чтобы не создавать каши из файлов и папок организуем всё правильно с самого начала.

Корневая папка носит называние проекта. В моё случае heihei или heiheiru

В этой папке мы инициализируем GIT и npm.

npm создаст папку node_modules и файлы package.json , package-lock.json.

Для GIT мы сами рано или поздно создадим файл gitignore

Так как мы будем пользоваться Gulp появится и файл gulpfile.js

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

В gulpfile.js мы будем только импортировать другие .js файлы по принципу - на каждое задание один файл.

Чтобы хранить эти файлы нам будет нужна папка, назовём её gulp и создадим в корневой. Внутри неё создадим подпапку tasks

Так будет выглядить дерево папок в редакоторе Sublime

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

Обработка файлов стилей

При разработке удобно пользоваться метаязыками, например, SASS.

Установим его с помощью npm

npm install gulp-sass --save-dev

Теперь можно объявить переменную sass и пользоваться этим препроцессором

const и let - были введены в JavaScript начиная с ES6 и для современного JavaScript являются более предпочтительным вариантом чем var

gulp-watch

gulp-watch это название плагина для Gulp, который отслеживает изменение файлов. Начиная с четвёртой версии Gulp gulp-watch включен в основной пакет и не требует отдельной установки.

Начнём с простого - делаем функцию, которая при каждом изменении файла index.html в папке app будет выводить предупреждение.

Как это выглядит в Gulp 4

Чтобы запустить мониторинг пишем

[20:12:19] Using gulpfile

Теперь вносим изменения в файл index.html и сохраняем

Как это выглядело в Gulp 3

Создадим папку /app/assets/styles/ , в которой будут файлы .css для разработки

Напишем функцию, которая будет собирать все файлы .css из этой папки, обрабатывать их с помощью sass и соединять в один файл /app/temp/styles/style.css

Мы уже писали такую функцию выше, просто немного изменим её.

Добавим мониторинг файлов CSS gulp.watch( "./app/assets/styles/**/*.css", style);

Теперь как только мы отредактируем один из файлов стилей watch заметит это изменение, пропустит его через sass, соберет все файлы в один.

Зачем нужен SASS:

чтобы пользоваться css переменными. Создать переменную, которую потом вставлять в .css пропускать через sass compiler и когда вдруг везде нужно будет изменить значение этой переменной, например, на сайте изменится основной цвет, всё что нам нужно будет сделать - это поменять одну переменную в одном файле.

чтобы делать вложения в стилях (nested css)

чтобы использовать mixins

PostCSS

До этого Вы уже прочитали про препроцессор SASS, который наряду с LESS и Stylus является стандартом для многих проектов.

Я не пользуюсь ими, а предпочитаю более современный PostCSS, который имеет более модульную структуру, и соответственно более гибкий в настройке и быстрый

Подробнее про PostCSS Вы можете прочитать в статье PostCSS.

Советую разобраться с PostCSS и возвращаться в эту статью либо в одну из следующих, более продвинутых глав.

Я не стал размещать описание работы с PostCSS здесь, потому что его можно запускать не только с помощью Gulp

Видеоуроки Gulp

Видео много весят, поэтому я выделил для них отдельную страницу - Видеоуроки Gulp

Ошибки

SKIPPING OPTIONAL DEPENDENCY: fsevents

Ошибка при установке gulp. Вы выполняете

$ npm install gulp --save-dev

npm WARN heihei No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted (current: )

+ gulp@4.0.2
added 314 packages from 217 contributors and audited 6490 packages in 30.037s
found 0 vulnerabilities

Скорее всего Вы не инициализировали npm. Нужно выполнить

Ввести нужные данные (либо просто нажимать Enter), после чего создастся файл package.json и можно будет вернуться к установке gulp

Может быть вызвана, например, несуществующей переменной. Допустим Вы добавили цвет как переменную, но нигде её не задали.

Unexpected identifier

Если Вы запустили Gulp

И получили что-то похожее

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

at Module.load (internal/modules/cjs/loader.js:653:32)

at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

at Function.Module._load (internal/modules/cjs/loader.js:585:3)

at Module.require (internal/modules/cjs/loader.js:692:17)

at require (internal/modules/cjs/helpers.js:25:18)

at execute (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)

at Liftoff.handleArguments (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\index.js:201:24)

at Liftoff.execute (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\node_modules\liftoff\index.js:201:12)

Скорее всего Вы пытаетесь использовать синтаксис ES2015+ и не установили babel или он работает но с ошибкой.

Здесь два выхода - разобраться и настроить либо перейти к старому синтаксису с require

Did you forget to signal async completion?

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

Эту ошибку можно устранить несколькими способами. Я пользуюсь самым простым - в таске использую не анонимную функцию а называю функцию, например cb (от слова callback), а в конце таска вызваю её без аргументов:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted (current: )

Это предупреждение о несовместимости пакета fsevents с Windows, как Вы можете убедиться здесь fsevents нужен для работы с iOS поэтому можно просто проигнорировать.

Где-нибудь создать папку, к примеру к корне диска С, называем gulp, и в ней папка myproject. Главное, чтобы в пути к ней не было русских букв.

В окне команд пишем:

там нужно будет ответить на несколько вопросов:

это установка зависимостей пакетов, которые работают вместе с gulp. В нашей папке появилась папка _node_modules.

Устанавливаем проверку обновлений пакетов в gulp

Нужно установить проверку обновлений всех пакетов, которые мы наустанавливаем в галп:

Поэтому надо написать:

В нашей папке myproject надо создать такую структуру папок:

В корне создаем папки app и dist

Внутри app:

Не забыть создать файл index.html.

Создаем файл gulpfile.js в корневой папке.

Проверяем работу gulp. Открываем этот файл и пишем в него:

ОБЯЗАТЕЛЬНО ТОЧКУ С ЗАПЯТОЙ В КОНЦЕ!! Иначе не заработает.

Шаблон для создания любой задачи (task) в gulp:

Т.е. откуда брать файл, что с ним сделать и куда отгрузить.

РЕАЛЬНО ЖЕ в него пишем следующее, все с самого начала:

Заходим в папку app>sass и создаем там файл main.sass.

Пишем в него хотя бы что-нибудь, чтобы проверить работу:

Возвращаемся в файл gulpfile.js и пишем в него (добавляем строки):

Теперь в командной строке запускаем gulp sass .

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

Маски для создания путей для источника файлов, на примерах

Дополнительно

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

В файл main.sass в самое начало добавляем импорт и получаем:

В итоге этот фрагмент будет в начале того файла, куда импортируешь. То есть если в main.sass написать, то этот фрагмент будет в итоговом скомпилированном main.css.

Автоматическая компиляция файлов sass при сохранении

Используется метод watch. Синтаксис такой:

Чтобы выйти из этого режима слежения нужно нажать Cntrl+С ДВА РАЗА .

LiveReload

Останавливаем режим слежения (если запущен) Cntrl+С ДВА РАЗА и устанавливаем эту штуку:

Установить установили, а теперь нужно подключить его в gulpfile.js.

добавляем эту строку

то есть теперь начало в файле получается таким:

теперь надо написать таск (выполнение задачи) для браузер-синка:

Чтобы автоматически отражались не только css, но и html и js, нужно добавить пару строк в таск watch:

Создаем папку libs в папке app. Туда мы будем сваливать все какие-то библиотеки, jquery плагины и другие плагины.

Bower

Для установки новых библиотек лучше использовать Bower (используется для установки новых плагинов)

устанавливаем его npm i -g bower

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

В корневой папке myproject создаем файл .bowerrc (начинающийся с точки).

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

Теперь для примера установим два плагина, в командной строке пишем:

появятся две папки jquery и magnific-popup в папке app>libs.

Установить два пакета для сбора всех файлов js и минизации:

npm i gulp-concat gulp-uglifyjs --save-dev

После установки любой приблуды, надо не забывать подключать ее в файле gulpfile.js, поэтому добавляем там строки:

Создаем таск для этой утилиты:

Подключаем jquery в html.

В конце тега body добавляем строки:

т.е. общую сжатую библиотеку и ручной (common.js), он обычно не сжимается, т.к. весит немного.

В папке app>sass создаем файл libs.sass, куда будем сваливать все css библиотеки.

Устанавливаем утилиты, которые будут сжимать css и добавлять в название суффикс mini:

И опять после установки их нужно подключить в основном файле gulpfile.js. последние 2 строчки это они:

пишем таск для них:

Подключаем css стили в html документ:

Сваливаем готовое в папку dist

Для этого создаем таск

Для того, чтобы перестраховаться, лучше бы для начала очистить папку dist от прежних файлов, если там что-то было.

Для этого устанавливаем утилиту для удаления файлов, пишем в командной строке:

После успешной установки, ее надо подключить в файл gulpfile.js, как обычно:

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

Устанавливаем пакет для оптимизации изображений

Подключаем его в gulpfile.js

Пишем таск для них.

И вставляем вызов этого таск в таск build, т.е. добавляем

теперь при запуске таска build будут все эти таски выполняться последовательно, которые в него запихали.

Если изображений много, то надо установить кеш

потом подключаем его в начале файла gulpfile.js:

И немного модифицируем после этого таск img:

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

Поэтому надо написать новый таск для очистки кеша:

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

Автоматическое создание вендорных префиксов в gulp

Для этого сначала устанавливаем пакет:

Как всегда теперь подключаем его в начале файла.

И добавляем новый пайп в таск sass:

Резюме

Итоговое содержание файла gulpfile.js

Итоговое содержание файла package.json

Структура папок

п.с. статья построена на базе видосика канала webdesigner master:

Использование сборщика проектов Gulp значительно облегчает и ускоряет разработку веб-проектов.

Так же используя сборщики на выходе вы получаете минифицированные (css, js, html файлы) и адаптированные для разных браузеров файлы (css файлы).

Так же используя дополнительные модули Gulp, такие, как gulp-webp вы сможете конвертировать ваши .jpg/.jpg изображения в современный web формат .webp, что позволит ускорить загрузку ваших страниц.

Часть 1 – Установка Gulp

Для установки вам понадобится предварительно установленный Node.js, загрузить его можно по ссылке.

Далее запускаем установку через командную строку следующую команду:

Флаг --global устанавливает gulp для всей системы и вы можете использовать его в нескольких проектах.

Переходим к вашему проекту используя команду:

Далее вводим команду:

Так мы создадим файл package.json, этот файл содержит информацию о вашем проекте, зависимости, настройки модулей.

Устанавливаем зависимости gulp:

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

Часть 2 – Настройка Gulp

Создаем файл gulpfile.js

В этом файле мы описываем нужные нам задачи и прописываем все модули для дальнейшей работы.

Какие модули использует веб студия Atekla для разработки своих проектов:

gulp-autoprefixer
gulp-file-include
gulp-sass
gulp-uglify
gulp-htmlmin
gulp-webp
gulp-clone
browser-sync

За что отвечают модули?

Gulp-autoprefixer – собирает CSS файл с префиксами для различных браузеров, плюс добавляет правила для поддержки старых браузеров.

Gulp-file-include – позволяет подключать ваши html файлы как если бы вы работали с PHP

Gulp-sass – позволяет собирать CSS файлы если ваш проект написан с помощью SASS/SCSS

Gulp-uglify – минификация JS файлов

Gulp-htmlmin – минификация HTML файлов

Gulp-webp – конвертация JPG/PNG изображений в WEBP с настройкой качества изображения

Gulp-clone – позволяет сохранить исходное изображение JPG/PNG и перенести его в папку проекта для использования в браузерах без поддержки WEBP

Browser-sync – верстайте ваш проект без хостинга и использования MAMP.

Часть 3 - Создание файла gulpfile.js

Подключаем модули в файл gulpfile.js

Создаем пути для работы Gulp

Задача Webserver – создает локальный хостинг для верстки

Читайте также: