Comment automatiser la minification de Javascript pour vos applications web Java ?

Question

J'aimerais savoir comment vous préférez automatiser la minification de Javascript pour vos applications Web Java. Voici quelques aspects qui m'intéressent particulièrement :

• Comment intégrer ? Fait-il partie de votre outil de construction, d'un filtre de servlet, d'un programme autonome post-traitement du fichier WAR, ou autre chose ?
• Est-ce que c'est facile à activer et à désactiver ? Il est très peu drôle d'essayer de déboguer un script minifié, mais il est également utile pour un développeur de pouvoir tester que la minification ne casse rien.
• Est-ce que ça marche ? de manière transparente Est-ce que cela a des effets secondaires (en dehors de ceux inhérents à la minification) dont je dois tenir compte dans mon travail quotidien ?
• Quel hachoir utilise-t-il ?
• Est-ce que ne présentent aucune caractéristique à laquelle vous pouvez penser ?
• Qu'est-ce qui vous plaît ?
• Quoi Ne le fais pas. que vous aimez ?

Ce document me servira surtout de référence pour mes futurs projets (et j'espère que d'autres SOer le trouveront instructif aussi), donc toutes sortes d'outils sont intéressants.

(Notez que Il ne s'agit pas de savoir quel est le meilleur minificateur. . Nous en avons déjà beaucoup dans les environs).

Answer 1

Article récapitulatif

Si vous publiez quelque chose de nouveau dans ce fil, éditez ce message pour faire un lien vers le vôtre.

• Fourmi apply tâche (en utilisant YUI Compressor)
• Tâche Ant personnalisée de YUI Compressor
• Plugin Maven YUI Compressor
• Granule (pour JSP, JSF, Grails, Ant)
• Macros Ant pour le compilateur Google Closure
• wro4j (Maven, filtres de servlets, Java simple, etc.)
• ant-yui-compressor (tâche ant pour la compression de JS+CSS)
• JAWR
• Plugin Maven de Minify
• humpty
• Fourmi exec tâche utilisant Terser

Answer 2

Nous utilisons une tâche Ant pour réduire les fichiers js avec YUICompressor pendant la construction de la production et mettre le résultat dans un dossier séparé. Ensuite, nous téléchargeons ces fichiers sur un serveur web.

Voici un exemple :

<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>

Answer 3

Je pense que l'un des meilleurs et des plus appropriés outils pour le travail est wro4j Vérifiez https://github.com/wro4j/wro4j

Il fait tout ce dont vous avez besoin :

• Garder les ressources web du projet (js & css) bien organisées.
• Fusionnez et réduisez-les au moment de l'exécution (à l'aide d'un simple filtre) ou de la construction (à l'aide du plugin maven).
• Gratuit et open source : Diffusé sous une licence Apache 2.0
• plusieurs outils de minification supportés par wro4j : JsMin, Google Closure compressor, YUI, etc.
• Très facile à utiliser. Prend en charge le filtre de servlets, la configuration de Plain Java ou de Spring.
• Support des Meta Frameworks Javascript et CSS : CoffeeScript, Less, Sass, etc.
• Validation : JSLint, CSSLint, etc.

Peut fonctionner en mode débogage comme en mode production. Il suffit de spécifier tous les fichiers qu'il doit gérer/prétraiter et il fait le reste.

Vous pouvez simplement inclure une ressource fusionnée, minifiée et compressée comme ceci :

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

Answer 4

J'ai essayé de deux façons :

1. en utilisant un filtre de servlet. En mode production, le filtre est activé et compresse toute donnée liée à une URL comme *.css ou *.js.
2. en utilisant maven et yuicompressor-maven-plugin ; la compression est effectuée de manière non-tantum, (lors de l'assemblage du guerre de production )

Bien sûr, la dernière solution est meilleure car elle ne consomme pas de ressources au moment de l'exécution (ma webapp utilise google app engine) et elle ne complique pas le code de votre application. Donc, supposez ce dernier cas dans les réponses suivantes :

Comment s'intègre-t-il ? Fait-il partie de votre outil de construction, d'un filtre de servlet, d'un programme autonome post-traitement du fichier WAR, ou autre chose ?

utiliser maven

Est-il facile de l'activer et de le désactiver ? Il est très peu drôle d'essayer de déboguer un script minifié, mais il est également utile pour un développeur de pouvoir tester que la minification ne casse rien.

vous ne l'activez que lors de l'assemblage de la guerre finale ; en mode développement, vous voyez la version non compressée de vos ressources

Fonctionne-t-il de manière transparente, ou a-t-il des effets secondaires (autres que ceux inhérents à la minification) dont je dois tenir compte dans mon travail quotidien ?

absolument

Quel minifieur utilise-t-il ?

Compresseur YUI

Manque-t-il des fonctionnalités auxquelles vous pensez ?

non, il est très complet et facile à utiliser

Qu'est-ce qui vous plaît ?

il est intégré à mon outil préféré (maven) et le plugin est dans le dépôt central (un bon citoyen maven)

Answer 5

J'ai écrit des macros ant pour le compilateur Google Closure et le compresseur Yahoo et j'ai inclus ce fichier dans différents projets 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="--js=@{dir}/@{src}.js" />
        <arg line="--js_output_file=@{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>

• Intégration : <import file="build-minifier.xml" /> dans votre build.xml, puis invoquez les tâches ant habituelles : <gc-js dir="${build.js.dir}" src="prototype" /> <yc-js-all dir="${build.js.dir}" />

• Choix de deux compresseurs : Google Closure compiler et Yahoo compressor, vous devez les télécharger manuellement et les placer près du fichier xml

• Les minimiseurs sautent les fichiers déjà compressés (se terminant par -min* )

• Habituellement, je fais trois versions de script : non comprimées (par ex. prototype.js ) pour le débogage, compressé avec le compilateur de fermeture ( prototype-min-gc.js ) pour le serveur de production, compressé avec Yahoo ( prototype-min-yc.js ) pour le dépannage car le compilateur de fermeture utilise des optimisations risquées et produit parfois des fichiers compressés invalides. Le compresseur Yahoo est plus sûr.

• Le compresseur Yahoo peut réduire tous les fichiers d'un répertoire avec une seule macro, le compilateur Closure ne le peut pas.