TOTVS Fluig English

Árvore de páginas


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

Ignoring JS files - YUI Compressor 
<configuration>                        
  …
  <excludes>
    <exclude>**/*.js</exclude>
  </excludes>
  …
</configuration>


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

Example setup used in pom: sample-component-widget
<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.

  • ClosureCompilationLevel - will define how advanced the minification will be - at the ADVANCED_OPTIMIZATIONS level it is possible to have JS files obfuscated.
  • Excludes - We use excludes to exclude a specific type of file from the compilation.
  • Skip - Ignores the execution of the plugin within the declared module.

Attention

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>

Attention

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.



  • Sem rótulos