2009-09-04 22 views
115

Me interesa saber cómo prefiere automatizar la minificación de Javascript para sus aplicaciones web Java. Aquí hay algunos aspectos en los que estoy particularmente interesado:¿Cómo se automatiza la minificación de Javascript para sus aplicaciones web Java?

  • ¿Cómo se integra ? ¿Es parte de su herramienta de compilación, un filtro de servlet, un programa independiente que procesa el archivo WAR o alguna otra cosa?
  • ¿Es fácil de habilitar y deshabilitar? Es muy extraño intentar y depurar un script minificado, pero también es útil para un desarrollador poder probar que la minificación no rompe nada.
  • ¿Funciona transparente, o tiene algún efecto secundario (aparte de los inherentes a la minificación) que tengo que tener en cuenta en mi trabajo diario?
  • ¿Qué minificador usa?
  • ¿Tiene falta alguna característica que se pueda imaginar?
  • ¿Qué te gusta de él?
  • ¿Qué no te gusta?

Esto servirá principalmente como referencia para mis proyectos futuros (y espero que otros SOer también lo encuentren informativo), por lo que todo tipo de herramientas son interesantes.

(.. Tenga en cuenta que esto no es una cuestión sobre la que Minifier es mejor Tenemos un montón de los que lo rodean ya)

+0

esto se ve muy interesante, no había oído hablar de él. Todas las herramientas que he encontrado en una búsqueda rápida son herramientas manuales que se ejecutan una vez. Sería bueno si hubiera un enchufe para hormiga o maven. Con suerte, alguien tiene una buena respuesta. – Jay

+0

Y parece que alguien lo hizo - verifique la respuesta de dfa: http://stackoverflow.com/questions/1379856/how-do-you-automate-javascript-minification-for-your-java-web-applications/1379935#1379935 – gustafc

Respuesta

60
+0

el compresor minify-maven y maven yui no funcionó bien con las características de ES6 para mí al momento de este comentario – DPM

7

probé dos maneras:

  1. utilizando un filtro de servlet. Cuando está en modo de producción, el filtro está activado y comprime cualquier información limitada a URL como * .css o * .js
  2. usando maven y yuicompressor-maven-plugin; la compresión se desempeñasen una-tantum, (durante el montaje de la guerra producción)

Por supuesto esta última solución es mejor, ya que no consume recursos en tiempo de ejecución (mi aplicación web está utilizando motor de aplicación de Google) y que doesn no complique su código de aplicación. Asuma este último caso en las siguientes respuestas:

¿Cómo se integra? ¿Es parte de su herramienta de compilación, un filtro de servlet, un programa independiente que procesa posteriormente el archivo WAR, o alguna otra cosa?

utilizando Maven

¿Es fácil de activar y desactivar? Es muy extraño intentar y depurar un script minificado, pero también es útil para un desarrollador poder probar que la minificación no rompe nada.

lo activa solo cuando se arma la guerra final; en el modo de desarrollo se ve la versión sin comprimir de sus recursos

lo hace trabajar de forma transparente, o tiene algún efecto secundario (aparte de las inherentes a la minimización) que tengo que tener en cuenta en mi día a día ¿trabajo?

absolutamente

Qué Minifier utiliza?

YUI compresor

lo hace carecen de cualquier característica que se pueda imaginar?

no, es muy completo y fácil de usar

¿Qué te gusta de ella?

se integra con mi herramienta favorita (experto) y el plugin se encuentra en el repositorio central (un buen ciudadano experto)

+0

Maven complemento - agradable. Lástima que mis proyectos actuales utilicen todos :) :) – gustafc

+0

Puedes crear un objetivo que construya un "archivo de guerra de producción", usando la tarea YUI ant – dfa

2

Nuestro proyecto lo ha manejado un número de maneras, pero hemos seguido utilizando el YUI Compressor a través de nuestras diferentes iteraciones.

Inicialmente teníamos un servlet que manejaba la compresión de JavaScript la primera vez que se accedía a ese archivo en particular; luego fue almacenado en caché. Ya contamos con un sistema para manejar archivos de propiedades personalizadas, así que simplemente actualizamos nuestros archivos de configuración para admitir o deshabilitar el compresor según el entorno en el que estuviéramos trabajando.

Ahora los entornos de desarrollo nunca usan JavaScript comprimido para la depuración . En su lugar, manejamos la compresión en nuestro proceso de compilación al exportar nuestra aplicación a un archivo WAR.

Nuestro cliente nunca ha expresado su preocupación sobre la compresión y los desarrolladores no se dan cuenta hasta que deciden depurar JavaScript. Así que diría que es bastante transparente con efectos secundarios mínimos, si acaso alguno.

+0

¿Cómo se usa el compresor YUI de tu proceso de compilación? ¿El plugin de Maven o algo más? – gustafc

+1

Lo sentimos, usamos Ant actualmente. Aquí hay un enlace útil para Ant Task: http://blog.gomilko.com/2007/11/29/yui-compression-tool-as-ant-task/ – doomspork

12

Estamos utilizando la tarea Ant para minificar archivos js con YUICompressor durante la compilación de producción y poner el resultado en una carpeta separada. Luego cargamos esos archivos a un servidor web. Puede encontrar algunos buenos ejemplos para la integración de YUI + Ant in this blog.

Aquí se muestra un ejemplo:

<target name="js.minify" depends="js.preprocess"> 
    <apply executable="java" parallel="false"> 
     <fileset dir="." includes="foo.js, bar.js"/> 
     <arg line="-jar"/> 
     <arg path="yuicompressor.jar"/> 
     <srcfile/> 
     <arg line="-o"/> 
     <mapper type="glob" from="*.js" to="*-min.js"/> 
     <targetfile/> 
    </apply> 
</target> 
+2

Snippet; bonito. ¿Redestinas tu 'script src' en compilaciones de desarrollo o simplemente copias archivos no minificados en el directorio comprimido/js? – gustafc

+0

Solo para cargar archivos comprimidos sobre archivos originales en public_html/js. Lo bueno es que no hay cambios de codificación o ruta entre lo local y lo productivo, lo malo es que hay que subir y sobrescribir manualmente (estoy seguro de que puede ser automático, pero para nosotros no vale la pena, subirlo). pocos archivos js de vez en cuando no son un gran problema). – serg

+0

Utilicé su código pero crea el archivo minificado en la raíz de mi proyecto, configuré '' pero no funciona . ¿Cómo puedo hacer para generar el archivo en '$ {generatedScriptsDir}'? – Vadorequest

4

Creo que se necesita una biblioteca de compresión, por ejemplo, la etiqueta de gránulos.

http://code.google.com/p/granule/

Se gzip y combinar javascripts envueltos por g: comprimir etiqueta utilizando diferentes métodos, también tiene tarea Ant así

ejemplo de código es:

 
<g:compress> 
    <script type="text/javascript" src="common.js"/> 
    <script type="text/javascript" src="closure/goog/base.js"/> 
    <script> 
     goog.require('goog.dom'); 
     goog.require('goog.date'); 
     goog.require('goog.ui.DatePicker'); 
    </script> 
    <script type="text/javascript"> 
     var dp = new goog.ui.DatePicker(); 
     dp.render(document.getElementById('datepicker')); 
    </script> 
</g:compress> 
... 

+0

Sí, eso se ve bastante ingenioso. – gustafc

8

He escrito macros de hormigas para el compilador Google Closure y el compresor Yahoo e incluye este archivo en diferentes proyectos web.

<?xml version="1.0" encoding="UTF-8"?> 
<!-- CSS and JS minifier. --> 
<!DOCTYPE project> 
<project name="minifier" basedir="."> 

    <property name="gc" value="compiler-r1592.jar" /> 
    <property name="yc" value="yuicompressor-2.4.6.jar" /> 

    <!-- Compress single js with Google Closure compiler --> 
    <macrodef name="gc-js"> 
    <attribute name="dir" /> 
    <attribute name="src" /> 
    <sequential> 
     <java jar="${gc}" fork="true"> 
     <!-- 
     - - compilation_level WHITESPACE_ONLY | SIMPLE_OPTIMIZATIONS | ADVANCED_OPTIMIZATIONS 
     Specifies the compilation level to use. Default: SIMPLE_OPTIMIZATIONS 
     - - warning_level QUIET | DEFAULT | VERBOSE 
     Specifies the warning level to use. 
     --> 
     <arg line="[email protected]{dir}/@{src}.js" /> 
     <arg line="[email protected]{dir}/@{src}-min-gc.js" /> 
     </java> 
    </sequential> 
    </macrodef> 

    <!-- Compress single js with Yahoo compressor --> 
    <macrodef name="yc-js"> 
    <attribute name="dir" /> 
    <attribute name="src" /> 
    <sequential> 
     <java jar="${yc}" fork="true"> 
     <arg value="@{dir}/@{src}.js" /> 
     <arg line="-o" /> 
     <arg value="@{dir}/@{src}-min-yc.js" /> 
     </java> 
    </sequential> 
    </macrodef> 

    <!-- Compress all js in directory with Yahoo compressor --> 
    <macrodef name="yc-js-all"> 
    <attribute name="dir" /> 
    <sequential> 
     <apply executable="java" parallel="false"> 
     <fileset dir="@{dir}" includes="*.js" excludes="*-min*.js" /> 
     <arg line="-jar" /> 
     <arg path="${yc}" /> 
     <srcfile /> 
     <arg line="-o" /> 
     <mapper type="glob" from="*.js" to="@{dir}/*-min-yc.js" /> 
     <targetfile /> 
     </apply> 
    </sequential> 
    </macrodef> 

    <!-- Compress all css in directory with Yahoo compressor --> 
    <macrodef name="yc-css-all"> 
    <attribute name="dir" default="${build.css.dir}" /> 
    <sequential> 
     <apply executable="java" parallel="false"> 
     <fileset dir="@{dir}" includes="*.css" excludes="*-min*.css" /> 
     <arg line="-jar" /> 
     <arg path="${yc}" /> 
     <arg line="-v --line-break 0" /> 
     <srcfile /> 
     <arg line="-o" /> 
     <mapper type="glob" from="*.css" to="@{dir}/*-min.css" /> 
     <targetfile /> 
     </apply> 
    </sequential> 
    </macrodef> 
</project> 
  • Integración: <import file="build-minifier.xml" /> en su build.xml y luego invoque como habituales tareas de hormigas: <gc-js dir="${build.js.dir}" src="prototype" /><yc-js-all dir="${build.js.dir}" />

  • opción de dos minifiers: Google y Yahoo compilador de cierre del compresor, debe descargar manualmente y colocar cerca del archivo xml

  • Minificadores omita archivos ya comprimidos (finalizando con -min*)

  • Normalmente hago tres versiones de script: sin comprimir (p. Ej.prototype.js) para la depuración, comprimido con el compilador de cierre (prototype-min-gc.js) para el servidor de producción, comprimido con Yahoo (prototype-min-yc.js) para la solución de problemas, porque el compilador de cierre utiliza optimizaciones de riesgo y, a veces produce archivo comprimido no válida y Yahoo compresor es más segura

  • Yahoo compresor puede minify todos los archivos en un directorio con una sola macro, compilador de cierre puede no

11

creo que una de las herramientas mejores y más adecuado para el trabajo es wro4j salida

No todo lo que necesita:

  • proyecto Keep recursos web (js & CSS) bien organizado
  • Combinar & ellos Minify en tiempo de ejecución (utilizando un filtro simple) o construir en tiempo (usando Maven plug-in)
  • gratuito y de código abierto: Publicado bajo una licencia Apache 2.0
  • varias herramientas minificación apoyado por wro4j: JSMin, Google compresor de cierre, etc YUI
  • muy fácil de usar. Soporta filtro de servlet, Llanura Java o configuración del resorte
  • Javascript y CSS Meta marcos de apoyo: CoffeeScript, Menos, Sass etc
  • Validación: JSLint, CSSLint etc

puede ejecutar en depuración, así como los modos de producción. Simplemente especifique todos los archivos que debería manejar/preprocesar y el resto.

Usted puede simplemente fusionado incluyen, minified y recursos comprimida de esta manera:

<script type="text/javascript" src="wro/all.js"></script> 
+2

Parece una herramienta ingeniosa de hecho. Gracias por actualizar! – gustafc

+0

¿Agrega versiones a los archivos de recursos para forzar la actualización en el lado del cliente? No pude encontrar ninguna documentación sobre esta característica. – Qiang

+0

Lo único que echo de menos en wro4j es el prefijo css. – inafalcao

1

Esto funcionó para mí: https://bitbucket.org/m6_russell_francis/yui-compressor-ant-task/wiki/Home

<!-- minimize all static *.css & *.js content --> 
<target name="static-content-minify"> 

    <taskdef name="yuicompressor" 
      classname="com.metrosix.yuicompressor.anttask.YuiCompressorTask"> 
     <classpath> 
      <pathelement location="${jar.yui.compressor}"/> 
      <pathelement location="${jar.yui.anttask.compressor}" /> 
     </classpath> 
    </taskdef> 

    <yuicompressor todir="${build.static.content.min}" charset="utf-8" 
     preserveallsemicolons="true" munge="true" > 
     <fileset dir="${src.static.content}"> 
      <include name="**/*.css"/> 
      <include name="**/*.js"/> 
     </fileset> 
    </yuicompressor> 
</target> 
+0

Obtuve $ {jar.yui.compressor} de search.maven.org: http://search.maven.org/#search|gav|1|g%3A%22com.yahoo.platform.yui%22% 20AND% 20a% 3A% 22yuicompresor% 22 –

2

Estoy muy sorprendido nadie mencionó JAWR-https://jawr.java.net/

Es bastante maduro y es compatible con todas las características estándar que se esperan ed, y un poco más. Así es como se mantiene en contra de los excelentes criterios del OP.

¿Cómo se integra? ¿Es parte de su herramienta de compilación, un filtro servlet , un programa independiente que procesa posteriormente el archivo WAR, o algo más?

Originalmente hizo el procesamiento/levantamiento de pesas al inicio de la aplicación y la prestación se basó en un servlet. Comenzando con 3.x, agregaron soporte para integrating at build time.

El soporte para JSP y Facelets se proporciona a través de una biblioteca de etiquetas JSP personalizada para importar recursos procesados. Además de eso, se implementa un cargador de recursos JS que admite loading the resources from static HTML pages.

¿Es fácil de habilitar y deshabilitar? Es muy extraño intentar y depurar un script miniaturizado , pero también es útil para un desarrollador poder probar que la minificación no rompe nada.

Una opción debug=on está disponible para utilizar antes de inicio de la aplicación, y un parámetro personalizado GET se puede especificar en las solicitudes individuales en la producción para cambiar el modo de depuración selectiva en tiempo de ejecución de dicha solicitud.

¿Qué minificador usa?

Para JS es compatible con YUI Compressor y JSMin, para CSS no estoy seguro.

¿Le faltan funciones que se le ocurran?

SASS soporte viene a la mente. Dicho esto, admite LESS.

1

Estoy escribiendo un marco para la administración de activos web, llamado humpty. Su objetivo es ser más simple y más moderno que jawr o wro4j utilizando WebJars y ServiceLoaders.

¿Cómo se integra? ¿Es parte de su herramienta de compilación, un filtro de servlet, un programa independiente que procesa posteriormente el archivo WAR, o alguna otra cosa?

En desarrollo, un servlet procesa los activos según sea necesario. Los activos se precompilarían antes de la producción y se colocarían en una carpeta pública, de modo que la única parte que se utiliza es generar las inclusiones correctas en el HTML.

¿Es fácil de habilitar y deshabilitar? Es muy extraño intentar y depurar un script minificado, pero también es útil para un desarrollador poder probar que la minificación no rompe nada.

Eso se haría cambiando entre los modos de desarrollo y producción.

¿Funciona de manera transparente o tiene algún efecto secundario (aparte de los inherentes a la minificación) que tengo que tener en cuenta en mi trabajo diario?

Creo que es transparente, pero favorece fuertemente el uso de WebJars.

¿Qué minificador usa?

Cualquiera que sea el plugin que pones en tu classpath. Actualmente estoy buscando escribir un complemento para Google Closure Compiler.

¿Le faltan funciones que se le ocurran?

Todavía prelanzamiento, aunque lo estoy usando en producción. El plugin maven aún necesita mucho trabajo.

¿Qué te gusta de él?

La simplicidad de limitarse a añadir una dependencia para configurar el marco

lo que no te gusta de ella?

Es mi bebé, me encanta todo;)

Cuestiones relacionadas