배포되는 라이브러리들을 보면 압축된 버전인 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 로 사용한다.

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

Soda Theme

Soda Theme 는 매우 유명한 테마입니다.

그만큼 좋다는거겠지요. 서브라임텍스트는 기본 테마만으로 저는 좋아합니다.

좀더 좋은 테마를 찾는분은 sode theme 를 추천합니다.

sode theme는 현재 서브라임텍스트 2,3 모두 지원합니다.

Install

sode theme 는 서브라임텍스트에서 바로 설치할 수 있습니다.

Ctrl+Shift+P 를 눌러 sode theme 를 선택합니다.

이걸로 설치는 끝입니다. 간단하죠.

좀더 맘껏 사용하기위해 설정을 해봅니다.

설정

Preferences-Settings-User 를 클릭해서 설정파일을 엽니다.

2,3 이 약간 다르니 해당 버젼에따른 설정을 넣어주세요.

• 테마 활성화

// Sublime Text 2 테마활성화
"theme": "Soda Light.sublime-theme"
// Sublime Text 3 테마활성화
"theme": "Soda Light 3.sublime-theme" 
 

• 탭설정

서브라임텍스트는 기본이 사각형태의 탭입니다. 이걸 모서리가 약간 둥근형태로 만들어줍니다.

"soda_classic_tabs": true 
 
 
 
사이드바 폴더 아이콘표시
사이드바에 폴더 아이콘을 표시해줍니다.
 
"soda_folder_icons": true 
 
 
 
Retina Resolution UI
높은 DPI 디스플레이로 보여줍니다.
 
 

테마에 대한 고급사용자 설정은 위키 페이지에 설명이 되어 있으니 참고하세요.

위키

• 구문강조

위 이미지에 보여지는 구문강조색은 흰색버젼은 에스프레스의 컬러셋이고, 어두운버젼은 Monokai 의 수정된 버젼입니다.

이걸 사용하려면 colour-schemes.zip 을 다운로드하시고 압축을 푸세요.

압축을 풀면 2개의 파일이 나옵니다. 그걸 Packages 폴더안에 User 폴더안에 넣어주세요.

Packages 폴더는 Preferences - Browse Packages.. 를 클릭하면 됩니다.

그리고 설정파일에서 아래처럼 입력해줍니다. 아래는

또는 아래 이미지처럼 선택을 해도 됩니다. 그러면 자동으로 입력이 되어집니다.

Bracket Highighter 은 {},[],<>,"",'',() 와 같이 열리고 닫히는 기호가 쌍으로 존재해야 하는 코드를 하이라이트 처리해주는 플러그인 입니다.

Bracket Highighter 플러그인 주소 -> https://github.com/facelessuser/BracketHighlighter

설치하는 방법은 서브라임텍스트에서 먼저 Package Control 을 인스톨합니다.

Ctrl + Shift + P -> pci 를 클릭하면 아래처럼 보입니다.

그런다음 바로 뜨는 명령창에서 brh 만 입력을 해도 Bracket Highighter 가 선택되어 집니다.

엔터를 치면 바로 설치가 됩니다.

설치후 바로 적용이 안됩니다.

서브라임을 껏다가 다시 실행하세요.

이 플로그인을 설치하지 않아도 서브라임은 열고 닫는 태그를 하이라이트 해줍니다. 아주 미약하게....

아래 사진은 설치하지 않았을때의 모습입니다.

하지만 Bracket Highighter 플러그인을 설치하면 아래처럼 확실하게 하이라이트 해주고 왼쪽에 보면 어떤 곳이 열고 닫히는지 알려줍니다.

서브라임 플러그인 중에서 꼭 설치해야할 플러그인이라고 생각합니다.

출처 : http://demun.tistory.com/2330

서브라임 텍스트 플러그인 - DocBlockr

DocBlockr 은 서브라임텍스트에서 사용하는 플러그인으로써 주석을 통해서 문서작성을 도와주는 플러그인입니다.

제가 사용해보니 아주 유용한 플러그인입니다. 없어서는 안될 플러그인입니다. 혹시 사용하고 있지 않다면 꼭 사용해보세요.

아래의 몇개의 사진을 보면 이해가 가실겁니다.

이렇듯 많은 기능을 제공합니다.

홈페이지에 보시면 더 많은 설명과 이미지가 있으니 참고하세요.

홈페이지 : https://github.com/spadgos/sublime-jsdocs

설치

다른 플러그인 설치할때처럼 Ctrl+Shift+P 를 눌러 pci 해서 package control 를 설치합니다.

그후 팝업창에서 DocBlockr 를 입력해서 설치하면 됩니다.

아시다시피 서브라임텍스트에서는 플러그인을 설치하는 방법은 매우 간단합니다.

뭐 따로 설명할 필요도 없습니다.

매번 같은 코드와 말을 반복하네요.

알아두어야할점은 내가 필요한 플러그인인가? 를 생각해보시고, 잘 모르겠다하면 일단 설치해보고, 사용해보세요. 뭐 아니다싶으면 다시 삭제하면 그만이니까요.

출처 : http://demun.tistory.com/2441

livereload 는 서브라임텍스트에서 코드를 수정하면 실시간으로 브라우져에서 수정된것이 반영되는 것입니다.

코드를 수정하고, 새로고침해서 자주 수정되는과정을 본다면 이 플러그인은 상당이 유용합니다.

이 기능은 현재 사파리,크롬, 파이어폭스 등에서 사용할 수 있고, 윈도우, 맥, 리눅스 등에서 사용할 수 있습니다.

LiveReload -> https://github.com/dz0ny/LiveReload-sublimetext2 , http://livereload.com/

서브라임텍스트에서 Ctrl + Shift + P 를 클릭해서 명령팔렛트를 열어서, Package Control 를 Install 합니다.

그후 창이 뜨면 아래처럼 LiveReload 를 선택합니다.

그럼 서브라임텍스트에서의 설치는 끝입니다.

각 브라우져의 확장기능이기때문에 확장기능 설치사이트에서 검색을 해서 설치해도 됩니다.

더 간단하게 아래주소를 참고하시면 http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions- 아래 그림처럼 각 브라우져의 확장기능 버젼이 있고, 클릭을 하면 해당 설치 사이트로 갑니다.

저의 경우 크롬을 사용해보겠습니다.

확장기능을 설치한다음 사용함에 체크를 하세요.

<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>')</script>  
 
위의 자바스크립트를 </head> 위나 </body> 위에 추가한다음 코드를 작성하기만 하면 됩니다.