Send only modified files using Gulp 4

Introduction

If you are developing on a local computer and working with .html or .php files, or in general with any files that you need edit and then send to the hosting, then you probably thought about automating this process.

Since you are reading this article, then you have chosen as an automation tool Gulp

Having learned the basics of Gulp, you most likely already know how to copy folders and files from one directory to another. Can keep track of changes files using gulp.watch and you can even set up automatic sending of files to hosting

If you missed any of this, it is easy to catch up with the help of these articles:

«How to copy a folder using Gulp»

«How to send files via ftp using Gulp»

«Gulp series»

gulp.watch

Armed with this knowledge, you can try to customize your work environment. But suddenly it turns out that there may be thousands of files in a project, and not just one in online courses.

Copy them even from a folder it seems like a redundant action to a folder, and ftp is so completely pointless.

You need to copy only the file that was changed, and not everything in a row. Finding a solution usually leads to the gulp-changed plugin, only this method is not suitable for everyone.

The fact is that gulp-changed compares two SRC and DEST directories, i.e. You always need having a double number of files, which in itself is not such a problem - there is almost always a version developer and redesigned distribution. The problem will be sending via ftp - you need to monitor the folder destination and extract from there a freshly recorded file.

At the moment, I think it’s easier to intercept the modified file at the stage of the first gulp.watch and work with it in a stream using .on('changed')

Solution

As an example, we will monitor the app directory and all the .php files in it.

Let's create a regular gulp.task watch inside which we will run gulp.watch but not simple but with

.on('change' ,function(path, stats))

We will send the result at once to two gulp.dest - one will be the ./dist folder, in which we will store everything processed files. The second gulp.dest will be a special ./preFtp folder.

We will monitor this folder with a separate gulp.watch and everything that gets there will be immediately sent to the hosting using vinyl-ftp.

After sending to the hosting, we will clear the folder using del

Gulpfile.js

In this example, we will use vinyl-ftp, del packages and we will use series

npm install vinyl-ftp --save-dev
npm install gulp del --save-dev

const gulp = require('gulp'), { series } = require('gulp'), ftp = require('vinyl-ftp'), del = require('del'); function getConn() { console.log("ANDREI: getConn function is running!"); return ftp.create({ host: 'heihei.ru', user: 'andreyolegovich', pass: 'password', }); } const globs = [ './preFtp/**/*.*', ]; function deploy(cb) { console.log('ANDREI: deploy Task is running'); var conn = getConn(); return gulp.src( globs, { base: './preFtp', buffer: false } ) .pipe(conn.dest( '' ) ); cb(); } exports.deploy = deploy; function cleanPreFtp() { console.log('ANDREI: cleanPreFtp is running') return del('./preFtp/**/*.*'); } exports.cleanPreFtp = cleanPreFtp; function watchPreFtp (cb) { console.log('ANDREI: watch saw something in PreFtp folder'); cb(); } gulp.task('watch', function() { gulp.watch("./app/**/*.php").on('change', function(path, stats) { console.log('Changes detected in app/ file "' + path + '", ' + stats); gulp.src(path, { base: './app', buffer: false }) .pipe(gulp.dest('./dist')) .pipe(gulp.dest('./preFtp')) }); gulp.watch("./preFtp/**/*.*", series(watchPreFtp,deploy,cleanPreFtp)); });

Unresolved issues

deploy is launched twice because the folder is being cleaned up, which is also a change. As a result, to the server nothing is sent - it seems to be not scary, but an extra connection is useless.

It’s not completely clear how function(path, stats) works, but this is the cornerstone of the whole solution.