Gulp-rsync для Windows 10

Рассмотрим такой инструмент для web-разработки как gulp-rsync. С его помощью будет происходить моментальная загрузка сайта на хостинг и синхронизация файлов.

Установка gulp-rsync в проект

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

npm i gulp-rsync --save-dev

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

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

const { src, dest, watch, parallel, series } = require("gulp");
const remoteSynchronization = require("gulp-rsync");

function rs() {
    return gulp.src("site/**")
        .pipe(remoteSynchronization({
            root: "site/**",
            hostname: "yourLogin@yourIp",
            destination: "sitePath",
            port: 25212,
            include: ["*.htaccess"],
            exclude: ["**/Thumbs.db", "**/*.DS_Store"],
            recursive: true,
            archive: true,
            silent: false,
            compress: true
        }))
}

exports.default = series(HTML, SASS, scripts, myServer);

exports.deploy = series(
    parallel(HTML, SASS, scripts),
    rs
);

• 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. Для этого введём команду:

mkdir -p ~/.ssh

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

chmod 700 ~/.ssh

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

cd ~/.ssh

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

ssh-keygen

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

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

scp -p ~/.ssh/id_rsa.pub логин@IP-адрес_сервера:~

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

Заходим по SSH:

ssh логин@IP-адрес_сервера

Вводите пароль.

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

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

mkdir -p ~/.ssh

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

chmod 700 ~/.ssh

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

cat id_rsa.pub >> ~/.ssh/authorized_keys

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

chmod 600 ~/.ssh/authorized_keys

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

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

rm -f ~/id_rsa.pub

Завершаем сессию.

logout

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

Запустим ssh-agent.

eval `ssh-agent -s`

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

ssh-add ~/.ssh/id_rsa

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

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

gulp deploy 

Статьи про Gulp

• Знакомство с Gulp (1 часть).
• Использование SASS в Gulp проекте (2 часть).
• Автоматическое обновление страницы в Gulp (3 часть).
• Babel для Gulp (4 часть).
• Gulp-rsync (5 часть — текущая).