이클립스에서 LESS 컴파일하기 (OSX 및 윈도우)
안녕하세요~
제가 요새 퍼블리싱에 손을 좀 대고 있습니다.
평소에도 관심을 좀 가지고 있었는데 때마침 일거리가 주어졌네요.
웹어플리케이션 하나 만들려면 정말 알아야 하는게 한두가지가 아니죠.
여태 서버사이드 개발만 하다가 조금씩 개인적으로 자바스크립트랑 CSS 훑어보기만 했었는데요,
이번 기회에 CSS를 이용한 퍼블리싱 업무를 제대로 파헤쳐 보고자 합니다.
뭐 기본적인 CSS 문법같은 것을 하려는게 아니구요,
오늘은 이클립스에서 LESS를 이용한 CSS 파일 생성하는 것에 대해서 포스팅할겁니다.
우선 제가 작업한 환경은 두 가지가 있습니다.
- 윈도우 8.1 + Eclipse Mars
- OS X Elcaptain 10.11.4 + Eclipse Mars
우선 둘 다 큰 차이는 없었습니다.
일단 LESS 파일 컴파일을 위한 설치 과정은 다음과 같습니다.
우선 LESS 를 사용하려면 Node.js 부터 설치를 해야합니다.
그리고나서 이클립스 LESS complier 플러그인을 설치합니다.
이제 마음껏 LESS 파일을 컴파일 하면 됩니다.
윈도우나 Mac OS X나 거의 동일합니다.
화면캡처는 Mac OS X 버전으로 떠서 설명할텐데 윈도우에서 다르게 해야하는 부분이 있으면 그 부분 또한 설명을 할테니 걱정마세요.
우선 Node.js 홈페이지에 가시면 윈도우용, OS X용 다운로드 링크를 찾으실 수 있을겁니다.
(다운로드 사이트 링크 : https://nodejs.org/en/download/ )
가시면 아래 사진처럼 화면이 보일텐데 Installer 중에서 자신의 컴퓨터 사양에 맞는 (32비트 또는 64비트) 버전을 다운로드 받습니다.
다운로드가 완료되면 그냥 일반 프로그램 설치하듯이 실행파일 실행시켜서 설치하면 됩니다.
그냥 "다음" "다음" "다음" "종료" 뭐 이런 거 다 아시죠? ㅎㅎ
자, 그럼 이제 LESS를 사용할 준비는 끝났습니다.
이제 이클립스를 기동합니다.
그리고 아래 링크로 가셔서 플러그인 설치 정보를 살펴보세요.
http://www.normalesup.org/~simonet/soft/ow/eclipse-less.html
위 링크로 가서 아래쪽으로 스크롤링하면 다음과 같이 설치 하는 방법에 대해서 설명을 하고 있습니다.
1단계는 말그대로 그냥 이클립스 설치하라고 나와있는데 이건 뭐 다들 되어있으시죠?
그럼 2단계로 넘어갑니다.
2단계에서는 LESS 플러그인 설치를 위한 update site 를 등록하는 것에대해서 설명을 하고 있습니다.
저기서 붉은 글씨로 표시된 주소를 Ctrl + C ( Command + C ) 를 이용해서 복사해주세요.
이클립스 메뉴 중에 HELP > Install New Software > Available Software Sites 로 갑니다.
화면은 OS X 에서 캡처를 하긴했는데 윈도우용도 동일합니다.
그러면 아래와 같은 창이 뜹니다.
저는 이미 플러그인이 설치되어있기 때문에 저렇게 뜨지만 여러분들은 아마 다른 플러그인들만 주구장창 보일겁니다.
이제 저 팝업에서 오른쪽 상단에 있는 Add 버튼을 클릭하여 새로 하나 추가합니다. 아래처럼 해주시면 됩니다.
이제 OK 버튼을 누르고 HELP > Install New Software 로 다시가서 팝업창을 띄운다음에 "Work with : " 에 LESS라고 검색합니다.
그러면 설치가능한 플러그인이 하단 박스에 목록으로 출력이 될겁니다.
아마 카테고리로 묶어서 출력하는 옵션에 저처럼 체크가 되어있다면 하나만 목록에 조회될텐데 하위 목록을 조회해 보시면 총 3개가 있다는걸 확인할 수 있습니다.
그 중 2개는 Closure 관련된 플러그인이라 필요하지 않습니다.
LESS 관련된 플러그인 하나만 목록에서 선택하고 설치를 진행하시면 됩니다.
설치가 완료되고 이클립스 재기동을 한 뒤 less 파일을 생성해보시면 아래 그림처럼 파란색 S 표시가 파일에 나타나는 것을 확인할 수 있습니다.
자, less 파일안에 css 코딩을 좀 하고나서 컴파일을 해보도록 하죠.
아무렇게나 CSS 문법에 맞도록 코딩을 좀 해주세요.
다 되셨으면 다음단계로 넘어갑니다.
이제 저 less 파일 위에 마우스를 올려놓고 우클릭 > Run as > Run configurations 로 가서 LESS Compiler를 찾습니다.
찾았으면 더블클릭을 해줍니다. 또는 우클릭 후 New 를 선택하여 새로운 설정을 하나 만들어줍니다.
새로 만들어진 설정은 New_Configuration 이라는 이름으로 만들어 지는데 이름은 아무렇게나 변경해도 무방합니다.
이제 중요한 것이 나옵니다.
위 화면을 보면 LESS command: 란에 절대 경로가 적혀있는 것을 볼 수 있습니다.
제가 처음 New_configuration에 있던 "lessc" 를 절대경로로 변경한 것입니다.
상대경로로 되어있으면 실행이 제대로 안됩니다.
아래와 같이 Cannot run program "lessc": error=2, No such file or directory 에러를 뿜어내죠.
그러니 여러분도 lessc 파일이 설치되어있는 절대경로를 찾아서 그 위치로 변경해주세요.
참고로 윈도우에서 사용중인 분들은 lessc.cmd 파일을 찾아서 그 파일의 절대경로를 입력해주셔야 합니다.
즉, C:\Users\Keichee\less\bin\lessc.cmd 처럼 입력해주셔야 합니다.
자, 이제 input으로 넣을 less 파일의 위치를 Browse 버튼을 눌러서 특정 프로젝트의 less 파일을 선택해줍니다.
이제 컴파일할 준비가 모두 끝났습니다!!! 와우!!!
이제 RUN 버튼을 과감하게 눌러주세요!!!!
컴파일이 잘 되나요??
lessc: wrote /Your/target/css/file/path/style.css
위와 같은 메시지가 나온다면 컴파일이 정상적으로 된겁니다.
새로 생성된 .css 파일을 열어보세요.
아마 윈도우 사용자 분들은 큰 문제없이 잘 될 것이라고 예상됩니다.
이제부터는 맥 사용자 분들만 보시면 됩니다.
하지만 맥 사용자 분들은 아직 해결해야할 문제가 남아있습니다.
아마도 맥 사용자분들은 아래와 같은 메시지를 경험하게 될겁니다.
env: node: No such file or directory
자, 이건 또 무슨 에러일까요....허허....
구글링을 좀 해보니....해결방안이라고 다양한 종류의 방법이 나오더군요.
그런데 다 뭔가 이상했습니다. 루트 권한으로 심볼릭 링크를 걸어야 하질 않나 rootless 모드로 들어가야 한다고 하질 않나...
그래서 그냥 lessc 스크립트를 까봤습니다.
그랬더니 제일 상단에 #!/usr/bin/env node 라고 되어있더군요.
그래서 저기 node 부분을 절대경로로 변경해줬습니다.
이거 파일 변경할 때에 심볼릭 링크를 변경하려고 하면 저장이 되지 않습니다.
find 명령어로 lessc의 실제 위치를 찾으셔도 되지만 우리에겐 which라는 멋진 친구가 있습니다.
터미널을 열어서 아래 명령어를 입력합니다.
which lessc
그러면 lessc의 위치가 나올텐데 이게 심볼릭 링크일겁니다. 제 경우가 그랬습니다.
이 심볼릭 링크가 바라보고 있는것이 무엇인지를 확인해야합니다.
ls -l {lessc 심볼릭 링크 파일 위치}
이렇게 하면 실제로 바라보고 있는 lessc 파일의 상대경로가 표시될겁니다.
그럼 이제 해당 경로의 파일을 vi로 열어서 편집을 합니다.
참고로 이 파일이 쓰기권한이 소유자에게만 있는데 저같은 경우엔 소유자가 nobody로 되어있어서 sudo vi 를 이용했습니다.
아무튼 그렇게 열어서 위에 말한대로 #!/usr/bin/env node 라인의 node 부분을 절대경로로 바꿔줍니다.
node의 절대경로는 which node 명령어로 확인이 가능하며 이 절대경로는 심볼릭링크 경로여도 무방합니다.
자, 이제 맥 사용자분들도 이클립스에서 LESS 파일 컴파일을 위한 모든 준비가 끝났습니다.
이제 이클립스로 돌아가서 LESS 파일을 컴파일 해보시기 바랍니다.
lessc: wrote /Your/target/css/file/path/style.css
빨간색으로 콘솔창에 에러메시지가 보여도 위 한 줄만 보이면 컴파일은 정상적으로 된 것입니다.
혹시 이상한 에러가 나거나 하는 분들은 질문남겨주세요.
이상으로 오늘의 포스팅을 마치도록 하겠습니다.
그럼 좋은 주말 보내세요 ^-^