CODEWITHSUNDEEP
twitter-bootstrap-3gulpwinscpgulp-lessgulp-livereload
dgo
dgo

Reputation: 3937

Gulp with WinSCP - livereload and less

I am using gulp with livereload, less, and others on a remote server. I have successfully used gulp before many times, and have never experienced this scenario.

I am using WinSCP to save/edit files (I double click the file, and it opens in Sublime Text ... I save it, WinSCP automatically uploads it back to the server ).

However, when doing it this way gulp-less fails almost all the time. I have two core CSS files that are compiled - one is Bootstrap and one is my own - they should both be compiled with their own gulp tasks upon modification - but Bootstrap fails every time, and the other file fails about half of the time.

When I say fails, here's what I mean - with Bootstrap I always get the same error:

    variable @grid-columns is undefined in file ....grid.less line no. 48

This happens even if I define @grid-columns as the first-heading in my main Bootstrap "import" file.

The other one fails in that livereload reloads the compiled CSS at some point prior to the Less file being compiled. This should be impossible, but it happens somehow.

However, when from the SSH command prompt, I type touch myfile.less or touch anybootstrapfile.less, everything works perfectly.

Obviously this is very annoying, but its livable. I think there must be some way to fix it though. Any ideas on what in the world could make this happen and what (if anything) I could do to fix it?

Upvotes: 0

Views: 321

Answers (2)

Martin Prikryl
Martin Prikryl

Reputation: 202584

Chances are that, when WinSCP uploads the file after you save it in the internal editor, it sets a timestamp of uploaded file to older than it was before.

This might be particularly true, if you are using the FTP protocol, or Windows Vista or older.

For details, refer to WinSCP FAQ:
Why are the changes, I upload to webserver, not visible in the web browser?

Upvotes: 1

dgo
dgo

Reputation: 3937

Alright. With the help of Martin, who I now realize is the developer of WinScp, I have solved this. I had been working with the gulp.wait plugin and inserting a pause before the final reload - and it wasn't working.

Because... that wasn't where the problem was. The problem was happening at the time of upload; in that the file was getting 'touched' to soon (or there was something with the timestamp that ended up causing the functional equivelant).

So I moved the wait process to just before the less process was called like so:

gulp.src(src)
.pipe(plumber({
  errorHandler:onError
})
.pipe(wait(500))
.pipe(less())
//etc

I'm gonna experiment, 500ms is probably longer than needed..but not too long to be painful. This solved the problem instantly.

Thanks Martin!

Upvotes: 1

Related Questions