Notepad++ 로 LESS코딩을 쉽게 컴파일 하기

조's

2013. 11. 6.

예전에 노트패드++로 LESS를 코딩하는 방법에 대해 포스팅한 적이 있습니다.

그 글의 연장선상이라고 보시면 될것 같고.. 이번의 포스팅은 외부의 LESS컴파일러의 도움없이 Notepad++에서 바로 컴파일 할 수 있는 방법을 소개하려고 합니다.

대략적으로 설명을 드리면...

먼저 node.js를 설치하고 node.js를 통해 LESS 컴파일러를 설치합니다. 그리고 Notepad++에서 실행키 링크를 통해 단축키를 저장하여 실행시키면 자동으로 컴파일이 되면서 해당 디렉토리에 동일한 이름의 컴파일된 CSS를 저장시키는 구조 입니다.

그럼 아래의 설치방법을 잘 보시고 따라해 보세요..

먼저 node.js를 설치해야 합니다. 나중에 시간이 나면 포스팅을 하겠지만.. 간단히 설명하면 node.js는 서버단에서 실행되는 javascript라고 보시면 됩니다. windows계열뿐만 아니라 리눅스계열, iOS계열에서도 설치가 가능합니다.

지금설치할 LESS 컴파일러도 javascript기반으로 되어 있어서 Node.js를 통해 쉽게 설치 및 사용이 가능합니다.

node.js사이트에서 프로그램을 다운로드 받습니다.
윈도우즈라면 설치파일 형태로 다운로드 됩니다.
다운로드된 설치파일을 기본옵션으로 설치를 진행하세요.
설치하실때 설치되는 경로를 잘 기억해 두시는것이 도움이 될수 있습니다.
보통 C:\program Files 아래에 nodejs폴더를 만들고 설치가 되는데.. 이렇게 기본에 설치를 해도 되고 C:\에 설치를 해도 됩니다.
설치가 완료되면 cmd창에서 node -v 명령어를 쳐서 버전정보가 나오면 제대로 설치가 완료된 것입니다.
Command prompt창은 윈도우키 + R을 눌러서 실행창을 띄운 후 "CMD"라고 입력하면 됩니다.
예] C:\Users\username>node -v

Node.js가 설치되었다면 Node.js의 패키지 관리툴을 이용하여 LESS 모듈을 설치해야 합니다.

LESS가 뭔지는 이전 포스팅을 참조하세요

먼저 Command prompt창을 엽니다.
Command prompt창은 "윈도우키 + R"을 눌러서 실행창을 띄운 후 "CMD"라고 입력하면 됩니다.
CD명령어로 node.js가 설치된 디렉토리로 이동합니다.
간단한 이동명령어는 아래와 같습니다.
>cd \ 은 루트폴더로 이동
>cd ..은 한단계 이전 폴더로 이동
>cd 폴더명 은 해당폴더로 이동
한번에 이동하는 방법은 아래와 같습니다.
>cd c:\program Files\nodejs
Command 창에서 아래의 명령어를 입력합니다.
> npm install less
그러면 실행내용이 쭉~ 올라가며 설치가 됩니다.
설치가 되면 정상적으로 설치가 되었는지 해당 폴더에서 확인을 해야합니다.
아래의 위치에 해당 파일이 있으면 정상적으로 설치가 된 것입니다.
C:\program Files\nodejs\node_modules\.bin\lessc.cmd

이제는 Notepadd++의 명령단축키 기능을 활용하여 단축키를 등록하면 됩니다.

less파일을 만들고 등록한 단축키를 실행시키면 .less파일이 있는 동일한 폴더에 동일한 파일명의 .css파일이 생성이 됩니다.

먼저 Notepadd++을 실행시킵니다.
상단메뉴중 "실행"의 하위 메뉴인 "실행"을 선택합니다.
실행할 프로그램 입력란에 아래의 코드를 입력합니다.
"C:\program Files\nodejs\node_modules\.bin\lessc.cmd" -x "$(FULL_CURRENT_PATH)" > "$(CURRENT_DIRECTORY)\$(NAME_PART).css"
여기에서 빨간색 부분은 본인이 설치한 경로로 수정하시면 됩니다.
파란색의 -x 는 압축코드입니다. 컴파일된 css코드가 한줄로 쭉~ 붙어서 저장됩니다.
저장을 합니다.
그러면 단축키(Shortcut)를 등록하는 화면이 나오는데 기존에 없는 키를 조합해서 만드시면 됩니다.
저는 alt + F7로 설정을 했네요
아래이미지와 같이 단축키가 등록된것을 볼 수 있습니다.