demun(대문블로그)

퍼블리셔/Grunt2015. 6. 17. 07:00

grunt-csscomb grunt-csscomb 원문 css 속성을 특정 순서로 정렬하는 플러그인 Getting Started 시작하기 이 플러그인은 grunt ~0.4.x 버젼이 필요합니다. Grunt 의 Grunt 시작하기를 확인해야합니다. 이 문서는 Gruntfile을 만들뿐만 아니라 설치하고 Grunt 플러그인을 사용합니다. 이 과정에 익숙하다면, 당신은 다음 명령으로 이 플러그인을 설치할 수 있습니다: npm install grunt-csscomb --save-dev 플러그인이 설치되면, Gruntfile 내에서 자바스크립트의 코드로 아래의 명령을 사용할 수 있습니다 : grunt.loadNpmTasks('grunt-csscomb'); The "csscomb" task Overview 개요 프..

퍼블리셔/Grunt2015. 6. 16. 07:00

grunt-autoprefixer grunt-autoprefixer 원문 CSS를 파싱하고 데이터베이스를 이용하여 사전 지정한 CSS속성에 밴더를 추가할수 있습니다. Autoprefixer를 기반으로... Getting Started 시작하기 이 플러그인은 Grunt~0.4.0을 필요로 한다. 만일 이전에 Grunt를 사용한 경험이 없다면, Gruntfile을 어떻게 생성하는가와 설치방법, 플러그인의 사용법 등을 설명하고 있는 그런트 시작하기 가이드를 꼭 읽어보기 바란다. 그내용을 숙지했다면 아래의 명령어로 이 플러그인을 설치할 수 있을것이다. npm install grunt-autoprefixer --save-dev 플러그인이 설치되면, Gruntfile 내에서 자바스크립트의 코드로 아래의 명령을 사용..

퍼블리셔/Grunt2015. 6. 15. 07:00

grunt-contrib-csslint grunt-contrib-csslint 원문 이 문서는 grunt-contrib-csslint 문서와 규칙에 대한 부분을 모두 실었습니다. 페이지 이동없이 한페이지에서 모두 보기위해 작성되었습니다. grunt-contrib-csslint , CSSLint Rules, CSSLint Rules 번역 을 참고하였습니다. 규칙에 대한 전체 옵션 important adjoining-classes known-properties box-sizing box-model overqualified-elements display-property-grouping bulletproof-font-face compatible-vendor-prefixes regex-selectors error..

퍼블리셔/Grunt2015. 6. 14. 07:00

grunt-contrib-less grunt-contrib-less 원문 LESS 파일을 CSS 파일로 컴파일 합니다. Getting Started 시작하기 이 플러그인은 Grunt ~0.4.5 버젼이상이 필요. Grunt 의 Grunt 시작하기를 확인해야합니다. 이 문서는 Gruntfile을 만들뿐만 아니라 설치하고 Grunt 플러그인을 사용합니다. 이 과정에 익숙하다면, 당신은 다음 명령으로 이 플러그인을 설치할 수 있습니다: npm install grunt-contrib-less --save-dev 플러그인이 설치되면, Gruntfile 내에서 자바스크립트의 코드로 아래의 명령을 사용할 수 있습니다 : grunt.loadNpmTasks('grunt-contrib-less'); 이 플러그인은 그런트의..

퍼블리셔/Grunt2015. 6. 13. 07:00

4.css task css 작업인 less , csslint , autoprefixer , csscomb , cssmin 사용방법 및 예제입니다. css 를 만드는 작업입니다. less less 는 css 를 만드는 작업입니다. Gruntfile.js 에서 사용하는 예제는 아래와 같습니다. less: { dist: { options: { banner: '', dumpLineNumbers : 'comments' }, src: 'app/less/style.less', dest: 'app/css/style.css' }, }, 설명 src 는 소스코드의 경로입니다. dest 는 목적지 경로입니다. 즉 src 의 less 파일을 dest 폴더에 css 파일로 만듭니다. 옵션은 그런트에서 지원하는 변수인 를 이용해..

퍼블리셔/Grunt2015. 6. 12. 07:00

htmlhint Rules htmlhint Rules 규칙 Nico Schlömer 는 3월 4일에 개정판 2 페이지를 편집 Standard 표준 tagname-lowercase Level: error 태그 이름은 소문자여야 한다. attr-lowercase Level: error 속성 이름은 소문자여야 한다. attr-value-double-quotes Level: error 속성의 값은 따옴표로 감싸야 한다. attr-value-not-empty Level: warning 속성의 값은 비어있지 않고 설정해야 한다. attr-no-duplication Level: error 속성은 중복되지 않아야 한다. doctype-first Level: error DOCTYPE 먼저 선언해야 한다. tag-pair..

퍼블리셔/Grunt2015. 6. 11. 07:00

grunt-htmlhint grunt-htmlhint 원문 html 을 htmlhint 로 검증합니다. Getting Started 시작하기 이 플러그인은 grunt ~0.4.1 버젼 이상이 필요합니다. Grunt 의 Grunt 시작하기를 확인해야합니다. 이 문서는 Gruntfile을 만들뿐만 아니라 설치하고 Grunt 플러그인을 사용합니다. 이 과정에 익숙하다면, 당신은 다음 명령으로 이 플러그인을 설치할 수 있습니다: npm install grunt-htmlhint --save-dev 플러그인이 설치되면, Gruntfile 내에서 자바스크립트의 코드로 아래의 명령을 사용할 수 있습니다 : grunt.loadNpmTasks('grunt-htmlhint'); The "htmlhint" task Overv..

퍼블리셔/Grunt2015. 6. 10. 07:00

grunt-includes grunt-includes 원문 이 플러그인은 Grunt ~0.4.0 버젼이상이 필요. 파일내에 다른 파일을 포함하는 grunt 작업입니다.(php 포함) 모든 부모와 자식들의 들여 쓰기를 그대로 유지합니다. Getting Started 시작하기 프로젝트의 Gruntfile.js 에 플러그인을 설치합니다. npm install grunt-includes --save-dev 그런다음 프로젝트의 Gruntfile.js 다음줄를 추가합니다. grunt.loadNpmTasks('grunt-includes'); grunt-includes-example 에서 예제를 볼수 있습니다. Options flatten Type: String , Default: false 대상 디렉토리에 있는 모든..

퍼블리셔/Grunt2015. 6. 9. 07:00

3.html task html 작업인 includes , htmlhint 모듈의 사용방법 및 예제입니다. html task 에서는 includes , htmlhint 등의 플러그인을 통해서 html 을 만듭니다. 예제에서 html 을 생성하는 docs 의 폴더구조는 아래와 같습니다. +---docs | +---html | | +---category1 | | | page-01.html | | | page-02.html | | | | | \---category2 | | page-01.html | | page-02.html | | | \---include | | head.html | | js.html | | | \---other | lorem.html | lorem2.html 예제에 사용된 프로젝트 저장소는 ..

퍼블리셔/Grunt2015. 6. 8. 08:00

Grunt 소개 Grunt 홈페이지 Grunt 홈페이지 번역 Grunt 플러그인 저장소 Grunt 가 무엇인가? grunt 는 프로젝트 자동화를 위한 task(작업) 단위로 실행되는 커멘드라인 빌드 툴입니다. 즉 프로젝트 자동화를 쉽게 해주는 프로젝트 관리 도구입니다. 다른 말로 패키지 관리자라고도 합니다. 패키지 관리자에는 Yeoman , Bower , Gulp 도 있습니다. 왜 Grunt 인가? 자동화 패키지 중에서 가장 기본이 되는 도구 입니다. 패키지 관리자인 Yeoman , Bower 등도 Grunt 를 알아야 쉽게 사용할 수 있고, Gulp 도 Grunt 를 알면 쉽게 익힐 수 있습니다. Yeoman 에는 Grunt 와 Bower 가 포함이 되어 있고, Grunt 에는 Bower 를 포함하기도..