작년부터 Grunt를 쓰기 시작한 뒤로 여러 관련 글을 올리기도 했지만, Grunt는 이제 내게 없어서는 안 되는 도구가 되었고 Front end 개발 과정 자체를 혁신적으로 바꾸어 버렸다고 보고 있다. 요즘은 gulp.js의 인기가 높아지고 있지만 두 도구가 하려는 일 자체는 같고 gulp.js를 나오게 한 것도 Grunt라고 보고 있다. gul.js도 관심은 있지만, 아직 여유가 없어서 익숙하던 도구를 그냥 계속 쓰고 있다. 전에는 하지 못했던 프런트 앤드 개발 자동화를 이젠 거의 Grunt로 하고 있는데 뜻밖에 Grunt 플러그인에 대한 소개는 많지 않은 것 같아서 틈틈이 하나씩 소개해 보려고 한다.
less를 사용하는 개발 환경
원래는 stylus를 더 좋아하는 편이지만 최근에 less를 쓸 일이 좀 있었다. Grunt가 없을 때 개발 과정을 보면 보통 2가지였다.
- 서버 측에서 Less를 컴파일하게 세팅해서 일반적인 정적 파일이 새로 갱신되면 바로 새로운 파일이 로딩되듯이 설정한다. 스테이징이나 프로덕션 서버에 배포할 때는 컴파일해서 최종 CSS 파일로 배포되게 한다.
- 서버 측 언어나 환경에 따라서 설정이 쉽지 않을 수 있다. 보통 Node.js에서는 괜찮은 편이지만 다른 쪽 언어에서는 해당 환경설정에 공수가 꽤 들 수 있다.
- Less를 지원하는 부분이 없으면 설정할 수 없을 수도 있지만, less는 꽤 보급되었으므로 대부분을 쓸 수 있는 편이다.
- HTML 파일에서는 Less 파일을 인클루드하고 자바스크립트 less 컴파일러인 less.js를 인클루드해서 브라우저에서 Less를 컴파일하게 한다. 개발할 때만 이렇게 사용하고 배포할 때는 less를 css로 컴파일해서 배포한다.
- 브라우저에서 컴파일하므로 실제보다 지연이 좀 있다.
- less.js는 개발용이므로 배포할 때는 이 파일을 빼줘야 하고 less 파일을 인클루드 하고 있는 부분도 컴파일된 css파일을 바꾸도록 변경해야 한다.(보통은 서버 측 템플릿언어에서 환경변수에 따라 처리하도록 만든다.)
위 두 가지 경우 모두 프런트 앤드 환경이 서버 측에 의존해야 한다. 프런트 앤드 개발자가 서버 쪽도 잘 다룬다면 큰 문제가 없을 수도 있지만 그렇지 않다면 일일이 서버 쪽 개발자한테 요청해서 환경을 만들거나 수정해야 한다.
grunt-contrib-less
grunt-contrib-less는 CSS 전처리자인 less를 위한 플러그인이다.(참고로 grunt-contrib-로 시작하는 플러그인은 Grunt팀에서 직접 관리하는 공식 플러그인이라 업데이트가 잘 되는 편이다.)
less: {
dev: {
files: {
'resources/css/style.css': 'resources/css/import.less'
}
}
},
Gruntfile.js에서 위처럼 less 설정을 할 수 있다. files는 값으로 지정한 less 파일을 컴파일해서 style.css파일로 컴파일한다. 최종 css 파일이 만들어지므로 HTML에서는 CSS 파일만 인클루드하고 있으면 된다. files에 배열로 여러 less 파일을 지정할 수도 있지만 지정한 less 파일에서 아래처럼 필요한 less 파일을 인클루드 하고 있으면 한꺼번에 모두 컴파일을 한다.
@import "config";
@import "mixins";
@import "main";
위 설정을 추가하고 grunt less:dev를 실행하면 컴파일된 CSS 파일이 만들어진다.
옵션
paths: 입력파일의 디렉터리로@import를 찾을 디렉터리(String,Array,Function)rootpath: 모든 url 리소스앞에 추가할 경로(String)compress: 공백문자를 제거할지 여부(false,true)cleancss: clean-css를 사용해서 압축할지 여부(false,true)ieCompat: IE 8에 호환되게 컴파일한다.(true,false)optimization: 파서의 최적화 수준(Integer)strictImports: import의 평가를 강제한다.(false,true)strictMath: true이면 math에 괄호가 필요하다.(false,true)strictUnits: 계산식의 단위가 다를 때 오류가 발생한다.(false,true)syncImport:@import파일을 동기로 읽는다.(false,true)dumpLineNumbers:-sass-debug-info지원을 설정한다.(String)relativeUrls: url을 상대경로로 재작성한다.(false,true)customFunctions: 커스텀 함수를 정의한다.(Object)report: 컴파일 결과 보고에 압축사이즈만 나올지 gzip 까지 나올지 지정한다.(min,gzip)sourceMap: 소스맵을 활성화한다.(true,false)sourceMapFilename: 지정한 파일명으로 소스맵을 작성한다.(String)sourceMapURL: 컴파일된 css파일에서 소스맵을 가리킬 url(String)sourceMapBasepath: 소스맵에서 less 파일의 기본 경로(String)sourceMapRootpath: 소스맵에서 less 파일에 이 경로를 추가한다.(String)outputSourceFiles: 소스맵에 less파일을 참조하지 않고 추가한다.(true,false)modifyVars: 전역변수를 오버라이드한다(Object)
grunt-contrib-watch와의 연동
grunt less:dev로 CSS 파일을 컴파일할 수 있지만 개발하면서 매번 실행하는 건 귀찮은 일이다. 이 컴파일은 배포할 때 사용할 수 있지만 개발하는 중에는 수시로 less를 변경하므로 grunt-contrib-watch를 사용해서 less 파일이 변경될 때마다 자동으로 컴파일되게 하면 편하다.
watch: {
less: {
files: 'resources/css/**/*.less',
tasks: 'less:dev',
options: {
interrupt: true
}
}
}
이 설정을 추가하고 grunt watch를 실행하면 resources/css/**/*.less에서 변경된 파일이 생길 때마다 less:dev를 실행해서 계속해서 새로운 CSS 파일을 컴파일해서 개발할 때 편하다.
Comments