Grunt(그런트) grunt-csscomb 플러그인 사용하는 방법
- 퍼블리셔/Grunt
- 2014. 5. 13. 06:00
요즘 반응형으로 티스토리 스킨을 만들고 있는데 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 에 넣고 실행하면 됩니다.