Automate Eclipse "Yui Compressor..."

Question

Eclipse PDT has this handy built-in Yui Compressor in the context menu for files. But when building a webapp that uses multiple such files, it becomes tedious to compress the files manually after each update. It doesn't even remember what files compress to which filenames, so you have to enter that again.

Is it possible to automate this process easily within Eclipse, so you can click on "build" or something and all specified files will be compressed to their targets?

There is really a vacuum concerning documentation about this Yui feature in Eclipse.

I am using Eclipse Indigo 3.7.0 with PDT 3.0.0.v20110516-11, but both PDT and the Yui option have remained pretty similar since Galileo

-update-

Automation solutions, not Eclipse-native but close:

• GNU make makefile

  %-min.js: %.js
      ${java} -jar ${compressor} $< -o ${<:.js=-min.js}
  

• Windows Batch

  FOR %f IN (*.js) DO java -jar yuicompressor.jar %f -o deploy\%f
  

• Linux Shellscript

  ls -1 *.js | awk '{printf("java -jar yuicompressor.jar %s -o deploy/%s",$1,$1)}' | /bin/sh
  

• ANT file

  See here: http://www.ubik-ingenierie.com/ubikwiki/index.php?title=Minifying_JS/CSS
  How do I paste html/xml here?

Also see this question.

Answer 1

Well, I actually downloaded the jar and created an ANT task to to CSS and JS compression. I work on Tomcat, so it includes tasks to upload stuff, clean work/ directory and things like that. Hope it helps.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE project>
<project name="MyProject" default="subir">

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <property name="project.name" value="MyProject" />

    <property name="src.dir" location="src" />
    <property name="web.dir" location="WebContent" />
    <property name="lib.dir" location="WebContent/WEB-INF/lib" />
    <property name="bin.dir" location="WebContent/WEB-INF/classes" />

    <property name="minify.dir" location="minified" />
    <property name="minify.sourcedir" location="${skin.dir}/resources/" />
    <!-- <property name="minify.sourcedir" location="${web.dir}/resources/" /> -->

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <property prefix="env" file="build.properties" />

    <path id="project.classpath">
        <pathelement location="${src.dir}" />
        <fileset dir="${lib.dir}">
            <include name="*.jar" />
        </fileset>
    </path>

    <path id="yui.classpath.minifier">
        <fileset dir="${lib.dir}">
            <include name="YUIAnt.jar" />
            <include name="yuicompressor-2.4.2.jar" />
        </fileset>
    </path>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <target name="checkTomcatHome">
        <condition property="local.tomcathome.exists">
            <available file="${env.TOMCAT_PRUEBAS}" type="dir" />
    </condition>
    </target>

    <target name="subir" depends="checkTomcatHome" if="local.tomcathome.exists">

        <echo message="El servidor Tomcat destino existe, buscando archivos para copia en el proyecto y en en OsmoCore/WebContent..." />

        <copy todir="${env.TOMCAT_PRUEBAS}/webapps/${project.name}">
            <fileset dir="${web.dir}">
                <include name="**/*.*" />
            </fileset>
        </copy>

        <!--<echo message="Buscando archivos para copia en ${env.TOMCAT_PRUEBAS}/webapps/${project.name}/WEB-INF/classes..." />
        <copy todir="${env.TOMCAT_PRUEBAS}/webapps/${project.name}/WEB-INF/classes">
            <fileset dir="${bin.dir}">
                <include name="**/*.*" />
            </fileset>
        </copy>-->

    </target>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <target name="WAR">

        <delete file="${project.name}.war"/>
        <delete dir="TMP_WAR"/>
        <mkdir dir="TMP_WAR"/>


        <copy todir="TMP_WAR">
            <fileset dir="${web.dir}">
                <include name="**/*.*" />
            </fileset>
        </copy>

        <copy todir="TMP_WAR/WEB-INF/classes">
            <fileset dir="${bin.dir}">
                <include name="**/*.*" />
            </fileset>
        </copy>

        <delete dir="${project.name}.war"/>

        <zip destfile="${project.name}.war">
            <zipfileset dir="TMP_WAR">
                <include name="**/*.*" />
            </zipfileset>
        </zip>

        <delete dir="TMP_WAR"/>

    </target>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <target name="subirCompleto" depends="checkTomcatHome" if="local.tomcathome.exists">
        <echo message="El servidor Tomcat destino existe, buscando carpetas Work y ${project.name} en Webapps, para eliminar" />
        <delete dir="${env.TOMCAT_PRUEBAS}/work" />
        <delete dir="${env.TOMCAT_PRUEBAS}/webapps/${project.name}" />
        <antcall target="subir" />
    </target>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <target name="borrarWork" depends="checkTomcatHome" if="local.tomcathome.exists">
        <echo message="El servidor Tomcat destino existe, buscando carpeta Work a eliminar..." />
        <delete dir="${env.TOMCAT_PRUEBAS}/work"/>
    </target>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <target name="css.minify">

        <echo message="Creando directorio temporal ${minify.dir} (si no existe aún)..." />
        <mkdir dir="${minify.dir}" />

        <echo message="Borrando versión anterior de la carpeta temporal ${minify.dir}/css-min/..." />
        <delete dir="${minify.dir}/css-min/" />
        <echo message="Creando carpeta temporal ${minify.dir}/css-min/..." />
        <mkdir dir="${minify.dir}/css-min/" />

        <echo message="Copiando estructura de ${web.dir}/resources/styles/ en carpeta temporal..." />
        <copy todir="${minify.dir}/css-min/">
            <fileset dir="${minify.sourcedir}/styles/">
                <include name="**/*.*" />
            </fileset>
        </copy>

        <echo message="Borrando los CSS copiados a la carpeta temporal..." />
        <delete>
            <fileset dir="${minify.dir}/css-min/" >
                <include name="**/*.css"/>
            </fileset>
        </delete>

        <echo message="Comprimiendo!!!..." />
        <apply executable="java" parallel="false" dest="${minify.dir}/css-min/">
            <fileset dir="${minify.sourcedir}/styles/">
                <include name="**/*.css"/>
            </fileset>
            <arg line="-jar"/>
            <arg path="${lib.dir}/yui_compressor/yuicompressor-2.4.7.jar"/>
            <arg line="--line-break 0"/>
            <arg line="--type css"/>
            <arg line="--charset ISO-8859-1"/>
            <arg line="--nomunge"/>
            <!-- <arg line="- -verbose"/> -->
            <srcfile />
            <arg line="-o"/>
            <mapper type="glob" from="*.css" to="*.css"/>
            <targetfile />
        </apply>
    </target>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <target name="js.minify">

        <echo message="Creando directorio temporal ${minify.dir} (si no existe aún)..." />
        <mkdir dir="${minify.dir}" />

        <echo message="Borrando versión anterior de la carpeta temporal ${web.dir}/resources/js-min/..." />
        <delete dir="${minify.dir}/js-min/" />
        <echo message="Creando carpeta temporal ${web.dir}/resources/js-min/..." />
        <mkdir dir="${minify.dir}/js-min/" />

        <echo message="Copiando estructura de ${web.dir}/resources/scripts/ en carpeta temporal..." />
        <copy todir="${minify.dir}/js-min/">
            <fileset dir="${minify.sourcedir}/scripts/">
                <include name="**/*.*" />
            </fileset>
        </copy>

        <echo message="Borrando los JS copiados a la carpeta temporal..." />
        <delete>
            <fileset dir="${minify.dir}/js-min/" >
                <include name="**/*.js"/>
            </fileset>
        </delete>

        <echo message="Comprimiendo!!!..." />
        <apply executable="java" parallel="false" dest="${minify.dir}/js-min/">

            <fileset dir="${minify.sourcedir}/scripts">
                <include name="**/*.js"/>
            </fileset>
            <arg line="-jar"/>
            <arg path="${lib.dir}/yui_compressor/yuicompressor-2.4.7.jar"/>
            <arg line="--line-break 0"/>
            <arg line="--type js"/>
            <arg line="--charset ISO-8859-1"/>
            <arg line="--nomunge"/>
            <!--<arg line="- -verbose"/>-->
            <srcfile />
            <arg line="-o"/>
            <mapper type="glob" from="*.js" to="*.js"/>
            <targetfile />
        </apply>

    </target>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <target name="js.minified.subir" depends="checkTomcatHome" if="local.tomcathome.exists">
        <echo message="El servidor Tomcat destino existe, copiando archivos 'encogidos' a  ${env.TOMCAT_PRUEBAS}/webapps/${project.name}/resources/scripts..." />
        <copy todir="${env.TOMCAT_PRUEBAS}/webapps/${project.name}/resources/scripts" overwrite="yes">
            <fileset dir="${minify.dir}/js-min/">
                <include name="**/*.*" />
            </fileset>
        </copy>
    </target>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <target name="css.minified.subir" depends="checkTomcatHome" if="local.tomcathome.exists">
        <echo message="El servidor Tomcat destino existe, copiando archivos 'encogidos' a  ${env.TOMCAT_PRUEBAS}/webapps/${project.name}/resources/styles..." />
        <copy todir="${env.TOMCAT_PRUEBAS}/webapps/${project.name}/resources/styles" overwrite="yes">
            <fileset dir="${minify.dir}/css-min/">
                <include name="**/*.*" />
            </fileset>
        </copy>
    </target>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <target name="css.minified.process">
        <echo message="Reduciendo el tamaño de los archivos CSS..." />
        <antcall target="css.minify" />

        <echo message="Cargando los archivos CSS..." />
        <antcall target="css.minified.subir" />

        <echo message="Borrando la carpeta temporal..." />
        <delete dir="${minify.dir}" />
    </target>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <target name="js.minified.process">
        <echo message="Reduciendo el tamaño de los archivos JS..." />
        <antcall target="js.minify" />

        <echo message="Cargando los archivos JS..." />
        <antcall target="js.minified.subir" />

        <echo message="Borrando la carpeta temporal..." />
        <delete dir="${minify.dir}" />
    </target>
    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

</project>

Answer 2

You can also batch-minify using Node.js. However, this option is only for Linux users (for now).

Every time some software package is horribly lacking a convenience (Eclipse) or a builder batch format is just crazy (ANT), someone clever comes along and creates something awesome.

In this case,

• node-minify

which is awesome.

Just thought I'd update this question and add the answer.

Answer 3

You can select and "build" js/css resources by configuring and adding an External Tool with a batch (for Windows users).

This makes it possible to minify by just pressing one button. (It is not part of a run configuration.)

Preconditions: - Java has to be installed. - You must download yuicompressor. (Currently the official download page is here: https://github.com/yui/yuicompressor/releases )

Step1: Add "yuicompressor" and "minify.bat" (given below) to your project.

Step2: Configure an External Tool named "Minify" (Go to menu Run -> External Tools -> External Tools Configurations).

Step3: Select the resources (js/css) or the directory that contains them, and click "Minify". The js/css files will be deployed to the sibling "min" directory.

(minify.bat)

@echo off

set target=%1
set yui=%2\WebContent\build\yuicompressor\yuicompressor-2.4.8.jar

:: %1 selected resource
:: %2 current project

:: dir
if exist %target%\ (
  cd /d %target%
  mkdir min 2>nul

  for %%f in (*.js *.css) do (
    echo Minifying "%%~ff"
    java -jar %yui% %%f -o min\%%f
  ) 

  goto end
) 

:: .js/.css
set pathNoExt=0
for /f %%i in ('dir /b %target%') do set pathNoExt=%%~ni

if not %pathNoExt%==0 (
  cd /d %~dp1
  mkdir min 2>nul

  for /f %%f in ('dir /b %pathNoExt%.js %pathNoExt%.css') do (
    echo Minifying "%%~ff"
    java -jar %yui% %%f -o min\%%f
  )
)

:end
echo Minified

Answer 4

I would like to improve the answer of megre (https://stackoverflow.com/a/53678752/760777). His solution works, but can be improved. All credits to him though.

In step 2: Change the location of the batch file into ${project_loc}\build\yuicompressor.bat. Place your batch file "yuicompressor.bat" in a subfolder "build" in your project folder. Or place the batch file in the same folder the jar file of yuicompressor resides. In my case that would be C:\Program Files (x86)\yuicompressor\yuicompressor.bat

To refer to the right location of your css and js files, you can use different variables, $resource_loc, $project_loc or $workspace_loc with $project_name. Different versions of Eclipse seem to use different variables.

Note: Don't forget to use double quotes, in the case there are spaces in the path.

I ended up using the workspace location combinded with the project name. My Javascript files are in a folder named assets/js and my stylesheets are in a folder named assets/css

See screenshot:

I changed the batch file completely:

@ECHO OFF

REM Note: There is a bug in yuicompressor 2.4.8 causing yuicompressor not te be accessible 
REM       see https://stackoverflow.com/a/19339287/760777

SET yui="C:\Program Files (x86)\yuicompressor\yuicompressor-2.4.7.jar"
SET cssFolder=%1\css
SET jsFolder=%1\js

IF EXIST %cssFolder% (
  ECHO Processing folder "%cssFolder%" ... 
  CD %cssFolder%
  MKDIR min 2>NUL
  FOR %%f IN (*.css) DO (
    ECHO Minifying "%%~ff"
    java -jar %yui% %%f -o min\%%f 
  )
) ELSE (
  ECHO %cssFolder% does not exist. Put your css files in a subfolder "css" in the current project folder 
)

IF EXIST %jsFolder% (
  ECHO Processing folder "%jsFolder%" ... 
  CD %jsFolder%
  MKDIR min 2>NUL
  FOR %%f IN (*.js) DO (
    ECHO Minifying "%%~ff"
    java -jar %yui% %%f -o min\%%f
  ) 
) ELSE (
  ECHO %jsFolder% does not exist. Put your js files in a sub folder "js" in the current project folder 
)
ECHO Finished!

Probably unnecessary to say, but to use the minified files, you have to modify the references in your HTML / PHP files accordingly.