Verzování a minifikace skriptů
Už jste někdy opravili chybu tak, že jste odbyli testery nebo dokonce samotné uživatele se slovy „refrešni si browser“, „vymaž si cache“… ? To je výmluva na úrovni: můj domácí úkol mi sežral pes. Jistě, můžete přejmenovávat soubory nebo adresáře. Kdo by to ovšem dělal, že? Nehledě na možné zavlečení chyby. Ukáži vám způsob, jak verzovat JavaScripty a CSSka pomocí mavenu.
U knihoven třetích stran, jako například jQuery, jména zachováme,. Tam je cachování žádoucí. Spolu s verzováním sloučíme více souborů do jednoho. Pro vývoj je sice kvůli lepší orientaci v kódu vhodné rozdělit logiku do několika souborů, ale v produkci nám to generuje zbytečné requesty na server. A v neposlední řadě byste mohli požadovat obfuskaci jakožto znesnadnění případného reversního inženýrství případně hackování.
Konfigurace
| <%@ page contentType="text/html;charset=UTF-8" language="java" %> | |
| <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> | |
| <html> | |
| <head> | |
| <title>Minification sample</title> | |
| <c:choose> | |
| <c:when test="${environment == 'development'}"> | |
| <link rel="stylesheet" href="<c:url value="/gui/css/first.css" />" /> | |
| <link rel="stylesheet" href="<c:url value="/gui/css/second.css" />" /> | |
| </c:when> | |
| <c:otherwise> | |
| <link rel="stylesheet" href="<c:url value="/gui/css/minified.${version}.css" />" /> | |
| </c:otherwise> | |
| </c:choose> | |
| </head> | |
| <body> | |
| <h1>Minification sample</h1> | |
| <button id="button1">Button 1</button> | |
| <button id="button2">Button 2</button> | |
| <script type="text/javascript" src="<c:url value="/gui/js/jquery-1.9.0.min.js" />"></script> | |
| <c:choose> | |
| <c:when test="${environment == 'development'}"> | |
| <script type="text/javascript" src="<c:url value="/gui/js/custom_script1.js" />"></script> | |
| <script type="text/javascript" src="<c:url value="/gui/js/custom_script2.js" />"></script> | |
| </c:when> | |
| <c:otherwise> | |
| <script type="text/javascript" src="<c:url value="/gui/js/minified.${version}.js" />"></script> | |
| </c:otherwise> | |
| </c:choose> | |
| </body> | |
| </html> |
| <plugin> | |
| <groupId>net.alchim31.maven</groupId> | |
| <artifactId>yuicompressor-maven-plugin</artifactId> | |
| <version>1.3.0</version> | |
| <executions> | |
| <execution> | |
| <phase>generate-resources</phase> | |
| <goals> | |
| <goal>compress</goal> | |
| </goals> | |
| </execution> | |
| </executions> | |
| <configuration> | |
| <jswarn>false</jswarn> | |
| <suffix>.min</suffix> | |
| <aggregations> | |
| <aggregation> | |
| <output> | |
| ${project.build.directory}/${project.build.finalName}/gui/js/minified.${version}.js | |
| </output> | |
| <includes> | |
| <include>**/custom_script1.min.js</include> | |
| <include>**/custom_script2.min.js</include> | |
| </includes> | |
| </aggregation> | |
| <aggregation> | |
| <output> | |
| ${project.build.directory}/${project.build.finalName}/gui/css/minified.${version}.css | |
| </output> | |
| <includes> | |
| <include>**/*.min.css</include> | |
| </includes> | |
| </aggregation> | |
| </aggregations> | |
| </configuration> | |
| </plugin> |
Celý funkční příklad na GitHubu.
Závěr
Pevně věřím, že budu narážet na čím dál tím méně projektů, které zatím verzování skriptů neřeší. A jaký plugin používáte vy?
