手写maven插件实现js/css的缓存处理

本文介绍如何创建并使用Maven插件自动更新项目中的JS和CSS资源文件版本,通过解析HTML文件,修改链接和脚本标签中的版本参数,实现资源文件版本的自动化管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.创建maven项目 pom如下

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.packer</groupId>
  <artifactId>maven-plugin-js-css-version</artifactId>
  <version>0.0.1-SNAPSHOT</version>
    <packaging>maven-plugin</packaging>    <!-- 这里注意写为maven-plugin -->
  <dependencies>
  	<dependency>
  		<groupId>org.apache.maven</groupId>
  		<artifactId>maven-plugin-api</artifactId>
  		<version>3.5.0</version>
  	</dependency>
  	<dependency>
  		<groupId>org.apache.maven.plugin-tools</groupId>
  		<artifactId>maven-plugin-annotations</artifactId>
  		<version>3.5</version>
  		<scope>provided</scope>
  	</dependency>
	<dependency> <!-- 采用jsoup包来处理html页面-->
	    <groupId>org.jsoup</groupId>
	    <artifactId>jsoup</artifactId>
	    <version>1.11.3</version>
	</dependency>
  </dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-plugin-plugin</artifactId>
				<version>3.4</version>
			</plugin>
		</plugins>
	</build>
</project>

2.编写java类处理

package com.packer;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;

import org.apache.commons.lang3.StringUtils;
import org.apache.maven.plugin.AbstractMojo;
import org.apache.maven.plugin.MojoExecutionException;
import org.apache.maven.plugin.MojoFailureException;
import org.apache.maven.plugins.annotations.LifecyclePhase;
import org.apache.maven.plugins.annotations.Mojo;
import org.apache.maven.plugins.annotations.Parameter;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.select.Elements;

@Mojo(name="v",defaultPhase=LifecyclePhase.PACKAGE)
public class ResourceProcess extends AbstractMojo{
	
	@Parameter(property="newVersion")
	private String newVersion;
	
	@Parameter(property="suffixs")
	private List<String> suffixs;
	
	private static String[] tagNames = {"link|href","script|src"};
	
	
	public void execute() throws MojoExecutionException, MojoFailureException {
		File root = new File(System.getProperty("user.dir"));
		recursionFile(root);
	}
	
	private void recursionFile(File file) {
		if(file == null || suffixs == null) {
			return;
		}
		if(file.isFile()) {
			String fileName = file.getName();
			if(suffixs.contains(fileName.substring(fileName.lastIndexOf(".")+1))) {
				//读取文件并且修改js与css的版本号
				try {
					replaceVersion(file);
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
			return;
		}
		if(file.isDirectory()) {
			File[] listFiles = file.listFiles();
			if(listFiles != null) {
				for (File newFile : listFiles) {
					recursionFile(newFile);
				}
			}
		}
	}
	private void replaceVersion(File file) throws IOException {
		Document document = Jsoup.parse(file, "utf-8");
		for (String tagName : tagNames) {
			String[] tags = tagName.split("\\|");
			Elements elements = document.getElementsByTag(tags[0]);
			if(elements != null && !elements.isEmpty()) {
				elements.forEach(element->{
					String oldValue = element.attr(tags[1]);
					String subValue = oldValue;
					if(oldValue.contains("?")) {
						subValue = oldValue.substring(0,oldValue.lastIndexOf("?"));
					}
					if(StringUtils.isBlank(newVersion)) {
						SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
						newVersion = sdf.format(new Date());
					}
					element.attr(tags[1],subValue+"?v="+newVersion);
				});
			}
		}
		FileOutputStream fos = new FileOutputStream(file, false);
		OutputStreamWriter osw = new OutputStreamWriter(fos, "utf-8");
		osw.write(document.html());
		osw.close();
	}
	

}

3.使用mvn install 进行安装
在这里插入图片描述
4.新建一个maven项目,并且在项目中创建几个html文件,在文件中引入外部js与css的标签

<!doctype html>
<html>
 <head> 
  <meta charset="UTF-8"> 
  <title>Insert title here</title> 
  <link href="asas.css"> 
 </head> 
 <body> 
  <script type="text/javascript" src="asasas.js"></script>  
 </body>
</html>

5.在新的项目的pom文件中引入第一个项目的依赖

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.test</groupId>
  <artifactId>fafa</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <build>
  	<plugins>
  		<plugin>
  			<groupId>com.packer</groupId>
  			<artifactId>maven-plugin-js-css-version</artifactId>
  			<version>0.0.1-SNAPSHOT</version>
  			<configuration>
  				<suffixs>
  					<suffix>html</suffix>
  				</suffixs>
  				<newVersion>1.2.6</newVersion>    <!-- 此处注释掉 每次的版本号将采用年月日时分秒 -->
  			</configuration>
  		</plugin>
  	</plugins>
  </build>
</project>

6.使用命令mvn com.packer:maven-plugin-js-css-version:0.0.1-SNAPSHOT:v
命令的写法是(groupId:artifactId:version:goal)
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值