GeekBrains
300*600
↑↑

↓↓
Флаг России Флаг Англии

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

Содержание статьи
Введение
Копируем папку
Добавляем логи (.on 'data')
Мониторим измненения и автоматически на хостинг
Видеоуроки
Документация

Введение

Основное преимущество сборщиков проектов это автоматизация. С помощью 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 1

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

Настройка Filezilla Server для тестирования Gulp ftp

с паролем heiheiru.

Настройка Filezilla Server для тестирования Gulp ftp

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

Настройка Filezilla Server для тестирования Gulp 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 и добавим больше прав.

Настройка Filezilla Server для тестирования Gulp ftp

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

Теперь, когда мы уже научились работать с локальным 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

Вы нашли то, что искали на сайте?

Или оцените по десятибальной шкале

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

Например: у нас есть статья про аэропорт Хельсинки и про аэропорт Риги но в выдаче по Риге всё равно статья про Хельсинки.

Если статья Вам помогла, нажимайте ДА. Так мы поймём, что переделывать её не нужно.

Занятно наблюдать в вебвизоре, как люди копируют текст, например вежливого отказа в трудоустройстве на английском но игнорируют кнопку ДА.

Сделаем поиск лучше!

Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@urn.su если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
5. Статьи можно расшарить в соцсетях, нажав на иконку сети:
Mebelaero
Росгосстрах [CPS] RU