Всех приветствую! Сегодня мы рассмотрим настройку Gulp-проекта для быстрого деплоя изменённых файлов на рабочий хостинг или сервер в системе MacOS и Windows на примере реального сайта. Научимся создавать публичные SSH ключи для быстрого доступа к серверу по SSH и настроим подсистему Ubuntu в Windows 10 для работы с rsync.
Внимание! Данный материал требует установленных инструментов Node.js и Gulp.
Если у вас возникли вопросы или проблемы, обратитесь к руководству Gulp для самых маленьких, в котором подробно объясняется, что такое Gulp и как с ним работать.
1. Настройка gulp-rsync в MacOS и Linux
1.1 Настройка Gulp таска
Настройка gulp-rsync в системах MacOS и Linux довольно проста и заключается в выполнении нескольких несложных инструкций.
Для начала убедитесь, что у вас установлена последняя стабильная версия Node.js и установлен gulp глобально.
Подключите к вашему Gulp-проекту rsync:
npm i gulp-rsync gulp --save-dev
И создайте новый таск "deploy"
var gulp = require('gulp'), rsync = require('gulp-rsync'); gulp.task('deploy', function() { return gulp.src('yousite/**') .pipe(rsync({ root: 'yousite/', hostname: 'sshusername@yousite.com', destination: 'yousite/public_html/', // include: ['*.htaccess'], // Includes files to deploy exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy recursive: true, archive: true, silent: false, compress: true })); });
1.2 Настройка SSH Аутентификации по открытому ключу
Генерация ключа на локальном компьютере:
Создайте директорию для SSH, в том случае, если она ещё не создана (знак доллара копировать не нужно):
$ mkdir -p ~/.ssh $ chmod 700 ~/.ssh
Зайдите в созданную папку и сгенерируйте ключ (на все вопросы - жмём Enter):
$ cd ~/.ssh $ ssh-keygen
Скопируйте получившийся ключ id_rsa.pub на ваш хостинг или сервер:
$ scp -p id_rsa.pub sshusername@yousite.com:~
Подключитесь к удалённому серверу для внесения нового ключа в authorized_keys:
$ ssh sshusername@yousite.com Password:
Если директория ещё не существует, создайте её и установите соответствующие права:
RemoteServer~$ mkdir -p ~/.ssh RemoteServer~$ chmod 700 ~/.ssh
Скопируйте сгенерированный ключ в специальный файл доступа 'authorized_keys' и установите на него безопасные права:
RemoteServer~$ cat id_rsa.pub >> ~/.ssh/authorized_keys RemoteServer~$ chmod 600 ~/.ssh/authorized_keys
Удалите скопированный в корень вашего пользователя ключ, который уже добавили в общий файл и завершите вашу сессию командой logout:
RemoteServer~$ rm -f ~/id_rsa.pub RemoteServer~$ logout
Далее нам остаётся только добавить закрытый ключ в агент аутентификации на локальном компьютере:
$ ssh-add
Если вы не получили сообщения вида "Identity added: /home/user/.ssh/id_rsa (/home/user/.ssh/id_rsa)", а получили оведомление вроде такого: "Could not open a connection to your authentication agent.", то следует запустить агента командой eval:
$ eval `ssh-agent -s`
И заново запустите ssh-add. Теперь вы можете пользоваться SSH на вашем компьютере, а в том числе и rsync, который использует SSH без авторизации в автоматическом режиме. Попробуйте подключиться снова к вашему серверу по SSH и убедитесь, что от вас не требуется ввести пароль. В противном случае, если пароль всё-таки требуется ввести, повторите процедуру получения SSH ключа заново.
2. Настройка gulp-rsync в Windows
2.1 Установка и настройка подсистемы Linux в Windows
Обратите внимание, что подсистема Linux, необходимая для работы rsync доступна только в Windows 10.
Для установки подсистемы Linux в Windows 10 откройте "Параметры Windows" > "Обновление и безопасность" > "Для разработчиков".

И выберие опцию "Режим разработчика":

Далее переходим в Панель управления, выбираем пункт "Программы и компоненты", на панели слева выбираем "Включение или отключение компонентов Windows".
В новом окне устанавливаем чекбокс рядом с "Подсистема Windows для Linux":

После перезагрузки компьютера откройте окно PowerShell от имени администратора и выполните следующую команду:
$ Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
Теперь мы можем работать с файловой системой нашего проекта через bash.
2.2 Установка в подсистеме Linux Node.js последнего стабильного релиза
Далее установим свежий стабильный Node.js и Gulp. Откройте Командную строку или PowerShell, введите команду bash и установите:
$ cd ~ $ curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.sh
Здесь _6.x - первая цифра последнего стабильного релиза. Её можно узнать на сайте Nodejs.
Далее выполним команду:
$ sudo bash nodesource_setup.sh
И установим Node.js:
$ sudo apt-get install nodejs
После этого установите Gulp глобально в вашей Linux подсистеме ($ npm i -g gulp) и установите все пакеты проекта ($ npm i), который мы подготовили ранее.
Премиум уроки от WebDesign Master
Другие уроки по теме «Инструменты»
- Gulp include на стороне сервера Browsersync + Build
- OptimizedHTML 5: Важные обновления стартера для JS-разработки
- Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
- Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)
- PageSpeed Insights - Оптимизация (обновление)
- October CMS - Первое знакомство