[Spring Boot]JS, CSS 경량화

오늘은 Gradle minify plugins를 이용한 JS, CSS 경량화 방법에 대해 알아보겠습니다.

 

※ 테스트 환경

• Spring Boot 2.7.5
• JDK 11
• Gradle
• Thymeleaf

---

Gradle minify plugins gradlewebtools는 Gradle 프로젝트에 간단히 추가하여 파일 경량화를 자동화할 수 있는 방법을 제공합니다.

현재 프로젝트 구조는 다음과 같습니다.

.
└── src/
    ├── main/
    │   └── java
    └── resources/
        └── static/
            ├── css/
            │   ├── common.css
            │   └── style.css
            └── scripts/
                ├── common.js
                └── preview.js

 

static/scripts 폴더에 있는 js 파일은 번들링을 거쳐 하나의 파일로 경량화되며, static/css 폴더에 있는 css 파일은 파일별로 경량화가 이루어지게 됩니다.

 

1. 의존성 주입

plugins {
    id 'java'
    id 'war'
    id 'org.springframework.boot' version '2.7.5'
    id 'io.spring.dependency-management' version '1.1.6'
    // gradlewebtools
    id "org.gradlewebtools.minify" version "1.3.2"
}

 

 

2. 빌드 스크립트 생성

ext {
    targetPath = "src/main/resources/static/minify";   // 타겟 경로
    minifiedPath = "target/minified"
}

// css 경량화
task cssMinify(type: org.gradlewebtools.minify.CssMinifyTask) {
    srcDir = project.file("src/main/resources/static/css")
    dstDir = project.file("${minifiedPath}/css")
    options.originalFileNames = true
}

// js 경량화
task jsMinify(type: org.gradlewebtools.minify.JsMinifyTask) {
    srcDir = project.file("src/main/resources/static/scripts")
    dstDir = project.file("${minifiedPath}/scripts")
    options.originalFileNames = true
}

task copyCss(type: Copy){
    dependsOn cssMinify

    from project.file("${minifiedPath}/css")
    into project.file("${targetPath}/css")
}
task copyJs(type: Copy){
    dependsOn jsMinify

    from project.file("${minifiedPath}/scripts")
    into project.file("${targetPath}/scripts")
}

tasks.named("processResources") {
    dependsOn "copyCss", "copyJs"
}

 

경량화를 통해 생성된 파일을 프로젝트의 target/minified 폴더에 생성됩니다. 이 파일을 빌드를 통해 /resources/static/minify 폴더로 옮기는 방식으로 진행됩니다.

ext {
    targetPath = "src/main/resources/static/minify";   // 타겟 경로
    minifiedPath = "target/minified"
}

 

빌드 작업은 processResources 작업을 포함하므로, copyCss, copyJs가 실행되며 경량화된 파일들(cssMinify/jsMinify 실행)을 target으로부터 빌드 후 폴더로 복사됩니다. 

*options.originalFilesNames = true 옵션은 파일 이름의 원본을 사용할 것인지 선택합니다.

tasks.named("processResources") {
    dependsOn "copyCss", "copyJs"
}

 

 

3. 결과

build를 실행해보겠습니다.

ROOT.war로 패키징하기 위해 아래 명령어를 추가합니다. 

war {
  archiveFileName = 'ROOT.war'
}

 

프로젝트/build/libs 경로로 ROOT.war 파일이 생성되고 압축을 풀어보면 아래와 같이 경량화된 파일들을 확인할 수 있습니다.

 

js

 

css

 

참고문서

GitHub - gradle-webtools/gradle-minify-plugin

bootJar task에 css, javascript minified 적용