1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Java】JavaScriptファイルの最適化を助けるClosure Compiler Maven Pluginの設定ガイド【Maven】

Last updated at Posted at 2023-07-11

JavaのWeb開発でJavaScriptの部分も担当している皆さん、こんにちは。今日は、JavaScriptファイルの結合や最小化を行うためのツール、Closure Compiler Maven Pluginの設定方法について解説します。この記事は、Mavenを使用してWeb開発を行っている方々、特にビルドプロセスの最適化に興味がある方々に向けて書いています。

Closure Compiler Maven Pluginとは

過去にはminify-maven-pluginやyui-compressor-pluginといったツールがありましたが、これらの更新はすでに停止しており、最近の環境ではエラーが発生しています。これに対し、Closure Compiler Maven PluginはGoogleのClosure Compilerを使用してJavaScriptファイルを処理するために設計されており、JavaScriptファイルのビルドプロセスをより効率的に行うことが可能です。

出力ファイル名のカスタマイズ

このプラグインのデフォルトの設定では、出力ファイルの名前は元のファイル名に ".min" が追加されます。しかし、出力ファイル名に ".min" を追加せずに元のファイル名を保持したい場合がありますよね。そのための設定方法を解説します。

まず、outputFilename の設定を "#{path}/#{basename}.#{extension}" に変更します。これにより、出力ファイルの名前は元のファイル名と同じになります。以下に、その設定例を示します。

pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<build>
    <plugins>
        <plugin>
            <groupId>com.github.blutorange</groupId>
            <artifactId>closure-compiler-maven-plugin</artifactId>
            <version>2.25.0</version>
            <configuration>
                <!-- Base configuration for all executions (bundles) -->
                <baseSourceDir>${project.basedir}/src/main/resources</baseSourceDir>
                <baseTargetDir>${project.build.directory}/classes</baseTargetDir>
            </configuration>
            <executions>
                <!-- Process all files in the "includes" directory individually-->
                <execution>
                    <id>default-minify</id>
                    <configuration>
                        <encoding>UTF-8</encoding>
                        <sourceDir>static/app</sourceDir>
                        <targetDir>static/app</targetDir>
                        <includes>
                            <include>**/*.js</include>
                        </includes>
                        <excludes>
                            <exclude>**/*.min.js</exclude>
                        </excludes>
                        <skipMerge>true</skipMerge>
                        <closureEmitUseStrict>false</closureEmitUseStrict>
                        <closureLanguageOut>STABLE</closureLanguageOut>
                        <outputFilename>#{path}/#{basename}.#{extension}</outputFilename>
                    </configuration>
                    <goals>
                        <goal>minify</goal>
                    </goals>
                    <phase>generate-resources</phase>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

この設定は skipMergetrue に設定されている場合(つまり、各ファイルが個別に処理される場合)のみ有効です。skipMergefalse に設定されている場合(つまり、すべてのソースファイルが一つの大きなファイルにマージされる場合)は、outputFilename は固定の名前を指定する必要があります。

まとめ

以上が、Closure Compiler Maven Pluginの紹介と出力ファイル名のカスタマイズ方法についてのガイドです。この設定を活用して、JavaScriptファイルの結合と最小化をより効率的に行いましょう。JavaScriptの開発を行っている皆さんの開発効率が上がることを願っています。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?