1.그런트(Grunt) 작업환경 구성하기

그런트 작업환경 구성하기 는 사이트를 제작하는데 있어 반복되는 작업들(폴더 만들고, 재사용 해야하는 코드들 포함하고, 플러그인들 즉 javascript, css 등등을 포함해야하고 이러한 일련의 과정)을 매번 만들고 구성해야 하는데, 이러한 일련의 과정을 줄이고, 자동화해서 작업효율을 높이고 제작 및 배포를 손쉽게하기 위함입니다. 즉 이 모든것을 한번에 간단하게 구축하는것을 말합니다.

또한 어느 사이트나 적용할 수 있도록 탄력적으로 구성하는 것이 목표가 되겠습니다.



설치되어 있어야 할 환경

Grunt 를 사용하려면 우선 node.js 를 설치해야 하고, git 을 설치해야 합니다.

또 콘솔창을 열어 아래의 코드를 입력해서 그런트를 사용할 수 있도록 합니다.

npm install -g grunt-cli

위의 코드를 입력하면 아무 폴더에서나 그런트를 시작할 수 있씁니다.

bower 를 사용하기 위해서는 아래의 코드도 입력해야 합니다.

npm install -g bower

마찬가지로 전역적으로 bower 를 사용할 수 있습니다.

윈도우에서 진행하는 작업입니다. Gruntfile.js 의 구성은 사용자마다 다를수 있습니다. 자세한 글은 gruntjs, bower 을 참고하세요.



폴더 구조

작업하는 폴더구조의 컨테이너 폴더구조는 아래와 같습니다.

  bower.json ---------> bower 플그러인을 설치하는 파일
  Gruntfile.js -------> 그런트 파일
  package.json -------> 프로젝트 설정파일
├─bower_components ---> bower 플러그인 폴더
├─DevCode ------------> 개발자 참고용폴더
├─FinishCode ---------> 최종 빌드완료된 폴더
├─node_modules -------> 그런트 모듈폴더
└─SourceCode ---------> 작업할 소스폴더

여기서 중요한 것은 SourceCode 입니다. 여기서 작업을 한것을 빌드하면 완료된폴더가 FinishCode 폴더입니다. DevCode 폴더는 개발자 참고용 폴더인데 신경안써도 됩니다.



SourceCode

SourceCode 폴더는 작업을 할 폴더이므로 가장 중요한 폴더입니다.

├─fonts
├─grunt
├─html
├─jade
├─js
└─less

여기서 참고할점은 html 폴더와 jade 폴더입니다.

이 두 폴더의 파일들이 빌드하면 FinishCode 폴더의 하위 즉 루프폴더가 됩니다.

또한 html 로 최종 컨버팅되어 집니다.

html 폴더는 inclides 모듈을 사용하고, jade 폴더는 jade 모듈을 사욯합니다. 어떤걸 사용하든 사용자 맘으로 하나만 사용해도되고, 둘다 사용할수도 있습니다.

자세한 것은 이후의 글을 참고하세요.



작업(태스크)

큰작업은 html, css, javascript 이며, 나머지는 그 작업들을 구성하는 그런트 환경입니다.

html

  • jade: view 템플릿엔진으로 html 을 작성하기 위한 확장언어
  • include : html을 그대로 사용하지만 인클루드를 사용할 수 있는 모듈

css

  • less : css 를 만들기위한 전처리 언어
  • sass : css 를 만들기위한 전처리 언어(여기서는 포함되지 않았음)
  • autoprefixer : 프리픽스 벤더를 입력해주는 모듈
  • csscomb : css 속성을 우선순위로 정렬해주는 모듈
  • csslint : css 구문오류를 잡아주는 모듈
  • cssmin : css 를 압축해주는 모듈

javascript

  • jshint : 자바스크립트 구문 오류를 잡아주는 모듈
  • concat : 파일을 합쳐주는 모듈
  • uglify : 변수명 등을 줄여서 압축해주는 모듈

추가적인 모듈

  • watch : 라이브로 동기화 시켜주는 모듈
  • connect : 서버를 열어주는 모듈
  • clean : 폴더 및 파일 삭제
  • copy : 폴더 및 파일 복사
  • imagemin : 이미지 최적화

그런트 최적화 태스크(작업)

  • time-grunt : 작업시간 표시
  • load-grunt-tasks : 자동으로 그런트 태스크 로드
  • concurrent : 다중 태스크 병렬로 실행
  • newer : 수정된 코드나 파일만 로드해주는 태스크

주요 태스크(작업모듈)은 이정도이며, 추가적인 모듈까지 진행할 예정이며, 상황에 따라 그런트 최적화 태스크에 대해서도 다뤄보겠습니다.

개인적으로 추가적으로 사용할만한 태스크가 몇가지 더 있습니다.



명령어 하나로 환경구성하기

명령어 하나로 위의 환경구성을 간단하게 할 수 있습니다.

gruntgit 을 사용해본 경험자라면 아래의 파일을 다운로드해서 콘솔창을 열어 명령어를 입력하면 바로 환경구성이 됩니다.

콘솔창에서 파일명과 프로젝트명(폴더명) 두개만 입력하면 관련 모듈들이 한번에 설치가 됩니다.

아래파일을 다운로드해서 같은 폴더내에서 콘솔창을 열기 바랍니다.

아래처럼 해당폴더에 tem.sh 파일과 같은 곳에서 명령창을 열어야합니다.

그런 다음 아래의 그림처럼 코드 입력하면 끝

tem.sh project-name

설치되는 과정을 담은 이미지를 첨부합니다.

다음글은 그런트 모듈들에 대한 설명입니다.