Что такое gulp.js — введение

Step 4: Install Gulp Locally

You can now install Gulp in your project folder using this command:

This installs Gulp as a development dependency and the section of is updated accordingly. We’ll presume Gulp and all plugins are development dependencies for the remainder of this guide.

Alternative Deployment Options

Development dependencies are not installed when the environment variable is set to on your operating system. You would normally do this on your live server with the macOS/Linux command:

Or on Windows:

This guide presumes your assets will be compiled to the folder and committed to your Git repository or uploaded directly to the server. However, it may be preferable to build assets on the live server if you want to change the way they’re created — for example, HTML, CSS and JavaScript files being minified on production but not development environments. In that case, remove the switch when installing Gulp and its plugins. For example:

This sets Gulp as an application dependency in the section of . It will be installed when you enter and can be run wherever the project is deployed. You can remove the folder from your repository, since the files can be created on any platform when required.

Signature#

watch(globs,options,task)

Copy

Parameters

parameter	type	note
globs(required)	stringarray	to watch on the file system.
options	object	Detailed in below.
task	functionstring	A or composed task — generated by and .

Errors

When a non-string or array with any non-strings is passed as , throws an error with the message, «Non-string provided as watch path».

When a string or array is passed as , throws an error with the message, «watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)».

Options

name	type	default	note
ignoreInitial	boolean	true	If false, the task is called during instantiation as file paths are discovered. Use to trigger the task during startup.Note: This option is passed to chokidar but is defaulted to instead of .
delay	number	200	The millisecond delay between a file change and task execution. Allows for waiting on many changes before executing a task, e.g. find-and-replace on many files.
queue	boolean	true	When true and the task is already running, any file changes will queue a single task execution. Keeps long running tasks from overlapping.
events	stringarray		The events being watched to trigger task execution. Can be , , , , , , and/or . Additionally is available, which represents all events other than and .This option is passed directly to chokidar.
persistent	boolean	true	If false, the watcher will not keep the Node process running. Disabling this option is not recommended.This option is passed directly to chokidar.
ignored	arraystringRegExpfunction		Defines globs to be ignored. If a function is provided, it will be called twice per path — once with just the path, then with the path and the object of that file.This option is passed directly to chokidar.
followSymlinks	boolean	true	When true, changes to both symbolic links and the linked files trigger events. If false, only changes to the symbolic links trigger events.This option is passed directly to chokidar.
cwd	string		The directory that will be combined with any relative path to form an absolute path. Is ignored for absolute paths. Use to avoid combining with .This option is passed directly to chokidar.
disableGlobbing	boolean	false	If true, all are treated as literal path names, even if they have special characters.This option is passed directly to chokidar.
usePolling	boolean	false	When false, the watcher will use (or fsevents on Mac) for watching. If true, use polling instead — needed for successfully watching files over a network or other non-standard situations. Overrides the default.This option is passed directly to chokidar.
interval	number	100	Combine with . Interval of file system polling.This option is passed directly to chokidar.
binaryInterval	number	300	Combine with . Interval of file system polling for binary files.This option is passed directly to chokidar.
useFsEvents	boolean	true	When true, uses fsevents for watching if available. If explicitly set to true, supersedes the option. If set to false, automatically sets to true.This option is passed directly to chokidar.
alwaysStat	boolean	false	If true, always calls on changed files — will slow down file watcher. The object is only available if you are using the chokidar instance directly.This option is passed directly to chokidar.
depth	number		Indicates how many nested levels of directories will be watched.This option is passed directly to chokidar.
awaitWriteFinish	boolean	false	Do not use this option, use instead.This option is passed directly to chokidar.
ignorePermissionErrors	boolean	false	Set to true to watch files that don’t have read permissions. Then, if watching fails due to EPERM or EACCES errors, they will be skipped silently.This option is passed directly to chokidar.
atomic	number	100	Only active if and are false. Automatically filters out artifacts that occur from «atomic writes» by some editors. If a file is re-added within the specified milliseconds of being deleted, a change event — instead of unlink then add — will be emitted.This option is passed directly to chokidar.

Дополнительные полезные плагины для Gulp

Проект, что мы создали выше это самый простейший набор плагинов Gulp. Его функциональность можно значительно расширить, установив и настроив дополнительные плагины. Я составил список, которые сам использую в своих проектах.

Plumber — дает возможность продолжить работу gulp при ошибке в коде. На самом деле, если вы в коде (html, js, sass, css) сделаете ошибку gulp выдаст ее в консоли и прекратит свою работу. Вам необходимо будет исправить ошибку и вновь запустить gulp.

Sourcemaps — создает карту подключений файлов css и js. Обычно в подобных проектах файлы стилей и скриптов делят на несколько частей для удобства. Так вот, чтобы потом ориентироваться в каком файле и в какой строке находится та или иная запись как раз и нужна карта подключений. 

Tinypng — сжатие изображений. Работает по той же аналогии, что и imagemin, но сжимает значительно лучше.

SvgSprite — сборка svg-спрайта иконок. В последнее время я перешел с иконочных шрифтов на svg иконки. Чтобы уменьшить количество http запросов к серверу нужно собирать иконки в спрайты.

Rigger — объединяет html-файлы в один. Необходимо, когда вы разбиваете html-файлы на отдельные неизменяемые блоки, например, шапка сайта, футер и т.д.

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

Spritesmith — создание спрайтов картинок. Еще один плагин для сборки спрайтов, только в данном случае из иконок Png. Также использую его частенько, т.к. не всегда иконки в макете бывают в формате svg.

Rimraf — очистка папки dist. Бывает, что приходится очищать время от времени папку продакшена dist, т.к. в нем могут скопиться неиспользуемые файлы. Например, вы переименовали файл стилей в другое название, таким образом у вас в dist будут две копии — старая и новая.

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

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

Жду ваши комментарии ниже. Подписывайтесь на мой канал в телеграм. До встречи в следующих статьях!

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

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

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

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

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

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

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

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

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

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

Всё, что относится непосредственно к сайту положим в папку heiheiru/app

index.html положим в корень app а
.css файлы, картинки и скрипты мы положим в папки heiheiru/app/assets/styles
heiheiru/app/assets/images , heiheiru/app/assets/scripts

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

Signature#

dest(directory,options)

Copy

Parameters

parameter	type	note
directory(required)	stringfunction	The path of the output directory where files will be written. If a function is used, the function will be called with each Vinyl object and must return a string directory path.
options	object	Detailed in below.

Returns

A stream that can be used in the middle or at the end of a pipeline to create files on the file system.
Whenever a Vinyl object is passed through the stream, it writes the contents and other details out to the file system at the given directory. If the Vinyl object has a property, a symbolic link will be created instead of writing the contents. After the file is created, its to match the Vinyl object.

Whenever a file is created on the file system, the Vinyl object will be modified.

• The , , and properties will be updated to match the created file.
• The property will be updated to match the file on the file system.
• If the property is a stream, it will be reset so it can be read again.

Errors

When is an empty string, throws an error with the message, «Invalid dest() folder argument. Please specify a non-empty string or a function.»

When is not a string or function, throws an error with the message, «Invalid dest() folder argument. Please specify a non-empty string or a function.»

When is a function that returns an empty string or , emits an error with the message, «Invalid output folder».

Options

For options that accept a function, the passed function will be called with each Vinyl object and must return a value of another listed type.

name	type	default	note
cwd	stringfunction		The directory that will be combined with any relative path to form an absolute path. Is ignored for absolute paths. Use to avoid combining with .
mode	numberfunction	of the Vinyl object	The mode used when creating files. If not set and is missing, the process’ mode will be used instead.
dirMode	numberfunction		The mode used when creating directories. If not set, the process’ mode will be used.
overwrite	booleanfunction	true	When true, overwrites existing files with the same path.
append	booleanfunction	false	If true, adds contents to the end of the file, instead of replacing existing contents.
sourcemaps	booleanstringfunction	false	If true, writes inline sourcemaps to the output file. Specifying a path will write external at the given path.
relativeSymlinks	booleanfunction	false	When false, any symbolic links created will be absolute.Note: Ignored if a junction is being created, as they must be absolute.
useJunctions	booleanfunction	true	This option is only relevant on Windows and ignored elsewhere. When true, creates directory symbolic link as a junction. Detailed in below.

Настройка Node и Gulp

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

2.1 Настраиваем Node

Если ты уже пользовался npm’ом на хостинге и у тебя там уже стоит Node, то пол дела сделано и можешь сразу переходить к пункту 2.2.

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

Примерное содержимое файла :

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

Далее, заблаговременно подключившись к серверу по SSH, ты должен настроить Path, чтобы установленная вручную Node попала в директории запуска (это, кстати, вовсе не гарантирует, что процесс сайта будет видеть эту Node или вообще хоть что-то. Там своё окружение со своим Path. Его настроишь уже через PHP.).

Установи Gulp и его компоненты из директории, где лежит :

У тебя появится в этой директории папка , в которой будет всё что нужно для запуска Gulp.

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

2.2 Настраиваем Gulp под проект

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

Для этого создай файл рядом с файлом с примерным наполнением:

Я покажу на примере генерации только CSS, ты же можешь настроить Gulp как хочешь.
Подразумевается, что рядом с лежит папка , в которой полная структура всех SCSS файлов. Если что, то найти и поменять путь к SCSS файлам в не сложно, их всего два:

1. Место, куда смотрит таск генерации CSS
2. Место, куда смотрит Watcher

2.3 Проверка готовности инструментов

Если всё сделано правильно, то уже сейчас можно, подключившись по SSH, перейти в папку с и выполнить там:

При этом увидим какой-то дебаг от Gulp, либо предупреждения, которые тебе предстоит разрулить до перехода к следующему пункту. Сразу скажу, что проблема может быть в конфигурировании переменной Path для текущего подключенного пользователя, в ней обязательно должна быть папка от Node и папка , которую должен устанавливать в Path сам NPM.

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

What’s new in 4.0?!

• The task system was rewritten from the ground-up, allowing task composition using and methods.
• The watcher was updated, now using chokidar (no more need for gulp-watch!), with feature parity to our task system.
• First-class support was added for incremental builds using .
• A method was exposed to create symlinks instead of copying files.
• Built-in support for sourcemaps was added — the gulp-sourcemaps plugin is no longer necessary!
• Task registration of exported functions — using node or ES exports — is now recommended.
• Custom registries were designed, allowing for shared tasks or augmented functionality.
• Stream implementations were improved, allowing for better conditional and phased builds.

What’s new in 4.0?!

• The task system was rewritten from the ground-up, allowing task composition using and methods
• The watcher was updated, now using chokidar (no more need for gulp-watch!), with feature parity to our task system
• First-class support was added for incremental builds using
• A method was exposed to create symlinks instead of copying files
• Built-in support for sourcemaps was added — the gulp-sourcemaps plugin is no longer necessary!
• Task registration of exported functions — using node or ES exports — is now recommended
• Custom registries were designed, allowing for shared tasks or augmented functionality
• Stream implementations were improved, allowing for better conditional and phased builds

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

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

export NODE_ENV=production

В Windows:

set NODE_ENV=production

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

Чтобы использовать ресурсы на работающем сервере, изменить способ их создания. Например, файлы HTML, CSS и JavaScript сжимаются при использовании, но не в средах разработки. В этом случае удалите —save-dev при установке Gulp и его плагинов. Например:

npm install gulp

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

Step 6: Automate Tasks

We’ve been running one task at a time. We can run them all in one command by exporting a task in :

The method runs tasks at the same time. It can be combined with to create complex dependency chains. In this example, , , and are run in parallel, but each of those may have sequences of dependencies — including the task.

Save and enter at the command line to execute all tasks.

Is this too much hard work? Gulp offers a method that can monitor source files and run an appropriate task whenever a file is changed. It’s passed a set of files/folders to monitor, any options (unused here), and the task function to run (optionally within and/or methods).

Let’s export a new task at the end of :

Gulp needs to know when a task function has completed. This is normally handled by returning a Gulp stream, but can optionally be a JavaScript Promise, event emitter, observable, child process, or a callback. Here, we’re using a callback named to indicate that all tasks have been configured.

Rather than running immediately, let’s add a default task that can be executed by running without further arguments:

Save and enter at the command line. Your images, HTML, CSS and JavaScript will be processed, then Gulp will remain active watching for updates and re-running tasks as necessary. Hit Ctrl/Cmd + C to abort monitoring and return to the command line.

Современная сборка 2020 для frontend. Gulp4 +10

• 17.02.20 05:04

•
Den-V
•
#484714
•
Хабрахабр

•
Tutorial

•

•

4900

JavaScript, Node.JS, Разработка веб-сайтов, CSS, HTML

Начало

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

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

Установка

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

nodejs

Вы уже установили.

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

О том как установить более старую версию 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

gulp -v

CLI version: 2.2.0
Local version: Unknown

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

Теперь нужно перейти в директорию, в которой Вы планируете работать. Я буду
делать сайт www.HeiHei.ru поэтому перехожу в директорию

$ cd /c/Users/ao/Desktop/Sites/heihei

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

$ npm install gulp —save-dev

vi package.json

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

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

Старые версии
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 а уже потом установить другую — сделать
это можно командой uninstall

npm uninstall gulp

3 Подготовка PHP для работы с Gulp

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

Алгоритм следующий:

• Нужно при запросе на включение из админпанели запустить процесс Gulp в фоне и сохранить его PID где-нибудь.
• При запросе на выключение нужно проверить PID и убить работающий под ним процесс Gulp.
• При запросе статистики можно проверить существование работающего по текущему PID процесса Gulp и вернуть результат.
• Весь output фонового процесса Gulp стоит сохранять в файл и при желании можно также настроить отправку содержимого этого файла в админпанель по запросу (В статье не рассматривается этот пункт, можешь реализовать его в виде домашнего задания).

Вроде просто, теперь, какие средства PHP тебе понадобятся.

Самое первое и простое, это класс где-то из на сайте PHP. Я его немного модифицировал и использую вот такой:

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

Вроде всё лаконично и понятно. Осталось привязать это всё к админпанели.

Первый запуск Gulp

Менеджер задач — само слово говорит за себя, это программа для управления задачами. В Gulp все задачи прописываются в одном единственном файле . Первоначально этого файла не существует и его нужно создать самостоятельно, вручную:

Затем в нем пропишем первую задачу. Все задачи деляться на два неравнозначных типа: задача по умолчанию (default task) и именованные задачи (named tasks). Разница между ними в том, что задача по умолчанию имеет имя , которое можно и не указывать. Кроме того, задача по умолчанию запускается в консоли всего одной командой:

В то время как именованная задача (named task) может иметь произвольное имя. Запуск такой задачи в консоли выполняется с указанием имени конкретной задачи:

Еще один важный момент заключается в том, что этот менеджер задач является потоковым. Что это значит? Не знаю, получиться ли у меня достаточно точно объяснить данный вопрос, но вот линуксоиды, хорошо знакомые с командной строкой, меня должны понять. В консоли Linux (Unix) есть такое понятие, как pipe.

Например, простая команда:

… выполняет следующее: результат команды перенаправляется для обработки в программу . Редактор автоматически открывается в консоли с уже готовым для чтения текстом внутри себя.

Чисто схематично такой пример можно усложнить и представить в таком виде:

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

Принцип работы Gulp точно такой же. Только вместо программ в нем используются плагины (я не забыл сказать, что он имеет модульную структуру?):

Отлично! С теорией закончили и можно снова возвращаться к практике, к нашему файлу настроек . Откроем его и пропишем в нем такие строки:

Первая строка создает переменную , в которую помещается сам Gulp. Это необходимо для Node.js, который будет читать файл и работать с Gulp в виде переменной .

Вторая строка, начинающаяся с — это не что иное, как задача. Именно так создаются задачи в этом менеджере. Здесь — это имя задачи (в данном случае это задача по умолчанию, как вы помните). Функция имеет в своем теле неограниченное количество инструкций. Так как мы еще не умеем работать с плагинами под Gulp, то в качестве инструкции пропишем вывод в консоль обычной текстовой строки — .

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

Вот это да! А что означают все эти строки в консоли? Означают они только хорошее! Строка говорит о том, что Gulp для своей работы воспользовался файлом настроек по указанному пути. Затем было запущено выполнение задачи с именем — . Результатом выполнения этой задачи был вывод в консоль строки — . И задача с именем благополучно завершилась — , причем на ее выполнение ушло 169 миллисекунд.

Можно поздравить самих себя — мы только что создали и запустили на выполнение свою первую задачу под Gulp!

Обновление Gulp v4

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

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

Глобальная установка Gulp v4

Для начала нужно удалить текущий глобальный пакет Gulp перед установкой новой версии.

Знак $ означает, что команды надо выполнять в консоли и писать его не надо.

Эти команды удалят текущую версию и установят v4 из ветки gulp-cli 4.0

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

Чтобы проверить какая версия установлена глобально, запустите следующую команду:

Если Вы откроете консоль в папке проекта, то под строкой CLI version будет указана локальная версия.

Локальная установка gulp 4

После глобальной установки, нужно установить gulp для локального проекта.

Подобно установке глобального пакета, удаляем локальную версию и устанавливаем v4.

Если в вашем gulp перечислен под , замените флаг на .

Теперь Вы имеете установленный и готовый к работе gulp v4. Это можно проверить запустив команду

Обновление gulpfile

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

Возможно, Вы увидите что-то подобное:

Это говорит нам о том, что ошибка вызвана в gulpfile.js на строке 418, символ 6.

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

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

Таск был вызван перед таском

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

Поскольку Вы открыли круглую скобку перед функцией, не забудьте её закрыть после функции.

Убедитесь, что Вы обновили остальную часть файла по этому примеру.

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

Асинхронное завершение

Ошибка следующая:

Эта ошибка возникает при использовании анонимной функции (та, которая вызывается после в примере).

Решается передачей параметра в функцию и запуска его после выполнения задачи.

Например:

Gulp watcher с событиями change и пути к файлам

В третьей версии Gulp, watcher возвращал путь измененного файла внутри функции в которой был вызван. Например, на выходе для примера ниже это будет объект с директорией измененного файла и событием (например, changed).

Watcher может запускать некоторые стандартные функции, но если нужен доступ к имени файла, нужно переписать функцию.