Отправить файлы по 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
с паролем 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.<anonymous> (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
Видеоуроки
Документация
Если остались вопросы - смело задавайте их в комментариях.
| Рекомендую наш хостинг beget.ru |
| Пишите на info@urn.su если Вы: |
| 1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык. |
| 2. Хотите разместить на сайте рекламу, подходящуюю по тематике. |
| 3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте |
| 4. Нашли на сайте ошибку, неточности, баг и т.д. ... ....... |
| 5. Статьи можно расшарить в соцсетях, нажав на иконку сети:
|