您的位置：首页 > Web前端 > CSS

maven项目中使用pom文件给js css 打版本号

2017-12-13 14:35 1451 查看

（1）首先找到项目中的pom文件

然后找到plugins 标签，然后将以下代码粘贴进去

<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>2.3-cccc-SNAPSHOT</version>
<configuration>
<overlays>
<!--<overlay>-->
<!--<groupId>cn.com.***.creditcard</groupId>-->
<!--<artifactId>static_resource</artifactId>-->
<!--</overlay>-->
</overlays>

<!--
是否开启资源处理
只有当这个为true的时候才会对资源文件做版本号处理
-->
<processResource>true</processResource>
<!--是否开启JS文件压缩-->
<compressJs>true</compressJs>
<!--是否开启CSS文件压缩-->
<compressCss>true</compressCss>
<!--资源文件的文件编码，这里的资源文件就是指jsp或js文件-->
<resourcesEncoding>UTF-8</resourcesEncoding>
<!--源代码管理工具，目前支持Svn、Git两种方式-->
<scmType>Svn</scmType>
<!--
源代码路径，如果是SVN请直接填写SNV工程所在路径。
如果是Git
路径可填写git-server:java/platform/**.git
也可以直接填写.git
如果是一个pom工程，下面带多个子模块。
例如本例：父pom.xml文件
<modules>
<module>cccc_card_web_core</module>
<module>cccc_card_web_admin</module>
<module>cccc_card_web</module>
<module>static_resource</module>
</modules>
静态资源文件均放在static_resource。则可以填写 .git/static/resource  建议用这种，但打包前需要执行git pull保证你本地的代码库是最新的
还可填写为/var/git/static_resource.git这样的本地绝对路径
站内有些web工程是互相依赖的，所以有时候需要提供多个源代码路径
-->
<scmPaths>
<path>svn://*.*.*.*/WSOperation/trunk/0-Src/WSOperation</path>
</scmPaths>
<!--
需要处理的文件
插件扫描到文件后会解析文件内容，寻找需要进行版本处理的文件
站内目前只有jsp或者js里的内容需要做版本号处理

-->
<resourcesIncludes>
<include>**/*.html</include>
<include>**/*.jsp</include>
<include>**/*.js</include>
<include>**/*.xml</include>
</resourcesIncludes>
<!--
在资源代码中用于表示需要打版本号的特征
现在要求每个前端都要在js和css后面加?rev，个参数就是设定特征
-->
<traitRegex>\?rev</traitRegex>
<!--
处理文件名时，在版本号前的前缀
最终文件名示例：common.$41852.css
-->
<fileNameSep>.$</fileNameSep>
<!--
版本号处理的版本号规则，固定的三个值
当前主站的格式就是Short形式的版本规则 示例：common.$41852.css
Short 如果采用SVN代码管理库，读取到的资源版本号为一个数值。Git为一个7位的不重复hash
Full  如果采用SVN，同Short值一样。Git为一个很长的hash值
Time  SVN或Git都为文件提交时间，格式：201212070005
-->
<versionType>Short</versionType>
</configuration>
</plugin>
```

(2)然后在jsp 或者html文件中添加引用

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="img/favicon.png"/>
<title></title>

//其中需要添加版本号的文件里面应该添加${urlStatic}，${urlStatic}是指src/main/webapp目录这样基本上所有的js和css文件都在src/main/webapp目录下。然后再js后面添加?rev
<script type="text/javascript" src="${urlStatic}/js/lib/lib/My97DatePicker/WdatePicker.js?rev"></script>
//像下面这种虽然在js后面添加了?rev，但是没有添加${urlStatic}为根路径 所以还是不会打版本号
<script type="text/javascript" src="js/lib/sea.js?rev" data-config="seajs-config.js" data-main="seajs-bootstrap.js"></script>

<script type="text/javascript" src="${urlStatic}/js/business.js?rev"></script>
<link rel="stylesheet" type="text/css" href="${urlStatic}/css/main-1.2.1-RELEASE.css?rev"/>
</head>

如不添加${urlStatic}的话，则需要将路径写成从根目录开始的全路径。

（3）打完war包之后，会发现war包中的js文件已经压缩好了，并且有一个源文件和带版本号的文件。

（4）然后去引用js或者css文件的HTML文件（或者jsp文件）里面看，会发现需要打版本号的文件已经自动变成了引用打版本号的文件，具体如下所示

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="img/favicon.png"/>
<title></title>
//这个自动变成了打版本号码的
<script type="text/javascript" src="${urlStatic}/js/lib/lib/My97DatePicker/WdatePicker.$16.js"></script>
<script type="text/javascript" src="js/lib/sea.js?rev" data-config="seajs-config.js" data-main="seajs-bootstrap.js"></script>

//这个自动变成了打版本号码的
<script type="text/javascript" src="${urlStatic}/js/business.$20.js"></script>
//这个自动变成了打版本号码的
<link rel="stylesheet" type="text/css" href="${urlStatic}/css/main-1.2.1-RELEASE.$16.css"/>
</head>

注意：

这个jar包maven库里面有，可以直接使用maven的setting文件mirror映射到点兵的maven库。

也可以直接在pom文件里面直接添加上maven库的mirror-central仓库。具体如下所示；

<repository>
<id>mirror-central</id>
<name>Mirror Central Repo</name>
<url>http://ip:380/content/repositories/mirror-central<;/url>
<layout>default</layout>
<releases>
<enabled>true</enabled>
<updatePolicy>always</updatePolicy>
</releases>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>

更正一下：urlStatic是不需要加的，只加？rev就可以打印出来版本号码.如不添加{urlStatic}的话，则需要将路径写成从根目录开始的全路径。

<!-- 测试start -->
<!-- 其中需要添加版本号的文件里面应该添加${urlStatic}，${urlStatic}是指src/main/webapp目录这样基本上所有的js和css文件都在src/main/webapp目录下。然后再js后面添加?rev -->
<script type="text/javascript" src="${urlStatic}/js/business.js?rev"></script>
<!-- 像下面这种虽然在js后面添加了?rev，但是没有添加${urlStatic}为根路径 所以还是不会打版本号 -->
<script type="text/javascript" src="js/lib/sea.js?rev" data-config="seajs-config.js" data-main="seajs-bootstrap.js"></script>

<script type="text/javascript" src="${urlStatic}/js/flexible.js?rev"></script>
<link rel="stylesheet" type="text/css" href="${urlStatic}/css/main.css?rev"/>
<!-- 测试end -->

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航