이전글에 보시면 서브라임 텍스트에서 css, javascript 는 압축하는 방법을 보셨을겁니다.

또한 온라인으로도 css 와 javascript 는 압축하는 곳이 많이 있습니다.

이번에는 html 코드를 압축하는 방법을 알아보겠습니다.


역시 배포할때는 압축해서 쾌적한 상태로 하는것이 좋지요.

먼저 온라인상에서 html 을 압축하는곳을 몇군데 테스트 해봤습니다. 

티스토리의 경우는 치환자라는 개념이 있어서 올바르게 압축하지 못하는 곳이 몇군데 있더군요.


하지만 Sublime text 2에서 사용하는 html-compressor 은 무리없이 압축하였습니다.

Html-compressor -> https://github.com/darkdelphin/Html-compressor

사용하는 방법을 알아보겠습니다.


Ctrl+Shift+P 를 클릭해서 Packages Install 을 한다음 html Compressor 을 설치합니다.



Packages Install



사용하는 설치를 하면 Sublime text 2를 다시 실행하세요.

그러면 Tool - Build System - Html Compressor 이 생성이 된것을 확인할 수 있습니다.


Tool - Build System - Html Compressor



html 파일을 열고 빌드 단축키인 Ctrl+B 또는 F7 키를 누르면 빌드합니다.

압축이름은 파일이름.html -> 파이이름.min.html 로 하나 더 생성이 됩니다.


컴파일 전과 후의 사진을 비교해보세요.


컴파일 전 상태


컴파일 후의 상태(skin.min.html)



이렇게 간단하게 서브라임 텍스트에서는 html 도 컴파일해서 사용할 수 있습니다.


참고링크

[Design/코딩] - Sublime Text 2(서브라임텍스트) 몇가지 팁

[Design/코딩] - Sublime Text 2에서 코드 오류를 자동으로 잡아주는 SublimeLinter

[Design/코딩] - Sublime Text 2 단축키 및 한글

[Design/코딩] - Sublime Text 2에서 less 컴파일하기

[Design/코딩] - Sublime Text 2 플러그인 Emmet cheat-sheet

[Design/코딩] - Sublime Text 2에서 폴더 파일 빠르게 만드는 방법(AdvancedNewFile)

[Design/코딩] - Sublime Text 2에서 Fetch 설정파일

[Design/코딩] - Subline Text 2에서 YUI 를 이용하여 js, css 압축하는 방법

[Design/코딩] - Sublime Text 2에서 less 파일 구문강조하기

[Design/코딩] - Sublime Text 2에서 Package Control 설치하는 방법

[Design/코딩] - Sublime Text 2에서 Emmet 사용하는 방법

[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에서 Zen Coding을 사용하는 방법

[Design/코딩] - Sublime Text 2에서 Zen Coding 설치하는 방법


댓글