3

I've just switched to PhpStorm cause it's awesome!

But I'm doing some Sass styling and would be nice if I could monitor the compiled CSS file and upload after it has been compiled?

Is there way that this can done? I used to be able to monitor files in Sublime so files would upload direct to the server after being compiled.

Any advice would be much appreciated as I can seem to find anything about it.

Looking at Preferences > File Watchers ...

This is about as far as I got, and this just gets an error. Not sure really how this works, documentation is a little confusing.

enter image description here

joshmoto
  • 1,650
  • 2
  • 14
  • 21
  • 1
    What do you use to compile your Sass into CSS? If you are using File Watcher then you can specify what files to refresh (after File Watcher will finish running) in `Output paths to refresh` field ( https://www.jetbrains.com/help/phpstorm/2016.3/new-watcher-dialog.html ) – LazyOne Feb 14 '17 at 13:25
  • @LazyOne I am using CodeKit3, as it's in good visual way of managing projects across multiple machines. Just looking at `File Watchers`, see screenshot above but not sure if this will do what I need it to do? I've added scope to check open css files, but program not set? Hmmm.. – joshmoto Feb 14 '17 at 14:50
  • https://confluence.jetbrains.com/display/PhpStorm/File+Watchers+in+PhpStorm IDE will run your appropriate File Watcher when your file gets modified and saved in IDE (main usage scenario: you edit file in IDE, click "Save" (or it is saved automatically) and that program specified in File Watcher gets run). Simply speaking: File Watcher is like External Tools that is run automatically for you. So .. to compile Sass into CSS you have to have a program that will do that .. and File Watcher is a way to automatically invoke it on file modification. – LazyOne Feb 14 '17 at 14:55
  • Right, so this file watcher is not something that will work with CodeKit 3. I can see that the program expects a .cmd but not sure this is something I could tap into with codekit :-( – joshmoto Feb 14 '17 at 16:06
  • I've never used CodeKit (it's for Mac only) but if it can be controlled from command line then it might work. Otherwise -- nope. You see `.cmd` there (in screenshot in the article) because it was made on Windows. For Mac it will obviously have different paths. Simply speaking: with file watcher you have to have some app that does the actual compiling/transpiling/minification/etc job. CodeKit as all that built-in (such tools comes "inside" it) while with PhpStorm you have to install & use them on your own – LazyOne Feb 14 '17 at 16:53

2 Answers2

3

You can!

If you go to tools->deployment->configuration, and add a connection for the uploads.

Once you've configured a connection, go to tools->deployment and click "Automatic upload" to have PHPStorm upload the changes to files in the project.

To monitor changes that are made outside of PHPStorm, you can go to Preferences->Build, Excecution, Deployment->Deployment->Options, and tick the box labeled "Upload external changes".

madsroskar
  • 1,138
  • 13
  • 26
  • 1
    Thanks but PHPStorm does not detect that my CSS file has changed straight away.. it takes a while or some kind of action to let PHPStorm know that file has changed.. any ideas? – joshmoto Feb 14 '17 at 11:37
  • It will upload changes once PhpStorm gets focus, and I'm not aware of any workarounds for that, except using a separate program for it. – madsroskar Feb 14 '17 at 11:40
  • An alternative is to set up [fswatch as described in this question](http://stackoverflow.com/questions/1515730/is-there-a-command-like-watch-or-inotifywait-on-the-mac) (osx) or similar software in other OS-es, but if you want PhpStorm to manage the uploads, it will need to get focus for it to trigger the upload. – madsroskar Feb 14 '17 at 11:48
  • Hmmm that is the case so it seems which is a shame. I wonder if there will be a way to do this in the future some how as it would nice to see the file upload through PhpStorm. I'm going to leave this open, thanks for your help. – joshmoto Feb 14 '17 at 12:19
  • Use `File | Synchronize` action to tell IDE that it needs refreshing file system looking for external changes that are possibly missing right now. – LazyOne Feb 14 '17 at 13:23
2

Just to add on this excellent answer https://stackoverflow.com/a/42225022/10708470; For PHPStorm 20.3 you will go to:

    Preferences -> Build, Excecution, Deployment -> Deployment  -> Options

OR

    File -> Settings -> Build, Excecution, Deployment -> Deployment -> Options

and instead of ticking the box labeled "Upload external changes"(It's not available anymore), You will make sure the box labeled "Skip External Changes" is unchecked (see the screenshot below)

enter image description here

Software Developer
  • 778
  • 8
  • 14