Grunt 설치 및 js파일 통합

프로젝트 중간발표가 있어 자바스크립트 part에 지원을 하게 되었다. 지원 내용은 Grunt로 자바스크립트 파일 통합!

덕분에 Grunt라는 걸 처음 접해보고 대충은 어떻게 사용하지 알게 되었다. 

웹 프로젝트를 진행하면 사용되는 자바스크립 모듈을 여러 파일로 따로 따로 구분하여 저장하는데 프로젝트가 종료되고 배포할 때쯤 이 분리된 자바스크립을 통합하여 하나의 파일에 통합하여 배포하곤 한다. (실제로 난 자바스크립 개발자가 아니어서 .... 다들 그렇게 한다고 말한다) 

그래서 자바스크립 파일들을 통합해주는 작업을 수행해야하는데 한두개 정보의 파일만이 존재한다면 별문제 없겠지만 수십개의 파일로 구성된 프로젝트라면 통합작업이 여간 번거러운 작업이 아닐 것이다.

그래서 이 Grunt를 사용하여 통합작업을 보다 손쉽게 처리하려고 한다. 

1. NodeJS 설치

Grunt가 NodeJS기반이라 NodeJS를 설치해야한다. 

node-v0.10.29-x64.msi

node-v0.10.32-x86.msi

2. grunt-cli, grunt-init 설치

노드JS를 설치했다면 커맨드 창을열어서 다음과 같이 입력하고 "cli"와 "init" 를 진행한다. (이유?는 묻지 말기 바란다.) 커맨트 창에서 grunt 명령을 사용할 수 있게 하기 위해서 거쳐야하는 절차정도로 생각하길 바란다.

$ npm install –g grunt-cli  $ npm install –g grunt-init

3. 프로젝트 폴더 만들기

임의의 프로젝트 폴더("test") 를 생성하고 자바스크립 파일들이 담긴 폴더를("hop")을 프로젝트 폴더에 이동 시킨다. hop라는 폴더에 통합하려는 자바스크립 파일들이 담겨 있다고 가장하자~

4. 프로젝트 폴더 초기화

생성할 폴더를 grunt프로젝트 폴더로 초기화 해주는 작업이다.

$ npm install grunt

결과로 프로젝트 폴더에 "node_modules"폴더가 생성된다.

5. Grunt 플러그인 설치

Grunt는 이클립스 처럼 플러그인을 설치하여 기능을 확장할 수 있다. 여기에서는 "grunt-contrib"와 "grunt-minuse"를 설치한다.

$ npm install grunt-contrib --save-dev

$ npm install grunt-usemin --save-dev

6. Gruntfile.js 파일 작성 및 저장

Grunt의 동작은 Gruntfile.js파일에 설정되어 있는 내용대로 실행되는데 이곳에서는 설정된 내용은 자바스크립트파일이 인쿨루드 되는 html 파일을 지정해주는 정도의 내용을 담고 있다고 생각하면 되겠다 물론 더 자세한 내용들을 담고 있을 수 있는데 본인도 당장 어떻게 쓸줄만 알고 있기 때문에 자세한 내용은 각자 구글을 참조하여 알아보기로 하자 (귀차니즘 때문에 설명을 안하는 것이 아니다~~)

module.exports = function (grunt) {

// Project configuration.

grunt.initConfig({
  'useminPrepare': {
    html: 'hop/Hop.html' // 대상 html
  },

  'usemin': {
    html: ['hop/*.html'] // hop 폴더의 모든 html파일을 대상으로 함
  }

});

grunt.loadNpmTasks('grunt-contrib');   // 설정한 Task를 로드 한다.               
grunt.loadNpmTasks('grunt-usemin');
grunt.registerTask('default', ['useminPrepare', 'concat', 'uglify', 'usemin']);  // Task를 등록한다. 작업을 다하고 cmd에 grunt default라고 입력하면 여기 "default"로 등록된 Task들이 실행된다.

}; 

프로젝트 폴더에 위처럼 "Gruntfile.js"를 저장하면 되는 것이다.

7. Html파일에서 통합대상 자바스크립트 지정

통합 대상 자바스크립트 지정은 약속된 주석문으로 설정하는데 통합하고 싶은 파일의 호출문을 약속된 주석문으로 감싸는 형태로 설정한다.

통합 대상 파일 지정 시작은 아래의 주석으로 지정하고

<!-- build:js "통합 자바스크립트 파일 경로" -->

지정 종료는 아래의 주석으로 한다.

<!-- endbuild -->

 // <-- 대상파일 지정 시작 
// ( 통합된 파일명 :  optimized.js )




 // <-- 대상파일 지정 종료

8. Grunt 실행

이제 Grunt를 실행하면 파일이 통합되고 Html파일에서 설정된 구역은 통합파일 호출문으로 변경된다.

$ Grunt default

결과로 test폴더에 dist폴더가 생성되고 그안에 통합된 파일("optimized.js")이 생성된다.

마지막으로 통합된 파일을 html 파일이 있는 폴더로 이동 시켜주면 자바스크립트 통합일이 끝나게 된다.

마지막으로 통합된 파일의 모습은 아래와 같다.~~