Введение | |
Копируем папку | |
Добавляем логи (.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, так, чтобы после обработки
препроцессорами файлы автоматичеси заливались на хостинг.
Для выполнения этой задачи я воспользуюсь 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. Статьи можно расшарить в соцсетях, нажав на иконку сети:
|