File Watchers YUI Compressor

Hello,,
I am using YUI Compressor to minify some js file.
but i do not know how to use it co compine multible js files in one file using phpstorm filewatchers.
Any help will be appreciated :)
thanks

13 comments

Hi there,

1) You can create separate scope (Settings | Scopes) that would include those files only. Then, use that scope in separate file watcher .. and in file watcher itself manually reference all files so that all required files will be processed and all output will go into that single file.

2) If that is not possible with YUI Composer (i.e. because it cannot combine multiple files itself -- I have not used it this way myself), then you can create some batch/shell file that would compress all required files first and then merge result files into one. Obviously, you have to use this script instead of actual YUI Compressor in File Watcher.

0

Thanks for replay "Andriy"
I really not totally understands you but i think YUI Compressor has the ability to combine files togather but i do not know the actual settings to do that.
Would you please help me make that settings ?

here is a link states the command but not in php storm
http://stackoverflow.com/questions/1051977/combining-multiple-js-files-into-one-in-a-build-process

I tried the settings attached. But it only minify the opened file

thanks in advance



Attachment(s):
settings.png
0

Well ... the Stack Overflow question and my #1 are the same thing .. but it does not work for me either -- only first file is in the final output.

At this moment  I may only suggest my original 2nd suggested approach: create batch script that will do all this and use in File Watcher instead of yuicompressor.jar. Something like this:

js-merge.cmd

@rem Minify all requeired files one by one first into temp files

java.exe -jar "C:\Users\Mohammed\path\to\your\yuicompressor.jar" bootstrap.js -o bootstrap.min.js.tmp

java.exe -jar "C:\Users\Mohammed\path\to\your\yuicompressor.jar" custom.js -o custom.min.js.tmp


@rem Merge all minified files into single file
copy bootstrap.min.js.tmp /B + custom.min.js.tmp /B final.min.js

@rem Delete all temp files
del /F /Q *.min.js.tmp

0

Thank you so much "Andriy"
I will give it a try and get back if something goes wrong.
thanks again :)

0

Wow than works fine :)
but it only works from the cmd. I tried to trigger it from the file watcher. It works without errors but no output.
So how to make it triggerred from the file watcher.
I attached my settings below
Thanks bro :)



Attachment(s):
settings.png
0

It should work OK -- I'm using something similar in one of the projects (bath script), for different purposes though.

The only things I may suggest:

  1. Disable "Immediate file synchronization" option, so that file watcher will run on Save only (that's in case it gets executed in inappropriate moments).
  2. Instead of "Project Files" scope -- click on "..." button (or Settings | Scopes) and create custom scope (that would include required/participating .js files only) and use it instead.
  3. Double check from what folder that script gets executed (working/current directory). If you do #2 it should definitely help (especially if you edit other .js files in your project). Try setting up correct working directly in your script as well.
  4. For the moment (for debugging purposes) you may set "Show Console" to "Always" so that you can see when file watcher was triggered (close console after sucessfull execution, so you get notified about next launch).


To manually re-run File Watcher please refer to this thread: http://devnet.jetbrains.com/thread/451797?tstart=0

0

hi superhero :)
It worked perfectly .. The problem was that PHPStorm did not recognize java
so i put it in my PATH and it worked perfectly
Thank you brother :)

0

Sorry for that but is there any way to improve this .cmd file to take js files from the scope in there order combine without specifying each file inside ?
This will be so flexible if it is possible. So for each project all what you may do is to place the file watcher to use the .cmd file and define the order of the js files inside the scope

Thanks again and again :)

0

File Watcher works with single file at a time.

The only thing you may want to do is to pass all required files as a parameters to your script and then loop though them inside (you will have to code this part yourself).

There is one "problem" with this though (possibly it is fixed already, not sure) -- File Watcher passes file names with "/" instead of "\" on Windows as path separators and most of standard Windows/DOS commands do not understand such paths. Therefore you can only pass file names only -- without path (e.g. "myscript.js" instead of "C:\projects\myProject\scripts\myscript.js").

0

Ok .. Thank you again for your help so far :).
I will try to code it myself and I hope to succeed with that. If so I will put that code here for other people.

0

Hi Andriy :)

I used google search help to write this code ..
It worked perfectly but i need your help to enhance it .. It results into some temp files wont be deleted
Also Is there any way to get benefit from the file watcher settings like output file name and path also how to use scope
thanks in advance :)

@echo off if "%1" == "" (     rem if %1 is blank there were no arguments. Show how to use this batch     echo Please put files in arguments     exit /b ) IF EXIST tempFile.min.js (del /F /Q tempFile.min.js) :again rem if %1 is blank, we are finished if not "%1" == "" (     java.exe -jar "C:\Users\mhelewa\node_modules\yuicompressor\build\yuicompressor-2.4.8.jar" %1 -o %1.tmp     IF EXIST tempFile.min.js (         copy tempFile.min.js /B + %1.tmp /B tempFile.min.js      ) ELSE (         copy %1.tmp /B tempFile.min.js      )     del /F /Q %1.tmp     shift     goto again )

0
It results into some temp files wont be deleted

Try deleting the same file again. That's the trick used even in some big popular programs (like Google Chrome). A bit different environment but may work.

Is there any way to get benefit from the file watcher settings like output file name and path

For output file name -- just pass it as FIRST parameter and adjust your code accordingly.

For path -- unlikely (as I have mentioned before -- currently IDE passes path with "/" instead of "\" which Windows/DOS commands do not like. But this needs to be double checked -- possibly it was fixed by now.

also how to use scope

What exactly you want to know?

If you want to use them in this code -- it's not possible. Scope in File Watcher is used to limit the scope (files & folders) on which this particular file watcher will be triggered (in other words: to not to run this File Watcher if you are editing another/unrelated JS file).

P.S.
If you find coding this batch file difficult, maybe it will be easier if you would use another scripting language (e.g. PowerShell/PHP/etc) or even some build tool (like Ant/Phing/Grunt) instead?

0

Thank you so much .. It was so helpful to chat with you :)

0

Please sign in to leave a comment.