当前位置:首页 > java > 正文内容

spring boot 使用ththymeleaf 模板压缩css,js,html

wuzhizhan2个月前 (03-04)java200

springboot大部分仅仅是提供api接口就可以了。但是,对于一些想做seo,又不想再拿一个独立程序做后台渲染的项目来说。springboot搭配ththymeleaf 是不错的选择。但是,如果在springboot项目中直接写前端,却是发现前端页面没经过压缩的,看着很不爽。在此,提供一个搭配maven插件的压缩的方法,整体目录架构如图所示:


image.png


安装nodejs

Node.js 中文网 (nodejs.cn)

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

扫描二维码推送至手机访问。

版权声明:本文由编程学习笔记发布,如需转载请注明出处。

本文链接:https://www.wuzhizhan.cn/post/4.html

分享给朋友:
返回列表

没有更早的文章了...

没有最新的文章了...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。