Question

我们有一个相当古老的Maven网络应用程序，我的任务是优化前端。我发现我们的CSS中有数百个未使用的样式规则（由LESS生成）。我们已经开始在我们的应用程序构建过程中实现Gulp，我想实现一个从CSS中删除所有未使用的样式规则的任务。这应该会大大减少我们提供的CSS文件的大小。我遇到的问题是这个任务需要CSS和HTML文件。由于这是一个JSP应用程序，因此当用户请求该页面时，不会在构建过程中生成HTML。这意味着我没有此任务所需的静态HTML文件。

我打算使用的插件是： https://www.npmjs.com/package/gulp-uncss

我希望我们可以添加一个生成静态HTML文件的构建步骤，然后我们可以在Gulp任务中使用它来删除未使用的CSS规则，然后运行另一个删除这些文件的Gulp任务。

Answer 1

JSP是一个动态的，你永远不知道JSP页面生成了什么。它是一个绝对动态的模板引擎，它编译成一个servlet而不是html。此servlet将响应写入模板使用的文本。

所以，你不能在服务器端使用Gulp，而是使用JSP作为端点，或者使用servlet来修复JSP。

Answer 2

本质上JSP是动态的，因此您无法从它们生成静态页面。

一个可能的选择是手动访问浏览器中的每个页面并检索生成的HTML，但这会非常耗时且存在问题。

考虑：

<c:if test="${something eq true}">
    <div style="styleOne"/>
</c:if>
<c:if test="${something eq false>
    <div style="styleTwo"/>
</c:if>

你需要确保不会意外地忽略课程。

在这种情况下我可能会使用脚本来获取正在使用的类列表。它仍然是耗时的。您可以使用像ack这样简单的内容来获取项目中class="someClass"的所有用法的列表。例如：

ack 'class=".*"'

这将打印出整个项目中class=的每次使用。从那里，您可以过滤它或只是优化正则表达式只打印class属性中的内容。

至于验证ID，这将更耗时，但希望它们不太普遍。我会再次使用ack，但将class替换为id。然后我会对CSS使用类似的查询。

ack --type=css "#.*{"

这将在CSS文件中找到ID的每次使用。然后，我将与之前获得的ID列表交叉引用。

}可以安全地删除CSS输出中但不在id=".*"查询中的任何ID。

我们如何在Maven应用程序的构建过程中从JSP生成静态HTML文件

2 个答案: