[플러그인]Subline Text 2에서 YUI 를 이용하여 js, css 압축하는 방법
- 퍼블리셔/SublimeText
- 2012. 11. 17. 09:00
Sublime Text 2에서 자바스크립트를 압축하는 플러그인은 jsMinifier 이 있습니다.
https://github.com/cgutierrez/JsMinifier
헌데 저는 자바스크립트를 압축하는 과정에서 오류를 경험한적이 몇번있어서 압축은 무조건 YUI Compressor 를 이용합니다.
http://www.refresh-sf.com/yui/
그래서 Sublime Text 2에서 YUI 를 이용하는 방법은 없을까 찾아봤더니 역시 있더군요.
Sublime Text 2는 왠만한것은 다 있습니다.
Sublime Text 2에서 YUI Compressor 설치하는 방법.
Ctrl + Shift + P 를 눌러 Package Control 을 설치합니다.
yui 를 입력하면 아래처럼 YUI Compressor 이 보입니다.
선택합니다.
그럼 Tool - Build System - YUI Compressor 이 보입니다.
저는 자바스크립트 파일을 한번 열어봤습니다.
Sublime Text 2에서 YUI Compressor 을 설치하는것은 이걸로 끝입니다.
하지만 컴퓨터에 Java 가 설치되어 있어야 정상작동합니다.
만약 설치가 되어 있지 않다면 http://www.java.com/ko/ 에서 설치하시기 바랍니다.
Sublime Text 2 에서 YUI Compressor 설치하고, java 까지 모두 설치했다면 Sublime Text 를 다시 시작하세요.
Sublime Text 2에서 YUI Compressor 을 사용하여 압축하기
위처럼 모두 설치가 되었다면 자바스크립트를 열고 압축을 해보겠습니다.
예제사진(위)처럼 자바스크립트를 열고 단축키인 F7 또는 Ctrl+B 을 눌러주기만 하면 됩니다.
열러있는 파일은 script.js 이고 F7을 눌러 script.min.js 파일이 생성이 된걸 알수 있습니다.
마찬가지로 스타일파일인 css 도 똑같이 압축이 가능합니다.
css 파일을 열고 F7 또는 Ctrl + B 를 누르면 min.css 가 만들어집니다.
이제 온라인에서 압축하는 번거로운 일은 없겠네요....
참고링크
[Design/코딩] - Sublime Text 2에서 less 파일 구문강조하기
[Design/코딩] - Sublime Text 2 에서 코드정렬하기(Alignment)
[Design/코딩] - Sublime Text 2 온라인에서 코드 가져오기(Fetch)
[Design/코딩] - Sublime Text 2에서 Gist(github) 코드 불러오기,업데이트하는 방법
[Design/코딩] - Sublime Text 2로 Gist(github)에 코드 발행하는 방법
[Design/코딩] - Sublime Text 2 사이드바 확장(Enhancements)
[Design/코딩] - Sublime Text 2에서 Prefixr 사용하는 방법
[Design/코딩] - Sublime Text 2에서 Emmet 사용하는 방법
[Design/코딩] - Sublime Text 2에서 Zen Coding을 사용하는 방법
[Design/코딩] - Sublime Text 2에서 Zen Coding 설치하는 방법
[Design/코딩] - Sublime Text 2에서 Package Control 설치하는 방법