IntelliJ Ultimate CSS minify 처리하기

- 개요

웹 사이트의 성능 향상을 위해서 CSS 파일을 minify 처리하기로 하여 구글링 중 Jetbrains 사이트에 실시간으로 

처리할 수 있는 방법이 있길래 이미지를 포함하여 정리해 보았습니다.

 

- 적용 순서

    1. Node.js 설치

    2. CSS 플러그인 설정 ( 인텔리j )

    3. File Watchers 플러그인 설치

    4. csso-cli globally 설치 ( node.js npm 사용 )

    5. csso file Watcher 생성

    6. 적용 확인

 

※ 필수 플러그인 : CSS (인텔리j Ultimate에서만 지원), File Watchers

 

 

- Node.js 설치

    1. https://nodejs.org/en/ 홈페이지 접속 후 원하는 설치 파일을 다운로드 합니다.

    2. 다운로드한 파일을 설치합니다.

        설치 과정에서의 특별한 사항은 없습니다.

 

 

- CSS 플러그인 설정 확인

    1. File > Settings > Plugins > Installed > CSS Enable 여부 확인 후 안되어 있으면 체크박스를 선택 후 OK 합니다.

        해당 기능은 Intellij Ultimate 에서만 지원 합니다.

 

 

- File Watchers 플러그인 설치

    1. File > Settings > Plugins > Marketplace 에서 File Watchers 검색 후 플러그인을 설치합니다.

 

 

- csso-cli globally 설치

    1. 설치된 Node.js 의 npm 을 이용해서 csso-cli globally 를 설치합니다.

        명령어 : npm install -g csso-cli

 

 

- csso file Watcher 생성

    1. File > Settings > Tools > File Watchers 의 플러스 버튼을 클릭합니다.

 

    2. CSSO css Optimizer 선택 합니다.

 

    3. Program 항목에 npm 으로 설치한 경로의 csso 파일을 선택합니다.

 

    4. Node.js 의 npm으로 설치할 경우 C:\Users\[user name]\AppData\Roaming\npm\ 위치에 설치 됩니다.

 

    5. 설정 완료

 

 

- 적용 확인

    1. File > Settings > Tools > Actions on Save 에 File Watcher: CSSO CSS Optimizer

        체크가 되어 있으면 설정 완료 입니다.

 

    2. CSS 파일에서 수정 후 자동 저장 처리 되면서 [css file name].min.css 파일이 생성되는 것을 확인 할 수 있습니다.

 

    3. 왼쪽이 원본 파일 (layout.css), 오른쪽이 minify 처리된 파일(layout.min.css) 내용입니다.

 

- 주의 사항

이 기능은 저장될때 자동으로 변환해 주는 기능입니다. 

그런데 인텔리j는 보통 자동 저장으로 설정해서 사용하는데 css 파일 변경 후 1~2초 뒤에 변환 작업이 실행되기 때문에

변환 작업 중에 다시 css 파일을 작업하게 되면 충돌 메시지가 출력되니 주의해서 작성하시기 바랍니다.

 

이상으로 Intellij 에서 CSS Auto Minify 설정을 마칩니다.

 

 

참고 : jetbrains.com