NetBeans IDE 7.4가 나왔습니다.
최근에 Bootstrap를 보면서 less를 뒤 늦게 알게되었습니다.
하지만 NetBeans IDE 7.3.1에서는 지원하지 않아 highlighting도 지원되지 않아 임시로 css 타입으로 사용하고 있었습니다.
NetBeans IDE 7.4부터는 less와 sass를 지원하고 있어 소개하려고 합니다.
less와 sass에 대한 소개는
를 참고해 주세요.
부트스트랩에서 less를 사용하고 있어 저도 less를 NetBeans에 적용해 봤습니다.
less를 css로 변경하기 위해서는 컴파일러가 필요 합니다.
http://lesscss.org/ 에서 less.js를 다운받아 실시간 변환을 하면서 확인할 수도 있지만 이렇게 사용하려면 늦기도 하고
less에서 사용한 이미지 경로가 제대로 변환되지 않을 수도 있습니다.
전에는 윈도우에서 less를 css로 변환하는 프로그램을 따로 설치하고 사용했지만
- Crunch ( http://crunchapp.net/ )
- SimpLESS ( http://wearekiss.com/simpless )
오늘은 NetBeans IDE에서 less를 작성하고 저장시에 css로 변환하여 저장하는 방법을 보겠습니다.
먼저 컴파일러를 설치해야 합니다.
NetBeans IDE 7.4에서 사용할 컴파일러는 Node.js를 사용하기 때문에
먼저 Node.js를 설치합니다.
여기에 접속하여 INSTALL 합니다.
그리고 도스창( 시작 > 실행 > cmd )에서
npm install -g less
를 실행하여 less 를 설치합니다.
(화면 캡처를 다 했는데... 픽픽 에디터가 죽어버려 실행하는 이미지가 없습니다. ㅠ.ㅠ)
이렇게 설치를 하면 가장 하단에 어디에 less가 설치 되었는지 경로가 나옵니다.
아마도
C:\Documents and Settings\사용자명\Application Data\npm
xp라면 위와 비슷할 겁니다. (win7 도 비슷할꺼라 생각됩니다.)
이제 NetBeans IDE 7.4를 실행하고
Tools > Options 에서 Miscellaneous TAB를 선택합니다.
아래 그림과 같이 LESS path를 지정합니다. (위 경로가 같습니다.)
이제 Project Properties 를 열어서 less의 나머지 설정을 합니다.
왼쪽에서 CSS Preprocessors 를 선택하고
오른쪽의 LESS TAB를 선택합니다.
저장전에 LESS를 컴파일 하기위해서 표시한 부분에 체크를 합니다.
그리고 컴파일할 less의 경로와 컴파일후 css가 저장될 경로를 작성합니다.
마지막으로 less의 옵션을 설정하는데 저는 최소 크기로 저장하기 위해서 --yui-compress 옵션을 넣었습니다.
less의 옵션은 도스창에서
lessc -h
위 명령어로 확인할 수 있습니다.
자.. 이렇게 해서 끝나면 좋은데 막상실행하면 node 관련 에러가 생길 수 있습니다.
저는 node에 대한 경로를 못 찾아 에러가 발생했습니다.
그래서 시작 > 모든 프로그램에서 아래와 같이 Node.js의 등록정보(마우스 오른쪽 버튼 > 속성메뉴)를
확인하여 실행위치를 확인했습니다.
이 경로를 복사했다가
less가 설치된 경로(C:\Documents and Settings\사용자명\Application Data\npm)를 확인하면
lessc.cmd 파일이 있습니다.
이 파일을 열어 아래와 같이 수정합니다.
이렇게 하면 에러가 발생하지 않습니다.
이제 NetBeans IDE에서 less도 작성하고 바로 css로 변환하여 사용할 수 있습니다.