TOC

MavenによるJSおよびCSS資産の縮小

Mavenを使用したJSおよびCSSアセットの縮小

1. 概要

この記事では、ビルドステップとしてJavascriptおよびCSSアセットを縮小し、Spring MVCで結果ファイルを提供する方法を示します。

基礎となるミニファイライブラリとしてYUI Compressorを使用し、ビルドプロセスに統合するためにYUI Compressor Maven pluginを使用します。

2. Mavenプラグインの構成

まず、pom.xmlファイルでコンプレッサープラグインを使用することを宣言し、compressゴールを実行する必要があります。 これにより、src/main/webappの下のすべての.jsおよび.cssファイルが圧縮され、foo.jsはfoo-min.jsとして縮小され、myCss.cssはmyCss-min.css： 


   net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress

src/main/webapp directoryには、次のファイルが含まれています。 

js/
├── foo.js
├── jquery-1.11.1.min.js
resources/
└── myCss.css

mvn clean packageを実行した後、生成されたWARファイルには次のファイルが含まれます。 

js/
├── foo.js
├── foo-min.js
├── jquery-1.11.1.min.js
├── jquery-1.11.1.min-min.js
resources/
├── myCss.css
└── myCss-min.css

3. ファイル名を同じに保つ

この段階で、mvn clean packageを実行すると、foo-min.jsとmyCss-min.cssがプラグインによって作成されます。 ファイルを参照するときに元々foo.jsとmyCss.cssを使用していたため、縮小化されたファイルの名前は元のファイルとは異なるため、ページでは引き続き元の縮小化されていないファイルを使用します。

foo.js/foo-min.jsとmyCss.css/myCss-min.cssの両方が存在しないようにし、名前を変更せずにファイルを縮小するには、次のようにnosuffixオプションを使用してプラグインを構成する必要があります。 


    net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress
            
        
    
    
        true

mvn clean packageを実行すると、生成されたWARファイルに次のファイルが含まれます。 

js/
├── foo.js
├── jquery-1.11.1.min.js
resources/
└── myCss.css

4. WARプラグインの構成

ファイル名を同じに保つことには副作用があります。 これにより、WARプラグインは縮小されたfoo.jsファイルとmyCss.cssファイルを元のファイルで上書きするため、最終出力には縮小されたバージョンのファイルがありません。 foo.jsファイルには、縮小前に次の行が含まれています。 

function testing() {
    alert("Testing");
}

生成されたWARファイルのfoo.jsファイルの内容を調べると、縮小されたコンテンツではなく、元のコンテンツが含まれていることがわかります。 この問題を解決するには、コンプレッサープラグインにwebappDirectoryを指定し、WARプラグイン構成内からこれを参照する必要があります。 


    net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress
            
        
    
    
        true
        ${project.build.directory}/min
    


maven-war-plugin

    
        
            ${project.build.directory}/min

ここでは、縮小ファイルの出力ディレクトリとしてminディレクトリを指定し、これを最終出力に含めるようにWARプラグインを構成しました。

これで、生成されたWARファイルに元のファイル名foo.jsとmyCss.css.の縮小ファイルができました。foo.jsをチェックして、次の縮小コンテンツが含まれていることを確認できます。 

function testing(){alert("Testing")};

5. すでに縮小されたファイルを除外する

サードパーティのJavascriptおよびCSSライブラリには、ダウンロード可能な縮小バージョンが含まれている場合があります。 プロジェクトでこれらのいずれかを使用した場合、それらを再度処理する必要はありません。

すでに縮小されたファイルを含めると、プロジェクトのビルド時に警告メッセージが生成されます。

たとえば、jquery-1.11.1.min.jsはすでに縮小されたJavascriptファイルであり、ビルド中に次のような警告メッセージが表示されます。 

[WARNING] .../src/main/webapp/js/jquery-1.11.1.min.js [-1:-1]:
Using 'eval' is not recommended. Moreover, using 'eval' reduces the level of compression!
execScript||function(b){a. ---> eval <--- .call(a,b);})
[WARNING] ...jquery-1.11.1.min.js:line -1:column -1:
Using 'eval' is not recommended. Moreover, using 'eval' reduces the level of compression!
execScript||function(b){a. ---> eval <--- .call(a,b);})

すでに縮小されたファイルをプロセスから除外するには、次のようにexcludesオプションを使用してコンプレッサープラグインを構成します。 


    net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress
            
        
    
    
        true
        ${project.build.directory}/min
        
            **/*.min.js

これにより、ファイル名がmin.jsで終わるすべてのディレクトリの下にあるすべてのファイルが除外されます。 mvn clean packageを実行しても警告メッセージは表示されず、ビルドは既に縮小されたファイルを縮小しようとしません。

6. 結論

この記事では、JavascriptとCSSファイルの縮小をMavenワークフローに統合する優れた方法を説明しました。 Spring MVCアプリケーションでこれらの静的アセットを提供するには、Serve Static Resources with Springの記事を参照してください。

この記事のコードはGitHubにあります。

Related