Send files via ftp with Gulp

Introduction

The main advantage of project builders is automation. With Gulp , you can remove the need to manually send files to the hosting.

In this article, you will learn how to send files via ftp. First, we will consider a simple case and practice on a local ftp server. This is useful because you can quickly read logs on a local server and visually control access rights.

Then we will send the files to the hosting and also add a watch to monitor changes and instantly send them after saving.

Install vinyl-ftp

In this example, we will use the vinyl-ftp package

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

Function that opens connection

Let's write a simple function that will establish a connection

const gulp = require('gulp') , ftp = require( 'vinyl-ftp' ); // FTP Connection function getConn() { console.log("getConn function is running!"); return ftp.create({ host: 'localhost', user: 'aredel', pass: 'heihei.ru', }); } const globs = [ './app/index.html', ]; // Sending gulp.task('deploy', function() ;{ console.log("ftp task is running!"); var conn = getConn() return gulp.src( globs, { base: '.', buffer: false } ) .pipe( conn.dest( '' ) ); ;} );

Test it Against Local FTP

We will test it on a local ftp server.

On disk C: create the heiheiru_ftp folder and create the app subfolder in it ¹

Let's install Filezilla Server and create the user aredel

Set password to heiheiru.

Add the heiheiru_ftp folder to Shared folders and click OK

$ 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 file is copied to C:/heiheiru_ftp/app

Comments:

Now we can copy the index.html file from the app directory.

We did not cover any manipulations with base or with access rights.

It was done this way to keep current task easier to usderstand we will think about it later.

Now it is time to deal with access rights.

The file was copied successfully, but if you make changes to it and perform deploy again, you will get an error

$ 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)

The error is caused by the fact that the aredel user does not have rights sufficient to overwrite files.

Open Filezilla Server and add more rights.

Send files to remote host

Now that we have already learned how to work with a local ftp server, nothing prevents us from creating an ftp account on the hosting and in gulpfile.js just replace the host.

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

It is very easy to set up ftp access on modern hosting services.

If you are looking for a hosting to choose - you can find some hints in my article Choosing a hosting for a website

Change destination folder

If you need to send files from the app folder via ftp, but the app folder itself You don't want to create, but, for example, you want to send everything to the root directory - then you need to change the base value:

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

In this example, we added to the base /app and now the starting point is located inside the app and the app will not be created on the hosting.

Copy Directory

Usually you need to copy more files than just index.html

To learn how to copy folders and monitor logs, study my article - How to copy a folder using Gulp

Let's assume that you need to send a file to the hosting index.html and the contents of the temp folder

Let's change the gulpfile.js - const globs

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

Copying everything together is good in test examples. For working on large projects, I advise you to copy the necessary sections as needed.

This will become especially important when we configure watch

Our plan for the next lesson is to set up file monitoring .html and. css, so that after processing by preprocessors, the files are automatically uploaded to the hosting.

Monitoring changes and automatically sending an index.html file to the hosting

To acomplish this task we will use gulp.watch and series .

There is a separate article about Gulp Series

const gulp = require('gulp'), ftp = require( 'vinyl-ftp' ), { series } = require('gulp'); // FTP Connection 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

Change index.html and save them.

[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 is sucessfully sent to my hosting beget.com

Specifications

gulpjs.com/docs/en/api/src