서브라임 텍스트 플러그인 - Minify(js 압축)

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

 

Minify 소개

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

홈페이지 : 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 uglifycss js-beautify html-minifier uglify-js svgo

    

7. 마찬가지로 PATH 확인을 위해 명령프롬프트에 cleancss --version을 입력해 버전확인이 되는지 확인한다.

    

    

Minify 사용법

Windows 사용자는 Ctrl+Alt+M 으로 압축된 파일을 같은 디렉토리에 생성하게 된다.

OS X 사용자는 Super+Alt+M 으로 사용한다.

혹은 서브라임텍스트 창에서 마우스 우클릭으로 컨택스트 메뉴를 열어 Minify로 진행하면 된다.

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

저장된 파일만 되니 유념하도록 하자.