使用gulp热部署spring boot的thymeleaf静态文件

IDE 2019-11-30 阅读 271 评论 0

如果用了这里的说到的办法(Intellij IDEA Spring boot 静态文件自动加载热部署)还不能实现静态文件热部署,可以结合Gulp工具。使用 Gulp 工具主要是将 thymeleaf 的模版文件实时同步到 Intellij Idea 的编译目录上,从而实现热部署。

Gulp 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

1. 安装 Gulp

为了能够使用 Gulp,需要在电脑上安装Node.js (Node) 和 npm (Node Package Manager),如果电脑上还没有安装,可以参考 Node 的官网。安装成功后,运行一下命令,安装Gulp CLI。

npm install gulp-cli -g

上面的 -g,全局安装的意思,使用这个参数安装后,我们将可以直接在命令行里使用 gulp。

2. 新建 package.json 到根目录

npm 是使用 package.json 文件来管理依赖包,在 spring boot 的根目录上,新建package.json 文件。

{
  "name": "demo",
  "scripts": {
    "gulp-watch": "gulp watch"
  },
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-watch": "^5.0.1"
  }
}

3. 安装依赖包

然后运行

npm install

运行完之后,会在根目录上生成一个文件夹 node_modules,里面存放的是项目的所有依赖包文件。

4. 编写gulpfile.js

Gulp的任务写在gulpfile.js文件中,该文件也放在应用程序根目录中。现在,开始创建 Gulp 任务,监视 thymeleaf 模板和静态资源的更改,并将文件复制到build/resources/main 目录,注意,这个目录需要与开发者本地的编译目录一致,有的是在 out/production/resources ,下面是完整的代码。

var gulp = require('gulp'), 
    watch = require('gulp-watch');

gulp.task('watch', function () {
    return watch('src/main/resources/**/*.*', () => {
            gulp.src('src/main/resources/**')
                .pipe(gulp.dest('build/resources/main/'));   // 需要注意这一行的目录,必须改成你本地的项目编译目录
    });
});

gulp.task('default', ['watch']);

添加以上代码,**是指所有深度的文件夹

5. 运行gulp任务

最后是运行 gulp 任务,可以用命令行运行 gulp, gulp watch 或者 npm run gulp-watch

Gulp将会在你编辑Thymeleaf模板或资源文件时,持续监视src/main/resources/中的文件,只要开发者增删改查这个目录的文件,gulp 将会复制它们到目标目录中。这只是一个简单的例子,如何使用Gulp自动化您的应用程序工作流。您甚至可以使用它来构建、打包和部署整个Spring引导应用程序,只需一个命令。您也来试试。

最后更新 2019-12-07
MIP.watch('startSearch', function (newVal, oldVal) { if(newVal) { var keyword = MIP.getData('keyword'); console.log(keyword); // 替换当前历史记录,新增 MIP.viewer.open('/s/' + keyword, {replace: true}); setTimeout(function () { MIP.setData({startSearch: false}) }, 1000); } }); MIP.watch('goHome', function (newVal, oldVal) { MIP.viewer.open('/', {replace: false}); });