개발일지

GULP + LESS(1)

• javascript

GULP로 LESS 컴파일하기

요즈음 등장하는 자바스크립트 라이브러리를 학습하기 위해서는 자동화 툴에 대한 이해가 필수적입니다.
각종 예제 소스들이 webpack, gulp, grunt와 같은 자동화 툴을 사용하여 배포되고 있기 때문에 더더욱 그러합니다.
컴파일(혹은 트랜스파일) + 라이브러리의 import를 해보지 않으면 기술을 따라잡을 수도 없습니다.
자동화 툴인 GULP의 학습을 위해서 이전에 작업했던
WEBSTORM + LESS 조합을 GULP + LESS 조합으로 다시 구현해 보겠습니다.

0.테스트를 위해 html과 less파일을 준비합니다.
main.less
index.html

1.npm을 사용하여 gulp를 global 영역에 설치합니다
$ npm install gulp -g

2.다음의 커맨드를 사용하여 작업 디렉토리에 package.json을 생성해 줍니다
$ npm init

package.json을 생성하지 않아도 목적을 달성하는데에는 큰 문제가 없지만 프로젝트에 관련된 라이브러리를 자동으로 설치하거나,
자동화된 테스트를 실행시켜야 할 때에는 매우 유용하게 사용할 수 있습니다.
특히 다른 개발자들은 이미 package.json을 사용하여 유용한 라이브러리를 배포하고 있으니, 사용방법을 익혀두는 것이 여러모로 유리합니다.

3.다음의 커맨드를 사용하여 작업 디렉토리에 gulp를 설치해 줍니다.
$ npm install gulp --save-dev
–save-dev 옵션은 2번째 과정에서 작성한 package.json의 dependencies 프로퍼티에
이 프로젝트의 개발에 필요한 라이브러리를 기록해 줍니다.

50

4.gulp에서 less의 컴파일을 자동으로 실행시켜주는 gulp-less플러그인을 설치합니다.
아. 그런데 화면만 봤을때에는 사용법이 만만치 않습니다..
여러모로 검색을 해보니.. 이렇게 좋은 가이드가 있군요..!

5.gulpfile.js 만들기
gulp라는 프로그램은 gulpfile.js라는 파일을 기본적으로 읽어들인다고 합니다.
여러가지 시행착오 끝에 만들어 낸 gulpfile.js은 다음과 같습니다.

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function () {
	return gulp.src('./*.less')
		       .pipe(less())
		       .pipe(gulp.dest('./'));
});

그리고 다음 커맨드를 입력해서 실행시키면 gulp에게 less => css 변환 작업을 명령할 수 있습니다.
$ gulp less

6.watch기능 추가하기
WEBSTORM + LESS 조합에서는 LESS => CSS변환이 자동으로 이루어지니,
지금 작성한 gulp명령에도 CSS 자동 변환 기능을 덧붙여 보겠습니다.

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function () {
	return gulp.src('./*.less')
		       .pipe(less())
		       .pipe(gulp.dest('./'));
});

gulp.task('watch', function () {
	gulp.watch('./*.less',['less']);
});

gulp.task('default', ['less','watch']);

현재 디렉토리에 존재하는 less파일의 변경이 감지되면! => less Task를 실행시키라는 내용을 담고 있습니다.
Task를 여러개 실행시켜야 하니 default Task를 정의하여 줍니다.
gulp에 Task작업을 실행시킬 때, task이름을 명시하지 않으면 기본적으로 default Task를 실행시킨다고 하네요.
따라서 다음과 같은 커맨드를 사용해서 실행시킵니다.
$ gulp

드디어 WEBSTORM + LESS도 구현에 성공하였고, GULP + LESS도 구현에 성공하였습니다!

결론: 번거롭습니다;;;; 엄청 귀찮습니다! 학습할 때에 스스로에게 동기를 부여하는 것이 가장 어려웠습니다;
개발 툴에서 제공하는 기능이 훨씬 간단합니다!!
특히 Adobe에서 제공하는 Brackets에디터는 이 기능을 기본적으로 제공합니다;;
그럼에도 뛰어난 개발자들이 앞다투어 이러한 도구를 도입하는데엔 이유가 있겠지요?

gulp에는 pipe함수가 있기에 다른 플러그인을 몇개든 연결해서 사용할 수가 있습니다.
즉,
LESS수정 -> CSS작성 -> 최소화 -> 소스맵 작성 -> 브라우져 리로딩
이라는 일련의 시나리오를 작성할 수 있다는 것입니다.
분명 저 시나리오는 쓸모가 있겠지만, IDE만으로 구현하기엔 까다로울 것입니다.

참조:
[NodeJS] Gulp 입문 ① - Gulp에 대한 소개
Gulp 스크립트가 왜 동작하지 않을까요?

comments powered by Disqus