Minify - 서브라임 텍스트(Sublime Text) 플러그인 #10

배포되는 라이브러리들을 보면 압축된 버전인 xxx.min.js 와 같은 파일을 만들 수 있게 도와주는 도구를 알아봅니다.

Minify 소개

Minify는 서브라임 텍스트에 현재 열려 있는 HTML, CSS, Javascript, SVG 파일을 압축하는 플러그인이다. 압축된 파일은 *.min.js와 같이 min 이라고 명시되는 새로운 파일을 생성한다. 압축된 CSS와 JS를 복원하기 위해 .map 파일을 생성하도록 구성할 수도 있다.

HOME

Minify

Linux와 Windows, OS X에서 테스트 되었으며, 서브라임 텍스트2와 서브라임 텍스트3 모두에서 작동한다.

Minify 설치

아래는 Windows에서 설치법이다.

1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.

3. minify를 입력하여 Minify가 검색되면 선택한 후, 엔터를 눌러 설치한다.

   

4. Windows와 OS X 사용자는 nodejs에서 install 버튼을 클릭하고 다운로드된 파일을 실행하여 설치한다.

5. 설치가 완료되면, 명령 프롬프트를 열고 node --version을 입력해서 버전정보를 확인한다. 버전 정보가 확인이 된다면 PATH설정이 정상적인 것이고, 에러메세지를 띄운다면 node를 이용할 수 없으니 이를 고쳐야한다.

   

6. Node.js CLI 애플리케이션을 설치해야 한다. 터미널(명령 프롬프트)를 열고 아래의 코드를 입력한다.

   npm install -g clean-css-cli uglifycss js-beautify html-minifier uglify-js minjson svgo
   

7. 마찬가지로 PATH 확인을 위해 명령프롬프트에 cleancss --version을 입력해 버전확인이 되는지 확인한다(cleancss, uglifycss, js-beautify, uglifyjs, html-minifier, minjson and svgo).

Minify 사용법

Windows 사용자는 Ctrl+Alt+M 으로 압축된 파일을 같은 디렉토리에 생성하게 된다. OS X 사용자는 Super+Alt+M으로 사용한다. 혹은 서브라임텍스트 창에서 마우스 우클릭으로 컨택스트 메뉴를 열어 Minify로 진행하면 된다.

Ctrl+Shift+Alt+M은 압축된 버전을 되돌리게 되는데 .beautiful이라 명기된다. OS X 사용자는 Super+Alt+Shift+M 로 사용한다.

저장된 파일만 작동되니 파일을 우선 저장하는 것을 유념하도록 하자.