Grunt(그런트) grunt-csscomb 플러그인 사용하는 방법

요즘 반응형으로 티스토리 스킨을 만들고 있는데 grunt 를 사용해서 제작하고 있습니다.

grunt 플러그인들이 너무 많아서 하나 하나 익히고, 적용해가면서 제작하고 있는데요. 나무 양이 많아 하나 하나 정리하면서 포스팅하면서, 제작할려고 이렇게 글을 남김니다.

grunt 홈페이지 -> http://gruntjs.com/

grunt 홈페이지 번역 -> http://gruntjs-kr.herokuapp.com/

grunt-csscomb 저장소 -> https://github.com/csscomb/grunt-csscomb

기본 사항은 위의 주소에 다 나와 있습니다.

grunt-csscomb 는 css 속성을 순서별로 잘 정리하는 역활을 합니다.

gruntfile.js 는 아래와 같이 설정합니다.

주석으로 처리된곳은 파일을 하나 하나 지정해서 사용하는 방법이고 아래 files 는 파일전부를 지정하는 방법입니다.

위에 config 부분은 부트스트랩의 설정을 그대로 사용했습니다.

설정파일은 https://github.com/twbs/bootstrap/blob/master/less/.csscomb.json 에 있습니다.

이 설정파일을 적용해서 빌드하면 아래처럼 순서대로 정렬이 됩니다.

position, padding, margin, 다음에 overflow 가 오는등 순서대로 정렬이 된것을 볼 수 있습니다.

부트스트랩의 설정파일이 싫으시면 다른 설정파일을 만들어서 사용해도 무방합니다.

이런식으로 설정하고 하단에 grunt.loadNpmTasks('grunt-csscomb'); 를 지정하고 grunt.registerTask 에 넣고 실행하면 됩니다.