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才能有前端页面。