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

Answer 1

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 ) )
    ;
});