PhpStorm is definitely my favorite IDE (integrated development environment). One quite often needed functionality to minify JS and CSS files is missing among the native functions though. I was looking for a phpStorm plugin for this but did not find any. Then googling brought me to a solution at this page. I am a Windows user so I decided to use the same technique but the way suits me more.

The goal is to create YUI Compress option in right click context menu in project file tree. This makes it convenient to minify a single file or all JS and CSS files inisde a folder right within phpStorm. Compressor creates new files with extensions .min.js and .min.css. not modifying original ones.

  1. Download files: yuicompressor-phpstorm.zip unzip it in C:/yui/directory and go to step  6 or start with step 2 if you wish to download the latest version of compressor script.
  2. Download the latest version of YUI compressor. The latest version I found was yuicompressor-2.4.7.zip.
  3. Unzip it somewhere and only file we need is /yuicompressor-2.4.7/build/yuicompressor-2.4.7.jar. Lets create a new folder on C drive C:/yui/ and copy the file there. Finally rename it to just yuicompressor.jar to make it simplier with upgrade.
  4. Compressor is run by Java so install or update your Java software from http://www.java.com. Test from command line that it is installed properly - type "java -version" and you should get version details or command not found if something went wrong.
  5. Create a new file yuicompressor-phpstorm.bat in C:/yui/directory and edit it - insert following instruction code:
    @echo off
    
    if exist "%~1\" (
        REM this is directory - process all files inside:
        echo Source DIR: %1
        for /f %%a in ('dir /b *.js') do call:ProcessCompress: %%a
        for /f %%a in ('dir /b *.css') do call:ProcessCompress: %%a
    ) else (
        REM this is file - process only single file:
        echo Source FILE: %1
        call:ProcessCompress: %1
    )
    GOTO:EOF
    
    :ProcessCompress
        REM skip minified files - name ends with .min
        set name=%~n1
        if not [%1]==[] (
            if not [%name:~-4%]==[.min] call:CompressFile: %1
        )
    GOTO:EOF
    
    :CompressFile
        java -jar c:\yui\yuicompressor.jar %1 -o %~n1.min%~x1
        echo Target FILE: %~n1.min%~x1
    GOTO:EOF
    
  6. In PhpStorm go to settings (Ctrl+Alt+S), in IDE Settings section click External Tools, click plus sign to create a new one and enter following:

    Name: YUI Compress
    Description: Compress JS and Css files to ...min.js ...min.css
    Program: C:\yui\yuicompress-phpstorm.bat
    Parameters: $FilePath$
    Working directory: $FileDir$

Done, now try to right click on any folder or file in project files tree and you find a new option YUI Compress available. By the way you can right click anywhere in editor on currently editing file or find this option under top menu Tools.

You can create keyboard shortcut to run compression but the right click is quite enough for me. Enjoy coding with phpStorm.

Leave a Comment »