spring boot 使用ththymeleaf 模板压缩css,js,html
springboot大部分仅仅是提供api接口就可以了。但是，对于一些想做seo，又不想再拿一个独立程序做后台渲染的项目来说。springboot搭配ththymeleaf 是不错的选择。但是，如果在springboot项目中直接写前端，却是发现前端页面没经过压缩的，看着很不爽。在此，提供一个搭配maven插件的压缩的方法，整体目录架构如图所示：
安装nodejs
springboot 根目录创建package.json
{
"name": "tools-live-reload",
"scripts": {
"watch": "gulp serve --env production",
"build-prod": "gulp build --env production"
}
}安装必要的js库
#gulp插件 npm install --save-dev gulp gulp-watch browser-sync #babel npm install --save-dev gulp-babel @babel/core @babel/preset-env #压缩css、js npm install --save-dev gulp-terser gulp-uglifycss npm install --save-dev gulp-uglify #gulp 环境设置 npm install --save-dev gulp-environments #压缩html npm install gulp-htmlclean --save-dev npm install gulp-html-minifier-terser --save-dev
在springboot项目根添加.babelrc
{
"presets": [
"@babel/preset-env"
]
}在项目根目录添加gulp.js
const gulp = require('gulp');
const watch = require('gulp-watch');
const browserSync = require('browser-sync').create();
const environments = require('gulp-environments');
const uglifycss = require('gulp-uglifycss');
const terser = require('gulp-terser');
const production = environments.production;
const babel = require('gulp-babel')
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
gulp.task('watch', () => {
browserSync.init({proxy: 'localhost:8080',});
gulp.watch(['src/main/resources/**/*.html'], gulp.series('copy-html-and-reload'));
gulp.watch(['src/main/resources/**/*.css'], gulp.series('copy-css-and-reload'));
gulp.watch(['src/main/resources/**/*.js'], gulp.series('copy-js-and-reload'));
});
gulp.task('copy-html', () => {
return gulp.src('src/main/resources/templates/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true, //清除html注释
collapseWhitespace: true, //压缩html
collapseBooleanAttributes: true,
//省略布尔属性的值，例如：<input checked="true"/> ==> <input />
removeEmptyAttributes: true,
//删除所有空格作属性值，例如：<input id="" /> ==> <input />
removeScriptTypeAttributes: true,
//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,
//删除<style>和<link>的 type="text/css"
minifyJS: true, //压缩页面 JS
minifyCSS: true, //压缩页面 CSS
minifyURLs: true //压缩页面URL
}))
.pipe(gulp.dest('target/classes/templates/'))
});
gulp.task('copy-css', () => gulp.src(['src/main/resources/static/css/**/*.css']).pipe(production(uglifycss()))
.pipe(gulp.dest('target/classes/static/css/')));
gulp.task('copy-js', () => gulp.src(['src/main/resources/static/js/**/*.js'])
.pipe(babel({presets: ['@babel/preset-env']}))
.pipe(production(terser()).on('error', function (e) {console.log(e)}))
.pipe(gulp.dest('target/classes/static/js')));
gulp.task('copy-html-and-reload', gulp.series('copy-html', reload));
gulp.task('copy-css-and-reload', gulp.series('copy-css', reload));
gulp.task('copy-js-and-reload', gulp.series('copy-js', reload));
gulp.task('build', gulp.series('copy-html', 'copy-css', 'copy-js'));
gulp.task('serve', gulp.series('build','watch'));
function reload(done) {
browserSync.reload();
done();
}修改pom.xml，增加属性
<properties> <frontend-maven-plugin.version>1.8.0</frontend-maven-plugin.version> <frontend-maven-plugin.nodeVersion>v14.19.0</frontend-maven-plugin.nodeVersion> <frontend-maven-plugin.npmVersion>6.10.3</frontend-maven-plugin.npmVersion> </properties>
修改pom.xml中build节点
<resources> <resource> <directory>src/main/resources</directory> <excludes> <exclude>templates/**/*.html</exclude> <exclude>static/css/**/*.css</exclude> <exclude>static/js/**/*.js</exclude> </excludes> <includes> <include>**/*.yml</include> <include>**/*.xml</include> <include>**/*.ico</include> </includes> </resource> </resources>
修改pom.xml,增加插件 frontend-maven-plugin
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</version>
<executions>
<execution>
<id>install-frontend-tooling</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>${frontend-maven-plugin.nodeVersion}</nodeVersion>
<npmVersion>${frontend-maven-plugin.npmVersion}</npmVersion>
</configuration>
</execution>
<execution>
<id>run-gulp-build</id>
<goals>
<goal>gulp</goal>
</goals>
<configuration>
<arguments>build</arguments>
</configuration>
</execution>
</executions>
</plugin>修改pom.xml文件
<profiles> <profile> <id>release</id> <build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <executions> <execution> <id>run-gulp-build</id> <goals> <goal>gulp</goal> </goals> <configuration> <arguments>build --env production</arguments> </configuration> </execution> </executions> </plugin> </plugins> </build> <activation> <activeByDefault>true</activeByDefault> </activation> </profile> </profiles>
生成压缩包
mvn clean package -Prelease && java -jar target/thymeleaf-live-reload-0.0.1-SNAPSHOT.jar
注意：idea调试情况，需要运行npm run watch才能有前端页面。
