Grunt 소개와 설치방법

Node js의 탄생으로 인해 javascript진영이 비약적인 발전을 이루고 있으며 그러한 발전에 견인차 역활을 한 Grunt라는 것이 있습니다. 이러한 프레임워크를 javascript Task기반 빌드 Tools이라고 하는데 과연 이것이 무엇인지, 그리고 어떻게 설치하고 사용하는지에 대해 포스팅을 하려고 합니다.

Gruntjs란 무엇인가.

Grunt 또는 Gruntjs라고 하며 인터넷을 검색하면 Task기반 빌드 툴이라고 나옵니다. 풀어서 설명을 하면...
Node js를 기반으로 하고있는 무수한 패키지들 중에 프로젝트에서 필요한 패키지들을 설치하고 그 패키지들을 미리 설정한 순서와 옵션에 맞게 자동으로 명령어를 실행시켜주는 Tool이라고 보면 됩니다.

마치 Desktop컴퓨터의 .bat 배치파일과 동일한 역활을 합니다.

Gruntjs를 사용하기 위해서는 먼저 Node js가 설치되어 있어야 하고 프로젝트가 지정되어 있어야 합니다. Node js가 설치되면 npm(node package manager)도 자동으로 설치가 되는데 이 npm으로 gruntjs를 설치하면 됩니다.

프로젝트 지정이란 그냥 프로젝트명의 폴더 생성 이라고 보면됩니다.

Grunt 설치

Node js 설치

당연한 이야기겠지만 Node js를 먼저 설치해야 합니다. Nodejs는 한글버전도 있기 때문에 설치가 어렵지는 않습니다.
Nodejs는 Windows, macOS, Linux 등 대부분의 OS를 지원하며 설치방법은 해당 홈페이지를 참조하셔서 설치하시면 되고 여기서는 생략하도록 하겠습니다.

Windows사용자라면 그냥 홈페이지에서 설치파일을 다운로드 받아서 설치하면 됩니다.

Node js

Grunt-cli 설치

Nodejs가 설치가 되었다면 그 다음으로 grunt-cli를 설치해야 합니다. grunt-cli는 grunt Command Line Interface의 약자로 명령어 창(Dos화면)에서 명령어를 실행 할 수 있게 해줍니다. 다시말하면 gruntjs의 명령어 패키지라고 보면 됩니다.
이 grunt-cli는 일반적으로 프로젝트(local)에 설치하기보다는 컴퓨터 전체(global)에 설치를 합니다.

-g는 프로젝트에 설치하는 것이 아니라 global로 설치하겠다는 옵션입니다.

아래의 명령어는 간단하게 npm으로 grunt-cli를 설치하는 명령어입니다. 물론 온라인에 연결이 되어 있어야 합니다.

npm install -g grunt-cli

프로젝트 생성

이제 Grunt를 사용하기 위해서는 먼저 프로젝트를 생성해야 합니다. 프로젝트 생성이라 함은 별거 없이 그냥 프로젝트 명의 폴더만 하나 만들어 주면 됩니다. 그렇게 만든 폴더에 package.json파일과 Gruntfile.js만 있으면 프로젝트의 root folder가 됩니다.

package.json

package.json 은 프로젝트의 정보와 버전, 설치된 javascript 패키지리스트 등.. 프로젝트의 전반적인 내용을 기록하고 있는 파일입니다. package.json은 grauntjs에 특화된 파일은 아니고 Node js에서 사용하는 것을 Gruntjs 에서도 사용하는 것이라 보는 것이 맞습니다. 만약 기존에 미리 설정된 package.json이 있다면 npm install이라는 명령어로 package.json에 기록되어 있는 javascript 패키지를 일괄 설치 할 수 있습니다. package.json파일이 잆다면 명령어 창에 npm init로 문답형식으로 새로 생성할 수 있습니다.

npm init

gruntfile.js

Gruntjs에 특화된 파일입니다. Gruntjs를 사용한다는 것은 이 gruntfile.js를 다루는 것이라고 보면 됩니다. 이 파일에는 어떤 패키지를 어떤 옵션으로 언제 실행 할 것인가에 대해 기록을 합니다. 그리고 grunt 또는 grunt serve 또는 grunt build등의 명령어로 실행시키도록 되어 있습니다. 이 명령어 조차도 gruntfile.js에서 지정을 합니다.
파일이 없다면 그냥 gruntfile.js 파일명으로 파일을 새로 만들면 됩니다.

Grunt 설치

grunt-cli가 명령어 패키지라면 grunt는 프로젝트의 하나의 모듈로 설치하는 것입니다. 실제로 grunt를 설치해야 비로서 프로젝트에 grunt를 사용할 수 있게 됩니다.

로컬 프로젝트에 설치하는 것이기 때문에 -g옵션은 없습니다.

--save-dev옵션은 package.json에 기록을 하되 devDependencies 항목에 기록을 하라는 옵션입니다.

npm install grunt --save-dev

Grunt로 사용할 다양한 패키지 설치

Grunt까지 설치를 하면 기본적으로 grunt를 사용할 준비가 된 상태입니다. 다만 그것만 가지고는 크게 할 수 있는 일이 없습니다. 그 Grunt가 명령을 내릴 다양한 패키지들의 설치가 필요합니다. 참고로 Grunt에서는 패키지를 플러그인이라고 부릅니다.

예를 들면 작성된 프로젝트의 javascript 소스가 문법에 맞게 잘 작성이 되었는지 검증 해 주는 jslint패키지(플러그인)도 있어야 하고 여러개로 분리된 javascript파일을 하나로 합쳐주는 concat도 있어야 하고 CSS를 SCSS로 개발했다면 이것도 CSS로 변환을 해주는 패키지(플러그인)도 있어야 합니다. 그런 패키지(플러그인)들은 프로젝트의 성향에 따라 다양하기 때문에 본인이 원하는 것을 골라서 설치하고 사용해야 합니다. 이러한 패키지(플러그인) 설치는 npm과 bower으로 설치를 하면 됩니다.

npm install grunt-contrib-jshint --save-dev

Grunt에서 사용하는 패키지(플러그인) 리스트는 Grunt사이트의 플러그인 메뉴에서 순위별로 제공을 하고 있습니다. 꼭 Grunt사이트의 플러그인 메뉴에 나온 것 들만 적용이 가능한것은 아니고 NPM사이트에서 제공하고 있는 패키지들도 설치가 가능 합니다.

다음 포스팅에는 Gruntfile.js의 구조와 작성법 그리고 유용한 패키지 등을 소개하도록 하겠습니다.