Search code examples
twitter-bootstrap-3gulpwinscpgulp-lessgulp-livereload

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?


Solution

  • 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?