Minify a file on explicit command, not via watch/automatically.

Answered

So, I have a gulpfile.js that when run builds my project, part of which is minifying code. All works great.

 

I noticed that PHPStorm allows me to setup a file watcher with the Google Closure Compiler to minify JS files on save.

 

But what I'm looking for is the ability to EXPLICITLY state to the IDE "I want THIS file minimized." (like maybe right clicking on the file/s in the Project Window and selecting an option from a list generated there) Behind the scenes it could send the file paths to the executable and run the code, but not require the user to setup a file watch process, which would do minification on the fly, but might sometimes do it on files I do not want it to automatically.

 

What would be even better, IMO, is to allow us to create a keymapping to run that process. ie. I highlight 3 files in my project list, press a keymapping I setup that runs the Google Closure Compiler for JS Minification, and behind the scenes it runs that on each file and creates their .min.js files.

6 comments
Comment actions Permalink

Hi there,

File Watchers meant to be used automatically -- that's why they have "watcher" in their name.

---

You can use External Tools functionality for that -- run when you are ready. You can also assign custom shortcut to such tool to speed up launching it.

https://confluence.jetbrains.com/display/PhpStorm/Running+External+Tools+in+PhpStorm

 

Alternatively -- use Gulp/Grunt tasks/NPM Scripts for such tasks -- IDE supports running them (via dedicated tool window; you can also create dedicated Run Configuration for frequently used tasks). This one is a better/recommended approach: aforementioned tools are widely used for such stuff in any case and can be run via command line as needed or become a part of some batch/automated process.

0
Comment actions Permalink

I was able to successfully create a "Compile from SASS to CSS" "Tool" though while I'm on the subject, The Project Window of the SCSS file I ran it on made the file (test.scss) look like a folder, which when I clicked to expand it showed the compiled test.css and test.css.map file like a file under a folder. But in the filesystem, all 3 files (test.scss, test.css and test.css.map) were all in the same directory. How can I make the Project Window just show the files at the same hierarchical level?

Also, I wish PHPStorm supported a VIEW > REFRESH command. It took me LONG time to realize that RIGHT CLICK > SYNCHRONIZE (Folder Name) was the equivalent of VIEW > REFRESH. Many times when I compiled files, the produced files wouldn't show up until I manually "Refreshed" the project window.

0
Comment actions Permalink

>How can I make the Project Window just show the files at the same hierarchical level?

Lots (really a lot) of people asking complete opposite -- to have such nesting.

In any case -- ATM such nesting rules are hardcoded. https://youtrack.jetbrains.com/issue/WEB-17977

If you really need to see flat view -- I suggest to switch to another Scope in the Project View panel instead of default "Project" -- AFAIK such nesting does not work there.

 

> It took me LONG time to realize that RIGHT CLICK > SYNCHRONIZE (Folder Name) was the equivalent of VIEW > REFRESH.

It's "File | Synchronize"

 

> Many times when I compiled files, the produced files wouldn't show up until I manually "Refreshed" the project window.

Each External Tools entry has options -- one of them -- "Synchronize files after execution". Works OK for me here (Windows 7 & 10)

0
Comment actions Permalink

Andriy-

Though I have never seen this type of functionality (where a file looks like a folder in a directory tree when it is the source of the compiled files), I have long been a fan of the thought that "If Feature A and Feature B are not mutually exclusive, then a program that supports both A and B is better than a program that supports A OR B.

In other words, would it not be better than forcing people to use this method of file organization, to instead create a settings under preferences that allows them to enable/disable it instead. That way, you make people who want Feature A (the way it is now) OR Feature B (the way I had described) happy. Giving the user a choice.

As for FILE | SYNCHRONIZE, thank you for showing me this. My original concern is that in the vast majority of applications that I have used, the term "REFRESH" or "REFRESHING" is used, and it's often under the "VIEW" menu. As long as the feature is there, even if under a different name, I'm good, so thank you.

And thank you very much for reminding me of the External Tools option to Synchronize after execution. I think originally when I first got my External Tool setup, I had not yet associated "Synchronizing" with "Refreshing the View" so I left that option off. I can confirm after having turned it on now, that it does indeed "Refresh/Synchronize" after it runs, and I see my files as expected. Appreciated!

0
Comment actions Permalink

Originally nesting was done based on File Watcher settings -- you had to have your files processed by File Watcher in order to have such nesting. If specific file was not processed by File Watcher .. then no nesting will happen (even though the "pattern is the same).

To get rid of File Watcher dependency .. and because users have asked for such stuff a lot ... since 2016.3 such most commonly used rules were hardcoded.

But since every user has different cases (completely different nesting (e.g. Angular components .. or nest in different order).. or just missed some additional extension) the aforementioned ticker WEB-17977 was created. Once implemented it will allow to edit existing and create your own rules. You could use it to disable/delete all rules and have the file tree flat as per your preferred rendering style.

 

As for Synchronize/Refresh -- it was called like that since the first version (at least in PhpStorm, no idea about IntelliJ IDEA). I guess it's called like that because of the way how it works internally (e.g. some internal Virtual File System that reads your actual OS FS, applies some rules (hide/remove some files) and only then displayed for user in the UI) .. plus the same Project View panel can show multiple Scopes (which can show only certain files/folders as per your rules). In other words -- you Synchronize IDE's Virtual FS with your OS FS.

But yes -- it's quite unusual name for what it does as compared to lots of other applications .. and in some cases even causes confusion on "why this does not work" (e.g. when working with Remote Host panel and you need to sync local changes with remote server)

0
Comment actions Permalink

Thanks Andriy. I'm just getting into Angular myself, so I can see that being a unique and nice feature to have (nesting associated by file type). Very neat explanation you have for the "Synchronization" between the IDE and OS' FS. Keep up the great work with PHPStorm. I'm liking more and more I see with it over Sublime Text 3, which was my previous editor.

0

Please sign in to leave a comment.