jcv-maven-plugin 一个自动为网页添加js/css的版本号的maven插件

发表于 | 分类于

jcv-maven-plugin

为什么有这个插件

传统方案:

  • js和css缓存问题如果是在做web项目的话，那么肯定都会碰到，往解决方式是多刷新浏览器，如果需要用户多刷新一次才能正常展示显然是很不合理的。
  • 解决方案也有很多，例如：常见手动后添版本号或者统一添加时间戳。
  • 但是上面的几方法存问题如果我只是修改了js一变量，然后回去添加一次版本号，如果一个js被多个页面引用，就修很页面而且难保会修改掉的。
  • 统一添加时间戳确可解决所以的js和css全部重新加载不使缓存，这里引一问题如流量大的话，在发布的这瞬间，网站瞬间流量增加很高。

jcv-maven-plugin解决方案:

  • 版本通过计算js/css文件md5值作版本号，可解决全失效问题。
  • 自动化，自动进行修改版本号，无需关心每次修改代码还需要修版本号。
  • jcv提供md5文件名功能，使用md5名称作为js或css文件名称，可以避免有浏览忽版本号问题和js文件拦截问题。

简介

jcv-maven-plugin是一个自动为网页添加js css的版本号maven插件

  • 支持js css的自动压缩，支持多种方法版本号添加，在使用时对代码零入侵，不需要在页面上做任何标记，对开发友好，不需要调整现在代码．直接引入mvn中配置，会自动对打包的页面进行处理．
  • 该插件自动采集文件的md5值进行文件版本号修订，在使用文件的md5值用于该文件的版本号，因此该插件不会引发js css缓存全部失效（因此不建议使用时间戳的方式）,同时修改的内容又能及时到客户浏览器中去，不会在存在缓存的问题．
  • 支持清理网页上的<!-- -->注释，让网页更干净．
  • 所有的操作都不会修改代码，只会对打包文件进行修改．文件名md5的方式可以解决有些浏览器忽略version标签．
  • 目前该插件以发布到maven中央仓库,可以坐标引用使用.

github

https://github.com/byzy/jcv-maven-plugin

java web 示例

基本环境信息

  1. 项目名称test-web
  2. jdk 1.7+ (如果需要使用1.6自编安装本地)
  3. maven 3.x.x 以上
  4. static/js/index.js 文件完整目录src/main/webapp/static/js/index.js
  5. static/css/index.css 文件完整目录src/main/webapp/static/css/index.css

一 、使用相对路径变项名称

  1. 页面使用标签示例(${basePath} 表示项目名称动态传入)：

    1
    2
    <script  src="${basePath}static/js/index.js"></script>
    <link type="text/css" rel="stylesheet" href="${basePath}static/css/index.css" />

  2. 使用配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <!--jcv-maven-plugin -->
    <plugin>
      <groupId>com.iqarr.maven.plugin</groupId>
      <artifactId>jcv-maven-plugin</artifactId>
      <version>${last.released}</version>
      <executions>
         <execution>  
                  <id>process</id>  
                  <phase>process-resources</phase>  
                  <goals>  
                      <goal>process</goal>                            
                  </goals>  
              </execution>  
      </executions>
      <configuration>
        <!--如果项目名称使用EL表达式 那么必须加\ 转义 -->
        <jsConstantName>\${basePath}</jsConstantName>
        <cssConstantName>\${basePath}</cssConstantName>
        <suffixs>
          <param>html</param>
          <param>ftl</param>
        </suffixs>
       <!-- 清理html 页面注释-->
        <clearPageComment>true</clearPageComment>
        <globaJsMethod>MD5_METHOD</globaJsMethod>
        <globaCssMethod>MD5_METHOD</globaCssMethod>
        <!-- 压缩js-->
        <compressionJs>false</compressionJs>
        <!-- 压缩css-->
        <compressionCss>false</compressionCss>
      </configuration>
    </plugin>
    <!--maven-war-plugin -->
    <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.1.0</version>
        <configuration>
            <warSourceDirectory>src/main/webapp</warSourceDirectory>
            <warSourceExcludes>**/*.html,**/*.ftl</warSourceExcludes>
        </configuration>
    </plugin>

二 、使用cdn或域名形式

  1. 页面使用标签示例(注意：该形式使用了动静分离，但是处理js和cs必须在 src/main/webapp中)：

    1
    2
    <script  src="http://script.iqarr.com/static/js/index.js"></script>`
    <link type="text/css" rel="stylesheet" href="http://style.iqarr.com/static/css/index.css" />

  2. 使用配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!--jcv-maven-plugin -->
    <plugin>
      <groupId>com.iqarr.maven.plugin</groupId>
      <artifactId>jcv-maven-plugin</artifactId>
      <version>${last.released}</version>
      <executions>
         <execution>  
                  <id>process</id>  
                  <phase>process-resources</phase>  
                  <goals>  
                      <goal>process</goal>                            
                  </goals>  
              </execution>  
      </executions>
      <configuration>
        <baseJsDomin>
          <!--允许多个 -->
    			<param>http://script.iqarr.com</param>
    		</baseJsDomin>
    		<baseCssDomin>
          <!--允许多个 -->
    			<param>http://style.iqarr.com</param>
    		</baseCssDomin>
        <suffixs>
          <param>html</param>
          <param>ftl</param>
        </suffixs>
       <!-- 清理html 页面注释-->
        <clearPageComment>true</clearPageComment>
        <globaJsMethod>MD5_METHOD</globaJsMethod>
        <globaCssMethod>MD5_METHOD</globaCssMethod>
        <!-- 排除文件列表 或者使用 min 后缀 会自动排除-->
        <excludesJs>
        	<param>plugin/kindeditor/kindeditor.js</param>
        </excludesJs>
        <!-- 排除文件列表 或者使用 min 后缀 会自动排除-->
        <excludesCss>
        		<param>plugin/kindeditor/themes/default/default.css</param>
        </excludesCss>
        <!-- 压缩js-->
        <compressionJs>false</compressionJs>
        <!-- 压缩css-->
        <compressionCss>false</compressionCss>
      </configuration>
    </plugin>
    <!--maven-war-plugin -->
    <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.1.0</version>
        <configuration>
            <warSourceDirectory>src/main/webapp</warSourceDirectory>
            <warSourceExcludes>**/*.html,**/*.ftl</warSourceExcludes>
        </configuration>
    </plugin>

打包

1
2
mvn clean package
# 注意该插件不会在eclipse中生效，在package后才会生效

新版本特性

version 1.0.2

  1. bug fix.
  2. 修改文档.

注意事项

  1. 不支持 ../../xxx.js
  2. 不支持 ../../xx.css
  3. 如果启用js压缩，那么在js中变量定义禁止使用js关键字
  4. html 清除注释只支持网页中的<!-- -->
  5. 插件不会在eclipse中生效，在package后才会生效
  6. 注意在使用md5文件名的时候请注意排除一些js动态加载css,如果修改了文件名会导致无法加载到css,因此需要排除掉，目前已知有kindeditor,layer,My97DatePicker
  7. js css文件编码必须utf-8
  8. jdk version >=1.7 ,对于需要支持1.6的版本可以自己编译安装到本地仓库就可以