HOME > etc > tips

clean-css로 CSS 파일을 경량화(minify)하는 방법

By JS | 06 Nov 2019

clean-css는 CSS 파일을 경량화(minify)하는 nodejs 기반의 프로그램입니다.

clean-css는 쉘에서 사용할 수 있는 CLI버전과, nodejs에서 사용할 수 있는 버전이 나누어져 있습니다.

CLI 버전

clean-css-cli를 사용하면 쉘에서 명령어로 CSS를 minify할 수 있습니다.

다음 명령어로 CLI 버전을 설치합니다.

$ sudo npm install clean-css-cli -g

다음 명령어는 로컬의 main.css 파일을 minify하여 main.min.css 파일로 만드는 작업입니다.

$ cleancss -o main.min.css main.css

생성된 main.min.css 파일을 보면 minify된 것을 볼 수 있습니다.

nodejs 버전

nodejs에서 사용하려면 다음 명령어로 패키지를 설치합니다.

$ npm install --save-dev clean-css

다음과 같이 사용할 수 있습니다.

var CleanCSS = require('clean-css');
var input = 'a{font-weight:bold;}';
var options = { /* options */ };
var output = new CleanCSS(options).minify(input);

더 많은 옵션은 clean-css에서 확인해주세요