Introduction

The purpose of this documentation is to explain how to set up the Closure compiler Maven Plugin.

Today, the Fluig platform uses the YUI compressor plugin to minify CSS and JS files. However, it has remained inactive and has not been updated since 2013, making it a little outdated and making it impossible for us to use new technologies, such as ES6.


End of YUI Compressor?

It will not be possible to completely remove the YUI-Compressor from our product because the Closure Compiler will not process CSS files, only JS files. It is necessary to keep the old one in order to minify the style sheet.


Setting up the plugin

Plugins are set up in the pom.xml of each project. First of all, we need to stop YUI-Compressor from minifying JS files. To do this, we need to add the following tag to the existing setup.


In this example, we will be using the following widget: sample-component-widget

<configuration>                        
  …
  <excludes>
    <exclude>**/*.js</exclude>
  </excludes>
  …
</configuration>


Once this is done, we can set up Closure Compiler.

<plugin>
    <groupId>com.github.blutorange</groupId>
    <artifactId>closure-compiler-maven-plugin</artifactId>
    <version>2.21.0</version>
    <executions>
        <execution>
            <id>default-minify</id>
            <goals>
                <goal>minify</goal>
            </goals>
            <phase>generate-resources</phase>
        </execution>
    </executions>
    <configuration>
        <skip>false</skip>
        <baseSourceDir>${project.basedir}/src</baseSourceDir>
        <encoding>UTF-8</encoding>
        <sourceDir>main/webapp/resources</sourceDir>
        <targetDir>resources</targetDir>
        <includes>**/*.js</includes>
        <outputFilename>#{path}/#{basename}.#{extension}</outputFilename>
        <excludes>**/${project.basedir}</excludes>
        <excludes>**/*.min.js</excludes>
        <excludes>**/*-min.js</excludes>
        <closureCompilationLevel>SIMPLE_OPTIMIZATIONS</closureCompilationLevel>
        <closureWarningLevels>
            <undefinedVars>OFF</undefinedVars>
            <duplicate>OFF</duplicate>
            <duplicateMessage>OFF</duplicateMessage>
            <es5Strict>OFF</es5Strict>
            <checkVars>OFF</checkVars>
        </closureWarningLevels>
        <closureEmitUseStrict>false</closureEmitUseStrict>
        <closureRewritePolyfills>false</closureRewritePolyfills>
        <closureLanguageOut>NO_TRANSPILE</closureLanguageOut>
        <skipMinify>false</skipMinify>
        <skipMerge>true</skipMerge>
    </configuration>
</plugin>


Its documentation can be accessed here: https://blutorange.github.io/closure-compiler-maven-plugin/minify-mojo.html

Where there is an explanation of each tag used - below is an explanation of some specific settings.

Currently, if the plugin can't find a js in the defined source dir, it crashes. For this reason, in projects where the parent pom has no files to be minified, we set skip to true. However, its children must have the following setup:

			<plugin>
                <groupId>com.github.blutorange</groupId>
                <artifactId>closure-compiler-maven-plugin</artifactId>
                <configuration>
                    <skip>false</skip>
                </configuration>
        	</plugin>

Today, the minification performed on JavaScript files by the plugin can cause a conflict between the string template and the i18n internationalization mechanism, which can lead to inconsistencies. If you don't use internationalization in your JS, the template string will work as usual. We are working to provide a solution in future versions.