How to automatically synchronize/refresh SCSS/CSS file on change? - intellij-idea

Recently my client switched from Eclipse to Intellij. In both IDEs I was editing SCSS files externally and running "compass watch" in terminal. This worked great in Eclipse. immediately after compiling SCSS file I was able to simply refresh browser and see the changes.
In Intellij it takes up to 30 seconds to see the changes, or if I enable "synchronize files on frame activation" I have to switch to browser first, then back to Intellij, and then back again to browser in order to force refresh. Third option is to manually sync "css" folder, which is not convenient. I had a same issue when I was editing and compiling SCSS files in Intellij.
How can I force Intellij to detect CSS file change faster?

I've found the solution.
Open "Settings / File Watchers" and go to SCSS. Make sure that field "Output paths to refresh" has the same value for the output as "Arguments" field.
For example, this is my setup:
Arguments:
--no-cache --update $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
Output paths to refresh:
$FileParentDir$\css\$FileNameWithoutExtension$.css

Related

IntelliJ is hiding folder in project window mentioned in .gitignore file, how to show that folder in project window?

ignoring build folder does not show it in project window.
commenting .gradle in .gitignore does show it in project windows.
I want to show both .gradle and build folders in project windows but I also want to include them in .gitignore file.
Right click on a directory in the project view and make sure Hide ignored files option is not enabled.
This feature is provided by a third-party .ignore plug-in. IntelliJ IDEA doesn't hide ignored files out of the box.
Note: If you don't see the .gitignore-d files, then try clicking this option regardless of its label in this menu. Sometimes because of a bug the entry says "hide" but clicking it actually shows the hidden files.
Some updates to .ignore plugin suggested in this answer.
IntelliJ now suggests installing foldable-projectview
This plugin really provides flexible configuration options.

Project not up-to-date after building with IntelliJ

I'm a newbie to both IntelliJ and Aurelia. I did my last web project almost a decade ago, and I find myself a bit lost between all those new libraries. That said, my question is probably of rather trivial nature:
I've downloaded the Aurelia skeleton project [1], imported the sources into a new node js project in IntelliJ and started index.html. Voila. Browser opens, shows the site.
Then I changed something (added a new route to src/app.js).
I hit the run button to show index.html again: No changes. Hm?
I rebuild the project in IntelliJ, and retried. Still my changes aren't shown.
I run gulp watch on the command line, open the browser, and my changes are shown.
So, I'm asking two things: What needs to be done to really refresh the build within IntelliJ?
And secondly, when did it become a sport to create inter-depending Javascript libraries with blurry names? Just kidding... (though I'm not laughing)
[1] https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-esnext/src/child-router.js
I found it out myself. You need to put 'gulp build' to the pre-launch list of the run configuration. This is because the sources get transpiled and copied to the dist directory, from where the server is actually running.
Just building the sources from IntelliJ isn't enough.
Project rebuild start automatically after any files was changed in project directory. You do not need to build it from IDE-- only save your changes and wait a few seconds to refresh.
Of cause it will work only when you run project build with watch statement like gulp watch (e.g. run gulp watch and your project will rebuild automatically).
But if there were some errors in code -- gulp process will stop and you must restart it again. I recommend you change IDE's settings to disable automatically saving to files and use <CTRL+S> buttons to save data manually.

Use Intellij File Watcher only on Open File

I've been using the Intellij Golang plugin recently (it's great) but I've been running into an issue with the File Watchers I set up. My working directory is set to my $GOPATH directory and I would like to be able to run golint and goimports after I save a file I'm working on. The issue I have is if I use git to clone a repo the next time I open Intellij it runs both golint and goimports on all the newly imported files which can take a long time for large projects. Is there a way to set up File Watcher so it only watches a file that is currently open? I added a screenshot of my current settings below:
Open Watcher setting -> Scope , change it to Open Files
If you wanna more control over the plugin, you can have a look at the official doc
Instead of file watcher you can get External tools configured to achieve almost the same functionality. The only difference is that this won't run on save but rather you'll have to trigger this manually. Or you could configure a macro to run them on save (but I don't have experience with macros + external tools so I'm not if this will work).

Autoreload file system changes in phpstorm/webstorm/intellij

Ahoi
I have an project with grunt, and whenever I save a file it runs the csscomb script in the grunt:watch task. My old "IDE" Sublime reloaded the changes automatically, phpStorm doesn't do that. I always have to manually synch the file.
The whole problem is that I write code, save in between and continue programming, and then the popup about the file system changes appears.
LG
Do you run grunt:watch outside of webStorm, or using Grunt console? In the latter case, the file system should be synchronized when task is completed. But if the task is run externally, outside of webstorm, you have to synchronize files manually
I know this is old stuff, but I had the same problem with WebStorm - i.e grunt running externally on a network server.
I just unchecked "use safe-write ..." in Settings > Appearance & Behaviour > System Settings and now my WS writes saves directly to the file triggering watch grunt tasks.
Try Preferences -> Appearance & Behavior -> System Settings -> Synchronize files on frame activation. PHPStorm will automatically reload file system changes once you switch to its window.

How to run .html File from WebStorm

We do unit tests via .html files so that we can interact in a web form also. We also just run the dojo test runner.
I have been able to run the .hml file from Aptana but when I try webstorm for the first time, never tried it, love this IDE, I see that when in my .html file the run button at the top is disabled.
So how do I run an .html file that's got markup and javascript from WebStorm and have it come back and hit my debug points inside Webstorm? Does webstorm scrape in what you see in FireFox also or do you have to keep toggling back and fourth such as when you step to the next debug point, tab back to the browser to see the results...or is there a nice way in webstorm to see the markup in runtime at the same time?
All in all I am just trying to get this .html file to run that's got javascript in it and some Dojo runner, etc. in it since I'm using Dojo in this .html file.
Either just open it manually or allow debug from localhost port.
So appearnetly it's not obvious to open a file in WebStorm there is a row of icons that appear in the top right corner of the text editor pane.
You have to hold SHIFT down when clicking the supported/installed browsers icons hidden there, or it will open in the deployment's location (via FTP server settings etc).
Try ALT-F2 for Preview file in... from "View" menu.