개발일지

GULP + LESS(2)

• javascript

GULP로 복잡한 LESS 컴파일하기

지난번 포스트에서는 GULP의 기본적인 사용법을(심지어 다른 IDE에서는 기본 기능이기도 한!) 다루었습니다만,
이번 포스트에서는 보다 현실적인 시나리오를 GULP로 구현해 보도록 하겠습니다.

LESS수정 -> CSS작성 -> 최소화 -> 소스맵 작성 -> 브라우져 리로딩

1.CSS 최소화 기능 추가
음. 잠시 검색해 보니, gulp에서 동작하는 css최소화 플러그인이 있군요?
다음 커맨드를 입력해서 설치합니다.
$ npm install gulp-minify-css --save -dev

그리고 소개 페이지의 지침에 따라 gulpfile.js 를 수정해 줍니다.

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');

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

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

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

그리고 실행시켜 봅니다.
$ gulp

이제 좀 재미가 붙습니다.

.pipe(minifyCSS())

를 추가하기만 했는데 LESS수정 -> CSS작성 -> 최소화
가 구현되었습니다.

2.CSS 소스맵 작성 기능 추가
소스맵은 저 스스로도 사용해 본 적이 없습니다. 조만간 소스맵을 사용한 디버깅도 정리해 봐야겠네요.
gulp에서 동작하는 css최소화 플러그인문서에 소스 맵 작성에 관한 언급이 있습니다.
gulp 소스맵 작성 플러그인을 다음 커맨드를 사용해서 설치해 봅니다.
$ npm install gulp-sourcemaps --save -dev
그리고 소개 페이지의 지침에 따라 gulpfile.js 를 수정해 줍니다.
sourcemaps.init() 함수와 sourcemaps.write() 함수의 전후에서 less컴파일과 최소화를 시키라고 하네요.

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');

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

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

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

그리고 실행시켜 봅니다.
$ gulp

LESS수정 -> CSS작성 -> 최소화 -> 소스맵 작성

까지의 시나리오가 완성되었습니다.

3.브라우저 리로딩 기능 추가

검색해 보니 gulp-server-livereload라는 것이 존재하는 것 같습니다.
다음 커맨드를 사용해서 설치해 줍니다.

$ npm install gulp-server-livereload --save-dev

그리고 다음과 같이 gulffile.js를 수정해 줍니다.

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
var server = require('gulp-server-livereload');

gulp.task('webserver', function() {
	gulp.src('./index.html')
		.pipe(server({
			livereload: true,
			directoryListing: true,
			open: true
		}));
});

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

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

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

아.. 실제로 구현하니 감격스럽습니다.
이제, LESS수정 -> CSS작성 -> 최소화 -> 소스맵 작성 -> 브라우져 리로딩
을 자동으로 수행하는 개발환경을 갖출 수 있게 되었습니다.
전 당분간 모든 프로젝트에서 GULP를 사용하게 될 것 같네요.

comments powered by Disqus