Java web uygulamalarınız için Javascript küçültmeyi nasıl otomatikleştirmeyi tercih ettiğinizi öğrenmekle ilgileniyorum. İşte özellikle ilgilendiğim birkaç yön:

• Nasıl entegre olur?Oluşturma aracınızın bir parçası mı, bir sunucu uygulaması filtresi, WAR dosyasını işleyen bağımsız bir program mı yoksa başka bir şey mi?
• Etkinleştirmek ve devre dışı bırakmak kolay mı ? Küçültülmüş bir komut dosyasını denemek ve hatalarını ayıklamak çok komik değil, ancak bir geliştiricinin küçültmenin hiçbir şeyi bozmadığını test edebilmesi de yararlıdır.
• Şeffaf çalışıyor mu veya günlük işlerimde göz önünde bulundurmam gereken herhangi bir yan etkisi var mı (küçültmenin doğasında olanların dışında)?
• Hangi minifier kullanıyor?
• O mu herhangi bir özelliği yoksun aklınıza gelebilecek mi?
• Bunun nesinden hoşlanıyorsun?
• Onunla ilgili neyi sevmiyorsun ?

Bu, çoğunlukla gelecekteki projelerim için bir referans görevi görecek (ve umarım diğer SO'lar da bunu bilgilendirici bulacaktır), bu nedenle her tür araç ilginçtir.

( Bunun hangi minifier'in en iyisi olduğuna dair bir soru olmadığını unutmayın . Etrafta çok sayıda bunlardan zaten var.)

Özet yazı

Bu konu başlığına yeni bir şey gönderirseniz, bu gönderiyi sizinkine bağlantı verecek şekilde düzenleyin.

• Karınca applygörevi (YUI Kompresör kullanarak)
• Özel YUI Kompresör Karınca görevi
• Maven YUI Compressor eklentisi
• Granül (JSP, JSF, Grails, Karınca için)
• Google Closure derleyicisi için karınca makroları
• wro4j (Maven, sunucu uygulaması filtreleri, düz Java vb.)
• ant-yui-kompresör (JS + CSS'yi sıkıştırmak için karınca görevi)
• JAWR
• Minify Maven Eklentisi
• kırılınca
• execTerser kullanarak karınca görevi

Üretim derlemesi sırasında js dosyalarını YUICompressor ile küçültmek ve sonucu ayrı bir klasöre koymak için Ant görevini kullanıyoruz. Ardından bu dosyaları bir web sunucusuna yüklüyoruz. Bu blogda YUI + Ant entegrasyonu için bazı iyi örnekler bulabilirsiniz. .

İşte bir örnek:

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

Bu iş için en iyi ve doğru aracı biridir düşünüyorum wro4j göz atın https://github.com/wro4j/wro4j

İhtiyacınız olan her şeyi yapar:

• Proje web kaynaklarını (js ve css) iyi organize edin
• Bunları çalışma zamanında (basit bir filtre kullanarak) veya derleme zamanında (maven eklentisini kullanarak) birleştirin ve küçültün
• Ücretsiz ve açık kaynak: Apache 2.0 lisansı altında yayınlandı
• wro4j tarafından desteklenen birkaç küçültme aracı: JsMin, Google Closure sıkıştırıcı, YUI vb.
• Kullanımı çok kolay. Servlet Filtresini, Düz Java'yı veya Yay Yapılandırmasını destekler
• Javascript ve CSS Meta Framework Desteği: CoffeeScript, Less, Sass vb.
• Doğrulama: JSLint, CSSLint vb.

Üretim modlarının yanı sıra hata ayıklama modunda da çalışabilir. Sadece işlemesi / işlemesi gereken tüm dosyaları belirtin ve gerisini o halleder.

Aşağıdaki gibi birleştirilmiş, küçültülmüş ve sıkıştırılmış kaynakları dahil edebilirsiniz:

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

Google Closure derleyicisi ve Yahoo sıkıştırıcısı için karınca makroları yazdım ve bu dosyayı farklı web projelerine dahil ettim.

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

• Entegrasyon: <import file="build-minifier.xml" />build.xml dosyanızda, ardından olağan karınca görevleri olarak çağırın:<gc-js dir="${build.js.dir}" src="prototype" /> <yc-js-all dir="${build.js.dir}" />

• İki minifier seçeneği: Google Closure derleyicisi ve Yahoo sıkıştırıcı, bunları manuel olarak indirmeli ve xml dosyasının yakınına yerleştirmelisiniz

• Küçülticiler halihazırda sıkıştırılmış dosyaları atlar (ile biter -min*)

• Genellikle üç komut dosyası sürümü prototype.jshazırlarım: hata ayıklama için sıkıştırılmamış (örn. ), prototype-min-gc.jsÜretim sunucusu için kapatma derleyicisi ( ) ile sıkıştırılmış, prototype-min-yc.jssorun giderme için Yahoo ( ) ile sıkıştırılmış çünkü kapatma derleyicisi riskli optimizasyonlar kullanıyor ve bazen geçersiz sıkıştırılmış dosya üretir ve Yahoo sıkıştırıcı daha güvenlidir

• Yahoo sıkıştırıcı tek bir makro ile bir dizindeki tüm dosyaları küçültebilir, Closure derleyicisi yapamaz

İki yolu denedim:

1. bir servlet filtresi kullanarak. Üretim modundayken filtre etkinleştirilir ve * .css veya * .js gibi URL'ye bağlı tüm verileri sıkıştırır.
2. maven ve yuicompressor-maven-eklentisini kullanarak ; sıkıştırma, tantum olmadan yapılır ( üretim savaşını birleştirirken )

Elbette ikinci çözüm, çalışma zamanında kaynakları tüketmediğinden (web uygulamam google uygulama motorunu kullanıyor) ve uygulama kodunuzu karmaşıklaştırmadığından daha iyidir. Öyleyse, aşağıdaki yanıtlarda bu ikinci durumu varsayalım:

Nasıl entegre olur? Oluşturma aracınızın bir parçası mı, bir sunucu uygulaması filtresi mi, WAR dosyasını işleyen bağımsız bir program mı yoksa başka bir şey mi?

maven kullanarak

Etkinleştirmek ve devre dışı bırakmak kolay mı? Küçültülmüş bir komut dosyasını denemek ve hatalarını ayıklamak çok komik değil, ancak bir geliştiricinin küçültmenin hiçbir şeyi bozmadığını test edebilmesi de yararlıdır.

onu yalnızca son savaşı birleştirirken etkinleştirirsiniz; geliştirme modunda kaynaklarınızın sıkıştırılmamış sürümünü görürsünüz

Şeffaf bir şekilde çalışıyor mu veya günlük işlerimde göz önünde bulundurmam gereken herhangi bir yan etkisi var mı (küçültmenin doğasında olanların dışında)?

kesinlikle

Hangi minifier kullanıyor?

YUI kompresör

Aklınıza gelebilecek herhangi bir özelliği yok mu?

hayır, çok eksiksiz ve kullanımı kolay

Bunun nesinden hoşlanıyorsun?

en sevdiğim araçla (maven) entegre edildi ve eklenti merkezi depoda (iyi bir maven vatandaşı)

Granule etiketi gibi bir sıkıştırma kitaplığına ihtiyacınız olduğunu düşünüyorum.

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

Gzip ile sarılmış javascripts'i farklı yöntemler kullanarak birleştirir ve birleştirir, ayrıca Ant görevi de vardır.

kod örneği:

<A: sıkıştırmak>
  <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: sıkıştırmak>
...

Kimsenin JAWR'dan bahsetmediğine gerçekten şaşırdım - https://jawr.github.io

Oldukça olgunlaşmış ve beklenen tüm standart özellikleri ve biraz daha fazlasını destekliyor. İşte OP'nin mükemmel kriterlerine nasıl karşı çıktığı.

Nasıl entegre olur? Oluşturma aracınızın bir parçası mı, bir sunucu uygulaması filtresi mi, WAR dosyasını işleyen bağımsız bir program mı yoksa başka bir şey mi?

Başlangıçta uygulama başlangıcında işlemeyi / ağır kaldırma işlemini gerçekleştirdi ve sunum bir sunucu uygulamasına dayanıyordu . 3.x ile başlayarak , derleme zamanında tümleştirme desteği eklediler .

JSP ve Facelets desteği, işlenmiş kaynakları içe aktarmak için özel bir JSP etiket kitaplığı aracılığıyla sağlanır. Buna ek olarak , kaynakların statik HTML sayfalarından yüklenmesini destekleyen bir JS kaynakları yükleyici uygulanmaktadır .

Etkinleştirmek ve devre dışı bırakmak kolay mı? Küçültülmüş bir komut dosyasını denemek ve hatalarını ayıklamak çok komik değil, ancak bir geliştiricinin küçültmenin hiçbir şeyi bozmadığını test edebilmesi de yararlıdır.

debug=onUygulama başlangıcından önce kullanım için bir seçenek mevcuttur ve GETüretimdeki bireysel isteklerde, söz konusu istek için çalışma zamanında seçmeli olarak hata ayıklama modunu değiştirmek için özel bir parametre belirtilebilir.

Hangi minifier kullanıyor?

JS için YUI Compressor ve JSMin'i destekliyor, CSS için emin değilim.

Aklınıza gelebilecek herhangi bir özelliği yok mu?

SASSakla destek geliyor. Bununla birlikte, destekliyor LESS.

Projemiz bunu birkaç şekilde ele aldı, ancak farklı yinelemelerimizle YUI Kompresörü kullanmaya devam ettik.

Başlangıçta, belirli bir dosyaya ilk erişildiğinde JavaScript için sıkıştırmayı işleyen bir sunucu uygulamasına sahiptik; daha sonra önbelleğe alındı. Özel özellik dosyalarını işlemek için zaten bir sistemimiz vardı, bu nedenle, çalıştığımız ortama bağlı olarak sıkıştırıcıyı etkinleştirmeyi veya devre dışı bırakmayı desteklemek için yapılandırma dosyalarımızı basitçe güncelledik.

Artık geliştirme ortamları, hata ayıklama amacıyla asla sıkıştırılmış JavaScript kullanmıyor. Bunun yerine, uygulamamızı bir WAR dosyasına dışa aktarırken, oluşturma sürecimizdeki sıkıştırmayı ele alıyoruz.

Müşterimiz hiçbir zaman sıkıştırma ile ilgili endişelerini dile getirmedi ve geliştiriciler JavaScript'te hata ayıklamaya karar verene kadar bunu fark etmez. Bu yüzden, eğer varsa, minimal yan etkilerle oldukça şeffaf olduğunu söyleyebilirim.

Bu benim için çalıştı: 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>

Humpty adlı web varlıklarını yönetmek için bir çerçeve yazıyorum . WebJars ve ServiceLoaders kullanarak jawr veya wro4j'den daha basit ve daha modern olmayı hedefler.

Nasıl entegre olur? Oluşturma aracınızın bir parçası mı, bir sunucu uygulaması filtresi mi, WAR dosyasını işleyen bağımsız bir program mı yoksa başka bir şey mi?

Geliştirme sırasında bir sunucu uygulaması varlıkları gerektiği gibi işler. Varlıklar daha sonra üretimden önce önceden derlenir ve ortak bir klasöre yerleştirilir, böylece kullanılan tek parça HTML'de doğru içeriği oluşturmaktır.

Etkinleştirmek ve devre dışı bırakmak kolay mı? Küçültülmüş bir komut dosyasını denemek ve hatalarını ayıklamak çok komik değil, ancak bir geliştiricinin küçültmenin hiçbir şeyi bozmadığını test edebilmesi de yararlıdır.

Bu, geliştirme ve üretim modları arasında geçiş yapılarak yapılabilir.

Şeffaf bir şekilde çalışıyor mu veya günlük işlerimde göz önünde bulundurmam gereken herhangi bir yan etkisi var mı (küçültmenin doğasında olanların dışında)?

Şeffaf olduğuna inanıyorum, ancak Web Jar'ların kullanımını kuvvetle destekliyor.

Hangi minifier kullanıyor?

Sınıf yolunuza koyduğunuz eklenti hangisini kullanırsa kullansın. Şu anda Google Closure Compiler için bir eklenti yazmaya bakıyorum.

Aklınıza gelebilecek herhangi bir özelliği yok mu?

Üretimde kullanmama rağmen, hala ön yayın. Maven eklentisinin hala çok çalışmaya ihtiyacı var.

Bunun nesinden hoşlanıyorsun?

Çerçeveyi yapılandırmak için yalnızca bir bağımlılık eklemenin basitliği

Onunla ilgili neyi sevmiyorsun?

Bu benim bebeğim, hepsini seviyorum;)

Buradaki partiye gerçekten geç kaldı, ancak bunun birisinin hala farklı bir cevap aramasına yardımcı olabileceğini düşündüm:

YUI Compressor'ı kullanmaya çalıştıktan sonra, jQuery ve Prism'in daha yeni sürümleriyle (projem için ihtiyacım olan ve tek bir dosyaya sıkıştırılmasını istediğim iki ana 3. parti JS kitaplığı) uyumsuz olduğu için hayal kırıklığına uğradım. Ben kullanmaya karar Yani terser ES6 + 'yı destekleyen çirkinleştirmek-JS bir çatal. <exec>Görevi doğrudan kullanarak çalıştırmayı başaramadım , ancak Windows komut satırı yöntemini kullanmak en azından Win 10 için çalışıyor (başka türlü çalışamayacağını söylemiyorum, ancak bu çok kolay bir çözümdü). Path sistem değişkenine başka bir şey eklemenize gerek yoktur (Node.JS genellikle kurulum sırasında eklendiğinden). İlk önce ANT <concat>görevini büyük, sıkıştırılmamış bir dosya yapmak için kullanıyorum. <fileset>Sırayı koruyacağı için kullanın (yine de önemliyse).

<concat destfile="${js-big-file}" encoding="UTF-8" outputencoding="UTF-8" fixlastline="true">
   <filelist refid="js-input-filelist"/>
</concat>

Ardından <exec>görevi Terser gibi herhangi bir NPM programını çalıştırmak için kullanın . Bu görevdeki Apache kılavuz sayfası, bunun .bat dosyalarını çalıştırmak için Windows geçici çözümü olduğunu belirtti, ancak gerçekten hemen hemen her komut satırı uygulamasını çalıştırmanıza izin veriyor ( <exec>gizemli bir şekilde başka türlü bulamayanlar bile ).

<exec executable="cmd">
   <arg value="/c"/>
   <arg value="terser"/>
   <arg value="${js-big-file}" />
   <arg value="-o" />
   <arg value="${smaller-js-file}"/>  
</exec>

Birleştirmek? Bir ANT oluşturma komut dosyasının (diğer şeylerin yanı sıra özel JavaScript'i desteklemek için bir DITA Açık Araç Seti eklentisinin bir parçasıdır - kendi başına bir Java Web uygulaması değil, HTML5 çıktısı oluşturmak için Java kullanmak), dolayısıyla entegrasyon bunları eklemekten çok daha fazlası değildi görevleri yeni bir hedefe (varsayılanların ayarlanması ve giriş parametrelerinin kontrol edilmesiyle ilgili daha fazla kod var!).

Etkinleştirmesi / Devre Dışı Bırakması Kolay mı?Benim durumumda, JS dosyasının oluşturulmasını ve küçültülmesini dahil etmek için ANT Yapısına geçtiğim bir parametre var. Yani evet, bu hedefi yalnızca param'ı 'Evet' olarak ayarlarsam gerçekleştirir. Bu, bir ANT yapısında kurmak oldukça kolay bir şey.

Şeffaf Şimdiye kadar, dahil ettiğim birkaç JS dosyası üzerinde hiçbir etkisi yok gibi görünüyor. Bunlardan bazıları benim (ve hiçbir şekilde JS uzmanı değilim) ve bahsettiğim gibi, ortak JS kitaplıkları.

Minifier terser, ama sadece bu yöntemle komut satırı girişi ile minified herhangi biri hakkında kullanabilirsiniz.

Eksik özellikler? Terser yalnızca JavaScript ile çalışır. CSS dosyalarım için de aynısını yapmak istersem (ki bunu yaparım), YUI Compressor kullanırım.

Gibi şu anda aktif bir proje ve iyi bir desteğe sahip. Artı, mevcut uygulama (yalnızca ANT aracılığıyla<exec> hedefi ), yolda başka bir şey kullanmam gerektiğinde küçültme cihazlarını değiştirmeme izin veriyor.

Değil sevdiniz o Node.JS. gerektirir Yani Node.JS'ye karşı hiçbir şey yok, dikkat edin, sadece bu özel projenin başka türlü buna ihtiyacı yok. Bunun için YUI Compressor gibi bir Java .jar dosyası kullanmayı tercih ederim (İhtiyaç duyarsam bunu bir eklenti ile kolayca dağıtabilirim).