web-dev-qa-db-fra.com

Comment automatisez-vous la minification Javascript pour vos applications Web Java?

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

  • Comment cela fonctionne-t-il intégrer? Fait-il partie de votre outil de génération, d'un filtre de servlet, d'un programme autonome post-traitement du fichier WAR ou de quelque chose d'autre?
  • Est-il facile à activer et à désactiver? Essayer de déboguer un script minifié n’est pas drôle, mais il est également utile pour un développeur de pouvoir vérifier que la minification ne casse rien.
  • Cela fonctionne-t-il de manière transparente, ou a-t-il des effets secondaires (autres que ceux inhérents à la minification) que je dois prendre en compte dans mon travail quotidien?
  • Quel minifier utilise-t-il?
  • Est-ce qu'il manque de fonctionnalités auquel vous pouvez penser?
  • Qu'est-ce que vous aimez à ce sujet?
  • Qu'est-ce que vous n'aimez pas ?

Cela servira principalement de référence pour mes projets futurs (et j'espère que d'autres OS le trouveront aussi informatif), de sorte que toutes sortes d'outils sont intéressants.

(Notez que ce n'est pas une question de savoir quel minifier est le meilleur. Nous en avons déjà beaucoup autour.)

javajavascriptautomationminify
120
gustafc

Poteau de rassemblement

Si vous publiez quelque chose de nouveau dans ce fil de discussion, modifiez ce message pour le lier au vôtre.

64
gustafc

Nous utilisons Ant task pour minimiser les fichiers js avec YUICompressor lors de la production et pour placer le résultat dans un dossier séparé. Ensuite, nous téléchargeons ces fichiers sur un serveur Web. Vous pouvez trouver de bons exemples d’intégration YUI + Ant dans ce blog .

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

Je pense que l'un des meilleurs et bons outils pour le travail est wro4j Départ https://github.com/wro4j/wro4j

Il fait tout ce dont vous avez besoin:

  • Organisez les ressources Web du projet (js et css)
  • Fusionnez-les et réduisez-les au moment de l'exécution (en utilisant un simple filtre) ou à la compilation (en utilisant le plugin maven)
  • Gratuit et open source: publié sous licence Apache 2.0
  • plusieurs outils de minification supportés par wro4j: JsMin, compresseur Google Closure, YUI, etc.
  • Très facile à utiliser. Prise en charge du filtre de servlet, brut Java ou configuration de printemps)
  • Prise en charge de Javascript et de CSS Meta Frameworks: CoffeeScript, Less, Sass etc.
  • Validation: JSLint, CSSLint, etc.

Peut fonctionner aussi bien en mode débogage qu'en mode de production. Il suffit de spécifier tous les fichiers qu’il doit gérer/pré-traiter et c’est le reste.

Vous pouvez simplement inclure des ressources fusionnées, minifiées et compressées comme ceci:

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

J'ai écrit des macros ant pour le compilateur Google Closure et le compresseur Yahoo et j'ajoute ce fichier à 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>

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

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

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

  • En général, je crée trois versions de script: non compressé (par exemple, 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 un fichier compressé non valide et que le compresseur Yahoo est plus sûr

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

8
Victor

J'ai essayé deux manières:

  1. en utilisant un filtre de servlet. En mode de production, le filtre est activé et comprime toutes les données liées à une URL, telles que * .css ou * .js.
  2. en utilisant maven et yuicompressor-maven-plugin ; la compression est exécutée una-tantum, (lors de l'assemblage de la guerre de production )

Bien sûr, cette dernière solution est préférable car elle ne consomme pas de ressources au moment de l'exécution (mon application Web utilise le moteur d'application Google) et ne complique pas le code de votre application. Supposons donc 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 de quelque chose d'autre?

en utilisant maven

Est-il facile d'activer et de désactiver? Essayer de déboguer un script minifié n’est pas drôle, mais il est également utile pour un développeur de pouvoir vérifier que la minification ne casse rien.

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

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

absolument

Quel minificateur utilise-t-il?

Compresseur YUI

Est-ce qu'il manque des fonctionnalités que vous pouvez penser?

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

Qu'est-ce que vous aimez à ce sujet?

il est intégré à mon outil préféré (maven) et le plugin se trouve dans le référentiel central (un bon citoyen maven)

7
dfa

Je pense que vous avez besoin d'une bibliothèque de compression, par exemple la balise Granule.

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

Il gzip et combine les javascripts encapsulés par la balise g: compress en utilisant différentes méthodes, a également une tâche Ant

exemple de code est:

 <g: compress> 
 <script type = "text/javascript" src = "common.js" />
 <script type = "text/javascript" src = " fermeture/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> 
 ...
4
Andy Bell

Je suis vraiment surpris que personne ne mentionne [~ # ~] jawr [~ # ~] - https: //jawr.github. io

Il est assez mature et prend en charge toutes les fonctionnalités standard attendues, et même un peu plus. Voici comment cela s'oppose aux excellents critères du PO.

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 de quelque chose d'autre?

Au début, le traitement/le soulèvement au démarrage de l'application et le service étaient basés sur un servlet . Depuis la version 3.x, ils ont ajouté la prise en charge de intégration au moment de la construction .

La prise en charge de JSP et de Facelets est fournie via une bibliothèque de balises JSP personnalisée pour importer les ressources traitées. En plus de cela, un chargeur de ressources JS est implémenté et prend en charge chargement des ressources depuis des pages HTML statiques .

Est-il facile d'activer et de désactiver? Essayer de déboguer un script minifié n’est pas drôle, mais il est également utile pour un développeur de pouvoir vérifier que la minification ne casse rien.

Une option debug=on Est disponible avant le démarrage de l'application et un paramètre personnalisé GET peut être spécifié lors de requêtes individuelles en production pour basculer le mode de débogage de manière sélective au moment de l'exécution de ladite requête.

Quel minificateur utilise-t-il?

Pour JS, il prend en charge YUI Compressor et JSMin, pour CSS, je ne suis pas sûr.

Est-ce qu'il manque des fonctionnalités que vous pouvez penser?

SASS le support vient à l'esprit. Cela dit, il supporte LESS.

3
Amr Mostafa

Notre projet a géré le problème de différentes manières, mais nous avons continué à utiliser le YUI Compressor à travers nos différentes itérations.

Nous avions initialement un servlet qui gérait la compression pour JavaScript lors du premier accès à ce fichier particulier; il a ensuite été mis en cache. Nous avions déjà un système en place pour gérer les fichiers de propriétés personnalisées. Nous avons donc simplement mis à jour nos fichiers de configuration pour permettre l'activation ou la désactivation du compresseur en fonction de l'environnement dans lequel nous travaillions.

Désormais, les environnements de développement n'utilisent jamais de code JavaScript compressé à des fins de débogage. Au lieu de cela, nous gérons la compression dans notre processus de construction lors de l'exportation de notre application dans un fichier WAR.

Notre client n'a jamais soulevé d'inquiétude à propos de la compression et les développeurs ne s'en rendent compte que lorsqu'ils décident de déboguer JavaScript. Je dirais donc que c'est plutôt transparent avec des effets secondaires minimes, voire nuls.

2
doomspork

Cela a fonctionné pour moi: 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>
1
Reverse Tarzan

J'écris un cadre de gestion des actifs Web, appelé humpty . Il se veut plus simple et plus moderne que jawr ou wro4j en utilisant WebJars et ServiceLoaders.

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 de quelque chose d'autre?

En cours de développement, une servlet traite les actifs selon les besoins. Les ressources seraient ensuite pré-compilées avant la production et placées dans un dossier public, de sorte que la seule partie utilisée soit la génération des inclusions correctes dans le code HTML.

Est-il facile d'activer et de désactiver? Essayer de déboguer un script minifié n’est pas drôle, mais il est également utile pour un développeur de pouvoir vérifier que la minification ne casse rien.

Cela se ferait en basculant entre les modes de développement et de production.

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

Je pense que cela est transparent, mais favorise fortement l'utilisation de WebJars.

Quel minificateur utilise-t-il?

Quel que soit le plugin que vous avez mis sur votre chemin de classe utilise. Je cherche actuellement à écrire un plugin pour le compilateur Google Closure.

Est-ce qu'il manque des fonctionnalités que vous pouvez penser?

Toujours en pré-release, bien que je l'utilise en production. Le plugin maven a encore besoin de beaucoup de travail.

Qu'est-ce que vous aimez à ce sujet?

La simplicité d'ajouter simplement une dépendance pour configurer le framework

Qu'est-ce que tu n'aimes pas?

C'est mon bébé, j'adore tout;)

1
Mwanji Ezana