본문으로 바로가기

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

Minify 소개

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

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 로 사용한다.

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


신고

댓글을 달아 주세요

  1. BlogIcon 흉내쟁이 2016.03.16 16:48 신고

    아마도 PATH 설정과 관련된 문제일꺼라 보입니다. node.js가 설치된 경로로 이동해보시고 명령어를 실행해보세요. OSX 환경을 구성하지 못하기때문에 저로써는 도움을 드릴수 없는 부분이고 해당 홈페이지에서 이슈를 살펴보시길 추천합니다.

  2. opti 2016.04.19 15:45 신고

    문의 드립니다~
    node --version과 install까지는 했는데 이후 cleancss --version을 입력하면 내부 또는 외부명령, ... 또느 배치 파일이 아닙니다. 라고 나오는데 이후는 어떻게 처리해야 하는지 조언 부탁드립니다.

    • BlogIcon 흉내쟁이 2016.04.19 15:58 신고

      위의 글에서 6번에 해당하는 내용을 다시확인하시고 설치한 각각을 버전테스트를 해보시고 무엇이 안되는지 파악하신후 각각을 따로 설치해보세요.

    • opti 2016.04.19 18:04 신고

      @흉내쟁이,
      감사합니다 :)
      가장 무식하게 nodejs 삭제 후 재설치로 해결했습니다 ;; ㅋㅋㅋ

  3. BlogIcon wallel 2016.08.03 21:46 신고

    으어 ... 회사에선 되는데 집에선 안되네요 ㅠㅠ

    마음이 아픕니다 ...

티스토리 툴바