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

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

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 можно загрузить для Windows, macOS и Linux с nodejs.org/download/ . Доступны различные варианты платформы для установки из бинарных файлов, модульных сборщиков и Docker-образов.

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

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

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

Примечание: модули Node.js можно устанавливать глобально, чтобы они были доступны во всей ОС. Но большинство пользователей не будут иметь права на запись в глобальные библиотеки, если у команд npm не будет префикса sudo . Существует несколько вариантов, как исправить разрешения npm . Но можно изменить каталог по умолчанию. Например, в Ubuntu/Debian:

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

Шаг 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 или загружены непосредственно на сервер.

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

Читайте также:  Крепление пластиковых окон в деревянном доме

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

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

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

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

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

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

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

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

Чтобы найти нужные плагины, используйте библиотеку Gulp на gulpjs.com/plugins/ , на npmjs.com или используя поисковую систему Google.

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

  • src (folder) — для создания потока из файлов в исходной папке;
  • dest (folder) — для вывода потока в виде файлов в целевую папку сборки.

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

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

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

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

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

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

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

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

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

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

Задание для HTML

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

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

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

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

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

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

Задание для JavaScript

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

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

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

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

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

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

Функция sourcemap.init() вызывается до преобразования кода, а sourcemaps.write() — после завершения.

Добавьте файлы 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 требуется собственный набор плагинов:

  • postcss-assets – предназначен для управления ресурсами. Он позволяет использовать такие свойства, как background: resolve (‘image.png’); разрешить пути к файлам или к background: inline (‘image.png’); встроить изображения с закодированными данными.
  • autoprefixer – предназначен для автоматического добавления вендорных префиксов в свойства CSS.
  • css-mqpacker – для упаковки нескольких ссылок на один и тот же медиа запрос CSS в одно правило.
  • cssnano – для минификации кода CSS.

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

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

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

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

Читайте также:  Основные преимущества каркасного бассейна

При этом .on(‘error’, sass.logError) гарантирует, что Sass выводит синтаксические ошибки на консоль, не останавливая работу Gulp.

Сохраните файл, добавьте файлы 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-rsync для Windows 10

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

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

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

  • root — выбор папки для деплоя
  • hostname — ваш SSH-логин @ ip или адрес вашего сайта (например, user2583@sitename.ru)
  • destination — выбор папки на хостинге, куда будет загружаться сайт
  • port — эта строчка нужна лишь в том случае, если для SSH доступа нужен нестандартный порт (например, 25212)
  • include — какие файлы включать для переноса на хостинг
  • exclude — какие файлы не включать
  • recursive: true — рекурсивно передавать все файлы и каталоги
  • archive: true — режим архива
  • silent: false — отключение ведения журнала
  • compress: true — сжатие данных во время передачи

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

Первое с чего стоит начать, это узнать поддерживает ли хостинг SSH доступ . Далее нужно включить его самому или попросить техподдержку хостинга включить доступ по SSH.

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

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

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

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

Создадим папку для хранения ключей доступа .ssh . Для этого введём команду

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

Перейдём в папку .ssh

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

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

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

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

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

Создадим папку .ssh

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

Добавим наш ключ в authorized_keys .

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

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

Теперь удалим публичный ключ на хостинге, т.к. мы его добавили в файл authorized_keys .

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

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

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

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

Статьи про Gulp

  1. Знакомство с Gulp (1 часть).
  2. Использование SASS в Gulp проекте (2 часть).
  3. Автоматическое обновление страницы в Gulp (3 часть). для Gulp (4 часть).
  4. Gulp-rsync (5 часть — текущая).
Читайте также:  Что такое прагматичность Блог Викиум
English Russian
Root Корень
Destination Пункт назначения
Include Включать
Exclude Исключать
Silent Бесшумный
SSH (Secure SHell) Защищённая оболочка
Bash (Bourne Again SHell) ‘Возрождённый’ shell

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

Источник

Настройка Gulp v4 в 2020 году

Настройка Gulp v4 в 2020 году

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

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

Так же используя дополнительные модули Gulp, такие, как gulp-webp вы сможете конвертировать ваши .jpg/.png изображения в современный 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 – создает локальный хостинг для верстки

Источник



How To Install Gulp On Windows 10

Installing Gulp for the first time can be tricky, this tutorial will guide you through every step of the installation. The steps below are for the installation of Gulp on a Windows 10 PC. If you have any issues installing Gulp, enter a full description of the issue in the comments section at the bottom of this page.

#1 Install NPM ( Node.js )

    the 64 bits version of NPM
  1. Install it anywhere you want, by default: C:\Program Files\nodejs
  2. On your computer go to Control Panel -> System -> Advanced system settings -> Environment Variables
  3. Select PATH and choose to edit it.
  4. If the PATH variable is empty, change it to this ( replacing with your username for your windows account ): C:\Users\\AppData\Roaming\npm;C:\Program Files\nodejs
    If the PATH variable already contains C:\Users\\AppData\Roaming\npm , append the following right after: ;C:\Program Files\nodejs
  5. Open your file explorer and navigate to C:\Users\\AppData\Roaming You will notice that there is no /npm/ folder, simply create the folder by right clicking and selecting “add new folder” then name it “npm”
  6. Restart your command line or open one by clicking search at the bottom and typing in “cmd”, you can check if NPM has been successfully installed by running npm -v , This should return a version number

#2 Create your gulpfile.js

A Javascript file is required to run gulp tasks as they will need to be configured.

Create a file named gulpfile.js in the folder which you would like to use Gulp and add the following:

// Require Gulp into file and define the variable
var gulp = require(‘gulp’);

// Run the example task, if installed correctly and «gulp talktome» is ran, «Hello From Zestcode» should be printed in the logs
gulp.task(‘talktome’, function() <
console.log(‘Hello From Zestcode’);
>);

#3 Install Gulp

To install Gulp, open the terminal in the same directory you created the gulpfile.js file and run npm i gulp —save-dev , once it has finished running type gulp talktome in to the command line. Hello From Zestcode should appear in the terminal. If it does, congratulations! You have successfully installed NPM & Gulp.

#4 Finding & Installing Custom Packages

Now you have Gulp running and working in your folder, you can begin to look at installing some custom packages to create some task management functions such as:

Источник