Vinyl FTP for Gulp configuration

Question

I'm using Gulp to generate CSS from LESS-CSS on file save. I want the css file to be uploaded to the server immediately, so I'm experimenting with Vinyl-FTP. I'm a newbie at NPM/NodeJS/Gulp/JavaScript, so I need some help.

In my gulpfile.js I have included this code (hiding of course host, user and password):

// Vinyl FTP 
gulp.task( 'deploy', function () {

    var conn = ftp.create( {
        host:     'ftp-server',
        user:     'user',
        password: 'password',
        parallel: 10,
        log:      gutil.log
    } );

    var globs = [
        '../site/templates/templatename/css/bootstrap.min.css'
    ];


    return gulp.src( globs, { base: '.', buffer: false } )
        .pipe( conn.newer( '/public_html/dev2/templates/templatename/css' ) ) 
        .pipe( conn.dest( '/public_html/dev2/templates/templatename/css' ) );

} );

I want the bootstrap.min.css file uploaded each time I hit 'save'. The file is located at ../site/templates/templatename/css/bootstrap.min.css relative to my gulp directory. I want it uploaded to my development site which is located at /public_html/dev2/templates/templatename/css on the server (yes, this is Joomla).

Apparently, I'm using the wrong path, because this is what it churns out:

    [14:44:21] Using gulpfile /mnt/e/Sites/successfulspeakernow.com/gulp/gulpfile.js
[14:44:21] Starting 'less'...
[14:44:21] Finished 'less' after 20 ms
[14:44:21] Starting 'watch'...
[14:44:21] Finished 'watch' after 267 ms
[14:44:21] Starting 'deploy'...
[14:44:21] CONN 
[14:44:23] READY
[14:44:23] MLSD  /public_html/dev2/templates/templatename/site/templates/templatename/css
[14:44:23] MLSD  /public_html/dev2/templates/templatename/site/templates/templatename
[14:44:23] MLSD  /public_html/dev2/templates/templatename/site/templates
[14:44:23] MLSD  /public_html/dev2/templates/templatename/site
[14:44:23] MLSD  /public_html/dev2/templates/templatename
[14:44:23] MLSD  /public_html/dev2/templates
[14:44:23] MKDIR /public_html/dev2/templates/templatename/site
[14:44:23] MKDIR /public_html/dev2/templates/templatename/site/templates
[14:44:23] MKDIR /public_html/dev2/templates/templatename/site/templates/templatename
[14:44:23] MKDIR /public_html/dev2/templates/templatename/site/templates/templatename/css
[14:44:23] PUT   /public_html/dev2/templates/templatename/site/templates/templatename/css/bootstrap.min.css
[14:44:23] UP     37% /public_html/dev2/templates/templatename/site/templates/templatename/css/bootstrap.min.css
[14:44:23] UP     74% /public_html/dev2/templates/templatename/site/templates/templatename/css/bootstrap.min.css
[14:44:23] UP    100% /public_html/dev2/templates/templatename/site/templates/templatename/css/bootstrap.min.css
[14:44:23] Finished 'deploy' after 1.86 s
[14:44:23] Starting 'default'...
[14:44:23] Finished 'default' after 8.9 μs
[14:44:23] DISC

and when I go there with my FTP program, I find this:

/public_html/dev2/templates/templatename/site/templates/templatename/css/bootstrap.min.css

Can you explain what to adjust so the bootstrap.min.css file gets uploaded to the right directory on the server?

Thanx,

Thom

score 1 · Answer 1 · answered Jun 08 '17 at 20:55

I had the same problem. Vinylftp creates source folder structure in destination folder. To avoid that problem, just change destination to root of your webserver. My code is little bit different, but it shows where is the problem is.

var gulp = require('gulp');
var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );

/** Configuration **/
var user = 'username';
var password = 'password';
var host = 'hostname';  
var port = 21;  
var localFilesGlob = ['public_html/templates/protostar/css/template.css'];  
var remoteFolder = ''; // <- HERE MUST BE AN EMPTY STRING TO POINT THE VINYLFTP TO ROOT


function getFtpConnection() {  
    return ftp.create({
        host: host,
        port: port,
        user: user,
        password: password,
        parallel: 5,
        log: gutil.log
    });
}

gulp.task('ftp-deploy', function() {

    var conn = getFtpConnection();

    return gulp.src(localFilesGlob, { base: '.', buffer: false })
        .pipe( conn.newer( remoteFolder ) ) // only upload newer files 
        .pipe( conn.dest( remoteFolder ) )
    ;
});

Thanx a lot @dluzhnevsky What I ended up doing, was put the bootstrap.min.css file in the gulp directory and then change the code like this: `var globs = ['../css/bootstrap.min.css']; ...return gulp.src( globs, { base: '.', buffer: false } ) .pipe( conn.newer( '/public_html/dev2/templates/templatename/css/' ) ) // only upload newer files .pipe( conn.dest( '/public_html/dev2/templates/templatename/css/' ) );` — Thomsterdam Web Design, Jun 21 '17 at 11:12
I'm afraid Stackoverflow doesn't allow me to edit a comment after 5 minutes... So here it is again: Thanx a lot @dluzhnevsky What I ended up doing, was put the bootstrap.min.css file in the gulp directory and then change the code like this: `var globs = ['../css/bootstrap.min.css']; ... return gulp.src( globs, { base: '.', buffer: false } ) .pipe( conn.newer( '/public_html/dev2/templates/templatename/css/' ) ) .pipe( conn.dest( '/public_html/dev2/templates/templatename/css/' ) );` I'm afraid the formatting of comments here on stackoverflow is not very good.... Cheers, Thom — Thomsterdam Web Design, Jun 21 '17 at 11:20

Vinyl FTP for Gulp configuration

1 Answers1