Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Índice
minLevel2
outlinetrue
exclude.*ndice
stylenone


Introdução

Essa documentação tem como objetivo explicar como é feita a configuração do plugin Closure compiler Maven Plugin

Hoje no Fluig plataforma utiliza-se o plugin YUI compressor para minificar arquivos CSS e JS. Porém o mesmo permanece inativo e sem atualização desde 2013 ficando um pouco ultrapassado e nos impossibilitando de utilizar novas tecnologias, como o ES6.

Fim do YUI Compressor?

Não será possível remover completamente o YUI-Compressor de nosso produto pois o Closure Compiler não irá processar arquivos CSS, apenas JS. Sendo necessário a permanência do antigo para minificar a folha de estilo.

Configurando o plugin

Os plugins são configurados nos pom.xml de cada projeto. Primeiramente devemos fazer com que o YUI-Compressor pare de minificar os arquivos JS, para isso na configuração já existente precisamos adicionar a seguinte tag dentro da configuração.


No exemplo estaremos utilizando a widget: sample-component-widget

Bloco de código
languagexml
themeConfluence
titleIgnorando arquivos JS - YUI Compressor
<configuration>                        
  …
  <excludes>
    <exclude>**/*.js</exclude>
  </excludes>
  …
</configuration>


Feito isso, podemos configurar o Closure Compiler. 

Bloco de código
languagexml
themeConfluence
titleExemplo de configuração usada no pom: wcmsample-component-widget
linenumberstrue
                    <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>true</skip>
                    <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>
Aviso
titleImportante

O plugin é declarado dentro do profile "onlyminify" do pom.xml. No build de desenvolvimento o skipMinify é true. Para evitar que em nosso dia a dia o tempo de compilação seja maior do que o necessário.


A documentação do mesmo pode ser acessada aqui: https://blutorange.github.io/closure-compiler-maven-plugin/minify-mojo.html

...

Nota
titleAtenção

Atualmente, caso o plugin não encontre um js dentro do source dir definido ele quebra. Por isso, em projetos onde o pom pai não possui arquivos a serem minificados, passamos o skip como true. Porém é necessário que em seus filhos haja a configuração:

Bloco de código
languagexml
themeConfluence
			<plugin>
                <groupId>com.github.blutorange</groupId>
                <artifactId>closure-compiler-maven-plugin</artifactId>
                <configuration>
                    <skip>false</skip>
                </configuration>
        	</plugin>
Nota
titleAtenção

Hoje a minificação realizada nos arquivos javaScript pelo plugin pode ocasionar um conflito entre o template de string e o mecanismo de internacionalização i18n, podendo gerar inconsistências. Caso você não use internacionalização em seu JS, template string irá funcionar normalmente. Estamos trabalhando a fim de proporcionar uma solução em próximas versões.