maven支持ecmascript6的插件 minify-maven-plugin/closure-compiler-maven-plugin

在我们使用maven打包时,很多时间需要压缩js,以前很流行的yuicompressor-maven-plugin插件,随着es6的到来,已经变得不可用了。网上经过众多搜索后,发现可以使用Minify Maven Plugin/closure-compiler-maven-plugin插件使maven能支持es6的压缩。

  1. Minify Maven Plugin
            此插件集成了yuicompressor 与google 的closure-compiler编译器,可以压缩css/js,但是缺点使用的closure-compiler是2016年版本,压缩后的目标文件不能生产ECMASCRIPT2015(ES6)(使用WHITESPACE_ONLY模式时,可以生成ES6版本,但是...)版本,最高只能生成ES5。

            具体使用可以参考
    https://github.com/samaxes/minify-maven-plugin
    https://samaxes.github.io/minify-maven-plugin/

    这里介绍一下不加.min后缀的压缩方式:(configuration中的配置参数都可以使用eclipse自动提示功能查看其意义)
     
    <plugin>
        <groupId>com.samaxes.maven</groupId>
        <artifactId>minify-maven-plugin</artifactId>
        <version>1.7.6</version>
        <executions>
            <execution>
                <id>default-minify</id>
                <configuration>
                    <charset>UTF-8</charset>
                    <cssSourceDir>./</cssSourceDir>
    
                    <!-- 压缩webapp目录下的所有js文件,但是排除*.min.js文件; -->
                    <jsSourceDir>./</jsSourceDir>
                    <jsIncludes>
                        <jsInclude>**/*.js</jsInclude>
                    </jsIncludes>
                    <jsExcludes>
                        <jsExclude>**/*.min.js</jsExclude>
                    </jsExcludes>
    
                    <!-- 使用closure压缩时的压缩级别,默认值为SIMPLE_OPTIMIZATIONS。可选值: -->
                    <!-- WHITESPACE_ONLY:只压缩空格和转换一些特殊符号 -->
                    <!-- SIMPLE_OPTIMIZATIONS:简单的压缩 -->
                    <!-- ADVANCED_OPTIMIZATIONS:高级压缩,此压缩方式下可能会将引用的第3方框架的方法名称修改,导致js报错;慎用。 -->
                    <closureCompilationLevel>SIMPLE_OPTIMIZATIONS</closureCompilationLevel>
    
                    <!-- js压缩引擎,默认值为YUI。可选值: -->
                    <!-- YUI: 使用YUI Compressor压缩; -->
                    <!-- CLOSURE: 使用Google Closure Compiler压缩 -->
                    <jsEngine>CLOSURE</jsEngine>
                    <skipMerge>true</skipMerge><!-- 不合并js/css -->
                    <nosuffix>true</nosuffix><!-- 压缩后的文件不.js前添加.min前缀 -->
                </configuration>
                <goals>
                    <goal>minify</goal>
                </goals>
            </execution>
        </executions>
    </plugin>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <configuration>
            <!-- 如果不增加此配置 src/main/webapp 下面的内容 会重新复制到target输出目录 覆盖掉编译后的内容 这样编译的还是未压缩过的内容,增加上此过滤 打war包就不会内容覆盖 -->
            <warSourceExcludes>
                            <![CDATA[
                                %regex[^.+(?:(?<!(?:-|\.)min)\.js)], %regex[^.+(?:(?<!(?:-|\.)min)\.css)]
                            ]]>
            </warSourceExcludes>
        </configuration>
    </plugin>
  2. closure-compiler-maven-plugin

            closure-compiler-maven-plugin这个插件是Minify Maven Plugin的变种,在其基础上演变而来的。可以支持压缩后的js格式为ES6,但不能支持css的压缩,configuration节点格式与Minify Maven Plugin插件有所不同。

            参见:
            https://github.com/blutorange/closure-compiler-maven-plugin
            https://blutorange.github.io/closure-compiler-maven-plugin/

    使用方法:(configuration中的配置参数都可以使用eclipse自动提示功能查看其意义)
    <plugins>
        <plugin>
            <!-- 此插件只能压缩js,不能压缩css;如果需要压缩css,可以考虑使用yuicompressor -->
            <groupId>com.github.blutorange</groupId>
            <artifactId>closure-compiler-maven-plugin</artifactId>
            <version>2.9.0</version>
            <executions>
                <execution>
                    <id>default-minify</id>
                    <configuration>
                        <encoding>UTF-8</encoding>
    
                        <!-- 压缩webapp目录下的所有js文件,但是排除*.min.js文件; -->
                        <targetDir>./</targetDir>
                        <includes>**/*.js</includes>
                        <excludes>**/*.min.js</excludes>
    
                        <!-- 输出目录为${project.build.directory}/${project.build.finalName}下的目录,不配置时默认为js. -->
                        <sourceDir>./</sourceDir>
    
                        <!-- 跳过js文件合并 -->
                        <skipMerge>true</skipMerge>
    
                        <!-- js文件输出格式,默认为#{path}/#{basename}.min.#{extension} -->
                        <outputFilename>#{path}/#{basename}.#{extension}</outputFilename>
    
                        <!-- js源文件版本,直接填最高即可,都能向下兼容 -->
                        <closureLanguageIn>ECMASCRIPT_2019</closureLanguageIn>
    
                        <!-- js压缩后的文件格式版本,注意与浏览器的兼容性 -->
                        <closureLanguageOut>ECMASCRIPT_2015</closureLanguageOut>
    
                        <!-- 使用closure压缩时的压缩级别,默认值为SIMPLE_OPTIMIZATIONS。可选值: -->
                        <!-- WHITESPACE_ONLY:只压缩空格和转换一些特殊符号 -->
                        <!-- SIMPLE_OPTIMIZATIONS:简单的压缩 -->
                        <!-- ADVANCED_OPTIMIZATIONS:高级压缩,此压缩方式下可能会将引用的第3方框架/其它js文件中的的方法名称修改,导致js报错;慎用。 -->
                        <closureCompilationLevel>SIMPLE_OPTIMIZATIONS</closureCompilationLevel>
                    </configuration>
                    <goals>
                        <goal>minify</goal>
                    </goals>
                    <phase>generate-resources</phase>
                </execution>
            </executions>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <configuration>
                <!-- 如果不增加此配置 src/main/webapp 下面的内容 会重新复制到target输出目录 覆盖掉编译后的内容 这样编译的还是未压缩过的内容,增加上此过滤 打war包就不会内容覆盖 -->
                <warSourceExcludes>
                    <![CDATA[
                        %regex[^.+(?:(?<!(?:-|\.)min)\.js)], %regex[^.+(?:(?<!(?:-|\.)min)\.css)]
                    ]]>
                </warSourceExcludes>
            </configuration>
        </plugin>

     

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值