2부 Grunt 그런트 css task
- 퍼블리셔/Grunt
- 2014. 12. 26. 17:41
css task
css 를 사용하기 위해 많이 사용하는 전처리 언어는 less , sass 를 사용한다.
stylus 도 있긴한데 사용율은 위의 두개보다 떨어지는듯하다.
css 의 제작과정을 살펴보면, less 를 사용해서 제작하고, autoprefixer
태스크를 사용해서 밴더 프리픽스를 붙이고, csscomb 를 통해서 속성정리를 한다음
csslint 태스크를 사용해서 구문오류를 잡고, cssmin 태스크를 통해서 압축을 진행한다.
css 를 만드는데 있어 less, autoprefixer , csslint , cssmin 등 총
4개의 태스크를 사용한다.
이글에서는 이 4개의 모듈의 사용법을 알아본다.
여기서는 일단 less 에 대해서 다루고 차후에 sass 모듈에 대해서 다뤄봅니다.
그런트에서 less 를 사용하려면 명령창에서 npm 을 통해 설치하게 된다
그런트 작업환경구성하기를 이용하면 아래의 모든 설정은 모두 입력되어져 있습니다.
less 모듈
less 저장소 - https://github.com/gruntjs/grunt-contrib-less
만약 따로 모듈을 설치하려면 명령창을 통해 아래처럼 입력하면 설치가 된다.
npm install grunt-contrib-less --save-devGruntfile.js 에서 사용하기 위해서는 아래처럼 태스크를 적어줘야 한다
grunt.loadNpmTasks('grunt-contrib-less');이제 설정법이다.
옵션에 대한 부분을 적어주고 설정한다음 모듈을 불러들이면 된다.
그런트 작업환경구성하기 에서 사용하는 옵션은 아래와 같고, 물론 미리 입력이 되어있다.
less: {
docs: {
options: {
banner: '<%= banner %>',
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: 'style.css.map',
sourceMapFilename: '<%= config.dist %>/css/style.css.map'
},
src: '<%= config.app %>/less/style.less',
dest: '<%= config.app %>/css/style.css'
},
}간단이 설명하자면, options 부분은 banner: 배너를 삽입하고 소스맵을 생성한다.
src 는 소스코드의 경로이고, dist 는 목적지 경로다.
즉 style.less 파일을 style.css 로 변환하는거다.
옵션과 자세한 설정법은 저장소를 참고하기 바란다.
autoprefixer 모듈
autoprefixer 저장소 - https://github.com/nDmitry/grunt-autoprefixer
css3 를 사용하면 브라우져마다 지원정도가 달라서 브라우져에 해당하는 밴더프리픽스를 붙여줘야 한다.
예를들어
.test {
transition: all .2s ease;
}라고 입력하면 autoprefixer 는 아래처럼 만들어준다
.test {
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}- 설치법
npm install grunt-autoprefixer --save-devGruntfile.js 에는 아래처럼 입력해서 사용한다
grunt.loadNpmTasks('grunt-autoprefixer');물론 그런트 작업환경구성하기 에서는 다 입력이 되어있다.
옵션을 보면 브라우져 버젼에 맞게 밴더프리픽스를 만들고 docs 에 보면
<%= less.docs.dest %> 라고 있는데 이건 위에서 만든 less 의 dest 목적지파일을
사용하라는 의미다.
물론 주석처리된 것을 사용해도 된다.
autoprefixer: {
options: {
browsers: [
'Android 2.3',
'Android >= 4',
'Chrome >= 20',
'Firefox >= 24', // Firefox 24 is the latest ESR
'Explorer >= 8',
'iOS >= 6',
'Opera >= 12',
'Safari >= 6'
]
},
docs: {
options: {
map: true
},
// src: '<%= config.app %>/css/style.css'
src: '<%= less.docs.dest %>'
}
}csscomb 모듈
csscomb 모듈은 css 의 속성을 정렬해준다.
csscomb 저장소 - https://github.com/csscomb/grunt-csscomb
- 설치법
npm install grunt-csscomb --save-devGruntfile.js 에는 아래처럼 입력해서 사용한다
grunt.loadNpmTasks('grunt-csscomb');물론 그런트 작업환경구성하기 에서는 다 입력되어져 있다.
옵션은 .csscomb.json 에 있는 규칙에 의해서 작성하라는 의미이고,
소스코드에 있는 css 파일을 목적지에 있는 css 폴더에 넣으라는 의미입니다.
csscomb: {
options: {
config: '<%= config.custom %>/.csscomb.json'
},
dist: {
expand: true,
cwd: '<%= config.app %>/css/',
src: ['*.css', '!*.min.css'],
dest: '<%= config.dist %>/css/'
}
}csslint 모듈
csslint 모듈은 css 의 속성을 정렬해준다.
csslint 저장소 - https://github.com/gruntjs/grunt-contrib-csslint
- 설치법
npm install grunt-contrib-csslint --save-devGruntfile.js 에는 아래처럼 입력해서 사용한다
grunt.loadNpmTasks('grunt-csscomb');물론 그런트 작업환경구성하기 에서는 다 입력되어져 있다.
옵션은 .csscomb.json 에 있는 규칙에 의해서 작성하라는 의미이고,
소스코드에 있는 css 파일을 목적지에 있는 css 폴더에 넣으라는 의미입니다.
csscomb: {
options: {
config: '<%= config.custom %>/.csscomb.json'
},
dist: {
expand: true,
cwd: '<%= config.app %>/css/',
src: ['*.css', '!*.min.css'],
dest: '<%= config.dist %>/css/'
}
}cssmin 모듈
cssmin 모듈은 css 의 속성을 정렬해준다.
cssmin 저장소 - https://github.com/gruntjs/grunt-contrib-cssmin
- 설치법
npm install grunt-contrib-cssmin --save-devGruntfile.js 에는 아래처럼 입력해서 사용한다
grunt.loadNpmTasks('grunt-contrib-cssmin');물론 그런트 작업환경구성하기 에서는 다 입력되어져 있다.
옵션은 ie8 에 맞게 호환성모드를 사용하라는것과, 모든 공백을 제거하고
배너를 추가라는 의미입니다.
소스코드에 있는 css 파일을 목적지에 min.css 파일로 만들라는 의미입니다.
cssmin: {
options: {
compatibility: 'ie8',
keepSpecialComments: '*',
noAdvanced: true,
banner: '<%= banner %>'
},
docs: {
src: '<%= config.dist %>/css/style.css',
dest: '<%= config.dist %>/css/style.min.css'
}
}이 모든 설정법은 모두 입력되어져 있으며, 차후 사용자에 맞게 수정해서 사용할때 수정해서 사용하면 됩니다.