demun(대문블로그)

퍼블리셔/Grunt2014. 12. 26. 17:49

그런트로 작업환경을 구성하는 글을 작성하였습니다.이글은 총 7편의 글로 작성되어져 있습니다.그런트(Grunt)를 사용해본 경험자면 1편만 보고 사용해도 됩니다. 만약 모르시는 분들이라면 모두 읽어보시고 사용하세요. 2014/12/26 - [Development/Grunt] - 1편 그런트(Grunt)로 작업환경 구성하기2014/12/26 - [Development/Grunt] - 2부 css task2014/12/26 - [Development/Grunt] - 3부 js task2014/12/26 - [Development/Grunt] - 4부 html task2014/12/26 - [Development/Grunt] - 5부 추가모듈2014/12/26 - [Development/Grunt] - 6부 그..

퍼블리셔/Grunt2014. 12. 26. 17:43

1.그런트(Grunt) 작업환경 구성하기 그런트 작업환경 구성하기 는 사이트를 제작하는데 있어 반복되는 작업들(폴더 만들고, 재사용 해야하는 코드들 포함하고, 플러그인들 즉 javascript, css 등등을 포함해야하고 이러한 일련의 과정)을 매번 만들고 구성해야 하는데, 이러한 일련의 과정을 줄이고, 자동화해서 작업효율을 높이고 제작 및 배포를 손쉽게하기 위함입니다. 즉 이 모든것을 한번에 간단하게 구축하는것을 말합니다.또한 어느 사이트나 적용할 수 있도록 탄력적으로 구성하는 것이 목표가 되겠습니다. 설치되어 있어야 할 환경 Grunt 를 사용하려면 우선 node.js 를 설치해야 하고, git 을 설치해야 합니다.또 콘솔창을 열어 아래의 코드를 입력해서 그런트를 사용할 수 있도록 합니다. npm i..

퍼블리셔/Grunt2014. 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 모듈에 대해서 다뤄봅니다. 그런트에서 l..

퍼블리셔/Grunt2014. 12. 26. 17:41

3부 Grunt js task 그런트 자바스크립트 작업 javascript task 자바스크립트는 일반적으로 jshint , concat , uglify 등 3개의 모듈을 사용합니다.각각에 대한 모듈을 간단이 살펴봅니다. jshint 모듈 jshint 저장소 - https://github.com/gruntjs/grunt-contrib-jshintjshint 는 자바스크립트의 오류를 잡아주는 모듈입니다.오류가 하나라도 있으면 통과가 되지 않습니다. 즉 빌드가 되지 않습니다.jshint 의 옵션은 상당이 많습니다. 옵션만 보더라도 많은양의 글을 봐야합니다.규칙을 번역해놓은 좋은글을 링크합니다. JSHint의 옵션 정리 - http://blog.outsider.ne.kr/1007Gruntfile.js 에 적힌..

퍼블리셔/Grunt2014. 12. 26. 17:41

4부 Grunt html task 그런트 html 작업 html task html 의 단점은 인클루드를 못한다는 점입니다. 물론 다른언어인 jsp, 'php' ... 등등은 인클루드를 할 있지만 html 자체에는 없습니다.그런한 단점을 보완해주는 includes 모듈을 사용합니다.또한 전처리 언어인 json 을 사용할 수 있게 동시에 설정을 해놓았습니다. includes 모듈 includes 모듈은 위에서 말했듯 인클루드를 사용할 수 있게 만들어줍니다.작업을 하다보면 매 페이지마다 동일하게 들어가는 요소가 있습니다.예를들어 gnb 처럼 ul 요소가 하위 몇 뎁스까지 늘어진 요소가 매 페이지마다 들어간다고 하면, 매번 복사해서 붙여넣기해야 합니다.하지만 includes 를 사용하면 gnb.html 를 만들..

퍼블리셔/Grunt2014. 12. 26. 17:41

추가적인 모듈 여기서 살펴볼 추가적인 모듈은 watch , connect , clean , copy , imagemin 입니다.이 모듈들은 그런트로 환경구성하는데 있어 필요한 모듈들입니다.하나 하나 살펴보겠습니다. watch 와치는 아주 유명합니다. 실시간으로 코드와 브라우져를 동기화시켜주는 모듈입니다.예를들어 에디터에서 코드를 수정하면 브라우져에서 수정한 코드를 바로 보여줍니다.watch 는 livereload 를 이용합니다.livereload 홈페이지 - http://livereload.com/watch 저장소 - https://github.com/gruntjs/grunt-contrib-watchwatch 는 수정이 될 수 있는 파일과 모듈들을 연결시켜줍니다.그래야 해당 파일들이 수정될때 해당 모듈들..

퍼블리셔/Grunt2014. 12. 26. 17:40

6. 그런트 최적화하기 그런트를 좀더 최적화하기 위해 추가적으로 설치해서 사용하는 모듈이 있습니다.그런트를 최적화하거나 사용자의 환경에 맞게 좀더 수정할 수 있는 방법을 알아봅니다. time-grunt : 작업시간 표시 time-grunt 모듈은 태스크들의 작업시간을 콘솔창에 보여주는 모듈입니다.저장소 - https://github.com/sindresorhus/time-grunt설치와 사용법은 저장소에 다 나와 있습니다.아래처럼 사용하면 됩니다. // Gruntfile.js module.exports = function (grunt) { require('time-grunt')(grunt); grunt.initConfig(); } Gruntfile.js 에 //작업시간 표시 라고 주석을 달아놓았습니다. ..

퍼블리셔/Grunt2014. 12. 26. 17:40

그런트작업환경구성하기 설정편 그런트작업환경 구성하기 에서 다루지 못한 설정에 대한 이야기 입니다.Gruntfile.js 에서 설정한 구문에 대한 추가 설명과 bower.json 에 대한 설명입니다. Gruntfile.js 환경설정 변수 맨 처음부분에 아래처럼 변수를 정의해놨습니다. var appConfig = { app: 'SourceCode', dist: 'FinishCode', devcode: 'DevCode', bower: 'bower_components', gruntfile: 'SourceCode/grunt' }; app 는 소스코드를 가르킵니다. 여기서는 SourceCode 라는 폴더로 지정했습니다.dist 는 목적지를 가르킵니다. 여기서는 FinishCode 라는 폴더로 지정했습니다.devco..

퍼블리셔/SublimeText2014. 10. 28. 09:53

html에서 태그 감싸는 방법 html에서 텍스트나 태그를 감싸는 태그를 만들때 사용하는 방법입니다. 실무에서 많이 사용하고, 무척이나 유용한 방법이여서 소개합니다. 이 방법은 emmet 플러그인이 설치되어 있어야 합니다. emmet 설치방법은 이전 블로그 글을 참고하세요. emmet 설치 및 사용방법 아래 이미지를 보시면 이해가 될겁니다.텍스트나 태그가 있고, 해당 텍스트를 블럭을 지정하고 Ctrl+Shift+G 를 누릅니다. 여기서 텍스트가 줄이 안맞아도 상관없습니다. 줄까지 잘 맞쳐줍니다. 그럼 서브라임텍스트 하단에 창이 나타납니다. 이제 젠코딩처럼 입력하면 됩니다.여기서 한가지 팁을 더 드리자면 $ 입니다. 이것은 숫자를 나타냅니다. 그런데 $# 을 누르면 해당 텍스트가 링크에 포함됩니다. 또한 ..

퍼블리셔/SublimeText2014. 10. 19. 09:00

DocBlockr 은 서브라임텍스트에서 사용하는 플러그인으로써 주석을 통해서 문서작성을 도와주는 플러그인입니다.제가 사용해보니 아주 유용한 플러그인입니다. 없어서는 안될 플러그인입니다. 혹시 사용하고 있지 않다면 꼭 사용해보세요.아래의 몇개의 사진을 보면 이해가 가실겁니다. 이렇듯 많은 기능을 제공합니다. 홈페이지에 보시면 더 많은 설명과 이미지가 있으니 참고하세요.홈페이지 : https://github.com/spadgos/sublime-jsdocs 설치 다른 플러그인 설치할때처럼 Ctrl+Shift+P 를 눌러 pci 해서 package control 를 설치합니다.그후 팝업창에서 DocBlockr 를 입력해서 설치하면 됩니다. 아시다시피 서브라임텍스트에서는 플러그인을 설치하는 방법은 매우 간단합니다..