Отправить файлы по ftp с помощью Gulp

Введение

Основное преимущество сборщиков проектов это автоматизация. С помощью Gulp можно снять с себя необходимость ручной отправки файлов на хостинг.

Из этой статьи Вы узнаете как отправлять файлы по ftp. Сначала мы рассмотрим простой случай и потренируемся на локальном ftp сервере. Это полезно потому что на локальном сервере можно быстро читать логи и наглядно проконтролировать права доступа.

Затем отправим файлы на хостинг а также добавим watch для мониторинга изменений и мгновенной отправки после сохранения.

Копируем

В этом примере мы будем пользоваться пакетом vinyl-ftp

npm install vinyl-ftp --save-dev

npm WARN heihei@1.0.0 No description
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 {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 8 packages and audited 10766 packages in 5.832s
found 0 vulnerabilities

Напишем простую функцию, которая будет устанавливать соединение

const gulp = require('gulp') , ftp = require( 'vinyl-ftp' ); // Соединение с ftp function getConn() { console.log("getConn function is running!"); return ftp.create({ host: 'localhost', user: 'andreyolegovichru', pass: 'heihei.ru', }); } const globs = [ './app/index.html', ]; // Отправляем gulp.task('deploy', function() { console.log("ftp task is running!"); const conn = getConn() return gulp.src( globs, { base: '.', buffer: false } ) .pipe( conn.dest( '' ) ); } );

Протестируем на локальном ftp сервере.

На диске C: создадим папку heiheiru_ftp и в ней создадим подпапку app ¹

Установим Filezilla Server создадим пользователя andreyolegovichru

с паролем heiheiru.

Добавим в Shared folders папку heiheiru_ftp и нажмём ОК

$ gulp deploy

[16:59:28] Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js

[16:59:28] Starting 'deploy'...
ftp task is running!
getConn function is running!
[16:59:28] Finished 'deploy' after 76 ms

Файл index.html успешно скопирован в C:/heiheiru_ftp/app

Комментарии:

Так как мы будем копировать файл index.html который лежит у нас в папке app а манипуляции с base или с правами доступа мы отложили на потом чтобы не усложнять задачу.

Сейчас разберёмся с правами доступа.

Файл успешно скопирован, но если внести в него изменения и выполнить deploy снова мы получим ошибку

$ gulp deploy

[17:18:24] Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js
[17:18:24] Starting 'deploy'...
ftp task is running!
getConn function is running!
[17:18:24] 'deploy' errored after 70 ms
[17:18:24] Error: Permission denied
at makeError (C:\Users\ao\Desktop\Sites\heihei
/node_modules\ftp\lib\connection.js:1067:13)
at Parser. (C:\Users\ao\Desktop\Sites\heihei
\node_modules\ftp\lib\connection.js:113:25)
at Parser.emit (events.js:198:13)
at Parser.EventEmitter.emit (domain.js:466:23)
at Parser._write (C:\Users\ao\Desktop\Sites\heihei
\node_modules\ftp\lib\parser.js:59:10)
at doWrite (_stream_writable.js:415:12)
at writeOrBuffer (_stream_writable.js:399:5)
at Parser.Writable.write (_stream_writable.js:299:11)
at Socket.ondata (C:\Users\ao\Desktop\Sites\heihei
\node_modules\ftp\lib\connection.js:273:20)
at Socket.emit (events.js:198:13)

Ошибка вызвана тем, что у пользователя andreyolegovichru нет прав на перезапись файлов.

Откроем Filezilla Server и добавим больше прав.

Отправляем на удалённый хост

Теперь, когда мы уже научились работать с локальным ftp сервером ничего не мешает нам создать на хостинге ftp аккаунт и в gulpfile.js просто заменить хост.

host: 'andreyolegovich.ru',
user: 'user_test-gulp',
pass: 'heihei.ru',

На современных хостингах очень просто настроить доступ по ftp. Если Вы ещё только присматриваетесь какой хостинг выбрать - прочитайте мою статью Выбор хостинга для сайта

Изменить папку назначения

Если Вам нужно отправить по ftp файлы из папки app, но саму папку app Вы создавать не хотите, а, например, хотите послать всё в корневую директорию - тогда нужно изметь значение base:

return gulp.src( globs, { base: './app', buffer: false } )

В данном примере мы добавили в base /app и теперь начальная точка находится внутри app и на хостинге app уже создаваться не будет.

Копируем папку

Обычно нужно копировать больше файлов чем просто index.html

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

Предположим, что нужно оправить на хостинг файл index.html и содержимое папки temp

Изменим файл gulpfile.js а именно const globs

const globs = [ './app/temp/**/*.*', './app/index.html',

Копировать всё скопом хорошо в тестовых примерах. Для работы на крупными проектами я советую копировать нужные разделы по мере необходимости. Особенно это станет важно когда мы настроим watch

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

Мониторинг изменений и автоматическая отправка на хостинг файла index.html

Для выполнения этой задачи я воспользуюсь gulp.watch и series.

Про series Вы можете прочитать в моей статье Gulp Series

const gulp = require('gulp'),      ftp = require( 'vinyl-ftp' ),      { series } = require('gulp'); // Соединение с ftp function getConn() { console.log("HEIHEI: getConn function is running!"); return ftp.create({ host: 'heihei.ru', user: 'Mikka Hakkinen', pass: 'heihei', }); } const globs = [ './app/index.html', ]; function deploy(cb) { console.log('HEIHEI: deploy Task is running'); var conn = getConn() return gulp.src( globs, { base: './app', buffer: false } ) .pipe( conn.dest( '' ) ); cb(); } exports.deploy = deploy; function watchMessage (cb) { console.log('HEIHEI: watch saw something'); cb(); } function watchStartMessage (cb) { console.log('HEIHEI: watch started watching'); cb(); } function watchFile(cb) { gulp.watch("./app/index.html", series(watchMessage ,deploy)); cb(); } exports.watchFile = watchFile; exports.watchMessage = watchMessage; exports.watch = series(watchStartMessage ,watchFile);

$ gulp watch

[20:51:12] Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js
[20:51:12] Starting 'watch'...
[20:51:12] Starting 'watchStartMessage'...
HEIHEI: watch started watching
[20:51:12] Finished 'watchStartMessage' after 723 μs
[20:51:12] Starting 'watchFile'...
[20:51:12] Finished 'watchFile' after 3.63 ms
[20:51:12] Finished 'watch' after 7.1 ms

Внесём изменения в файл index.html и сохраним их

[20:53:14] Starting 'watchMessage'...
HEIHEI: watch saw something
[20:53:14] Finished 'watchMessage' after 349 μs
[20:53:14] Starting 'deploy'...
HEIHEI: deploy Task is running
HEIHEI: getConn function is running!
[20:53:14] Finished 'deploy' after 333 ms

Файл index.html успешно отправлен на мой хостинг beget.ru

Видеоуроки

Документация

gulpjs.com/docs/en/api/src

Поиск по сайту