demun(대문블로그)

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

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

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

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

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

5.javascript task javascript 작업인 jshint , concat , uglify 모듈의 사용방법 및 예제입니다. jshint jshint 는 자바스크립트의 오류를 검사하는 모듈입니다.Gruntfile.js 에서 사용하는 예제는 아래와 같습니다. jshint: { options: { jshintrc: 'gruntConfig/.jshintrc', force: true, // error 검출시 task를 fail 시키지 않고 계속 진단 reporter: require('jshint-stylish') // output을 수정 할 수 있는 옵션 }, grunt: { src: ['Gruntfile.js'] }, dist: { expand: true, cwd: 'app/js/site', src..

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

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

퍼블리셔/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 내에서 자바스크립트의 코드로 아래의 명령을 사용..

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

sublimetext 에서 한글입숨 사용하기 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다. 한글입숨을 만들어주는 사이트는 몇몇군데 됩니다. 하지만 일일이 방문을 해야하는 번거로움이 있죠. 서브라임텍스트에는 emmet 라는 기능을 설치하면 lorem 라고 입력한다음 탭을 치면 입숨이 입력되어 집니..

퍼블리셔/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 파일로 만듭니다. 옵션은 그런트에서 지원하는 변수인 를 이용해..