如何热部署 SCSS 样式文件

假设已有系统能运行,但是您需要调整系统的样式,又不想重新启动服务。

通常的做法是:修改 SCSS 文件,然后运行 deployThemes 这个 gradle 任务,等待构建成功,然后切换到浏览器,重置浏览器缓存,查看样式改变的效果。

但是,Gradle 构建系统有一个非常有用的功能: 持续构建模式

使用这个模式,可以在启动构建之后自动检测文件系统的改动然后重新构建。在开发 scss 样式的时候,这个模式很有用。

命令行执行这个:

gradlew deployThemes --continuous

屏幕上能看到这样的输出:

Waiting for changes to input files of tasks...

这时,如果修改了主题的样式文件,比如 halo-ext.scss ,保存修改之后,Gradle 会自动检测到改动,然后自动部署修改的内容:

new file: /home/artamonov/projects/theme-hot-build/modules/web/themes/halo/com.company.themehotbuild/halo-ext.scss
Change detected, executing build...

BUILD SUCCESSFUL in 3s
2 actionable tasks: 2 executed

Waiting for changes to input files of tasks... 

此时,在浏览器 ctrl+F5 刷新即可加载新的改动。不需要每次改动后手动调用 deployThemes 任务了。

4赞