itty-bitty | create links that contain small sites | Web Site library

I'm looking for a way for PhpStorm to watch a file - so that every time it changes, it should sync that file to the remote server. And the 'Upload external changes'-option (with the 'On explicit save action') is not working for me. It's close - but no cigar. It makes me save the css-file twice - and only after the second time I save the scss-file, then it uploads the gulp-compiled-style.css-file, as I would like it to do after the first 'save'. I know it's an itty-bitty thing - but for something that I easily do 200-400 times per day, I would like it to run as smooth as possible. It's both the time I spend saving the file twice - but it's also the doubt in my mind, every time something doesn't act like I want it to - then I always have to check first, if the file is uploaded properly.

I'm working with Wordpress and I have a 5-8 SCSS-files, that are being compiled using gulp. The gulp-procedures are quite comprehensive (autoprefixer, merge-media-queries, minifycss, etc., etc.), so it takes a couple of miliseconds for the file to be compiled. I assume that it's that compile-time that makes PhpStorm 'miss' that the style.css has changed - and therefore don't upload it on the first 'save'. Because sometimes everything is uploaded after the first 'save' - but it's only every 8th time (or so).

Extra fun fact (that may indicate where the body is burried): If i run the gulp watch from a terminal in the background, then I have to save the file, wait for at least 2-4 seconds and then save again, before the gulp-compiled-style.css-file is uploaded. If I press 'save', 'save', 'save', 'save' - with less than those 2-4 seconds pause, but with only 1 seconds pause, then PhpStorm never sync's the gulp-compiled-style.css-file. If I run the gulp watch from PhpStorm's Gulp-integration (not the terminal, but the Gulp-prompt), then I can save twice in a row with only .5 second pause between (as soon as the progress bar in the bottom disappears) - and then it uploads (every time, - consistently).

It's only the upload of the gulp-compiled-style.css-file that is the problem. Everything else is working perfectly.

Here's what I have tried:

**Attempt1) I've previously used Atom, where the FTP-configuration was established using a plugin with a .ftpconfig-file. In that file, there was a 'watch: []'-parameter, where I could specify a file to 'watch'. That worked wonders!! I've tried finding a plugin that did something of the sort - but couldn't find it.

**Attempt2) I read one of the support-pages, concerning the same. It seems like that if the SCSS-files are compiled using PhpStorm, then it knows to upload the style.css-file (after it has been compiled). I can't setup my gulp-file using PhpStorms' SCSS-compilation (since it compiles it and then pipes the content through multiple procedures. And if I change projects and have to set that up every time, then that would be a pain to maintain.

**Attempt3) I thought about making a macro or something. And then seeing if I could remap CMD-s to 'save-current-file-and-execute-the-macro'. But then if I don't edit the scss-file (but just some php-file), then it would still upload the style.css-file. It's by no means a pretty solution, - but it just shows how far out in the ropes I've been, to find a solution to automate this.

**Attempt4) I thought about building it into the gulp-file, that it has to upload the style.css-file after compiling the style.css-file. I thought about getting the host and the username from the .idea-folder - and getting the password from the keychain and then establishing the sftp-connection that way. But it quickly became extensive to do this, so I hoped that there was an easier/better way.

Addition1

LazyOne asked, what I had tried with the File Watchers, so here goes. I tried making PhpStorm compile the Scss-file (so PhpStorm basically did what Gulp does for me today). So that was a SCSS-filewatcher (file type), the scope was the SCSS-files in my project, pointed the 'Program' to my ruby-installed scss-file, etc., etc., etc.

However... I realized that it was difficult to get PhpStorm to do the same thing to the Scss-files as the Gulp-file does.

The Gulp-file that I'm using is supplied with each project (as a default) - and we're several webdesigners working on the same projects. So if I suddenly do something other that use that Gulp-file, then I'm pretty sure that I will have to be able to produce the exact same result, - otherwise I'm pretty sure that my colleagues will skin me alive. But I made it as far as to have this as my Arguments, before I gave up (I still need to do several things in this line, before it does what my Gulp-file does):