Grunt와 Bower를 이용한 웹 프론트엔드 제작하기

Published in

Sunhyoup’s Story

7 min readDec 16, 2014

Grunt를 이용하여 static file의 압축, 문법 검사 등을 자동화 하고 Bower를 이용하여 웹 프론트엔드에 필요한 라이브러리를 간편하게 관리하는 방법을 알아봅시다.

예전에 좋은 프로그래머가 되기 위해서는 자동화 할 수 있는 부분은 모두 자동화하라는 말을 들은 적이 있습니다. 그 말을 뒷받침 하듯이 개발자를 돕기위한 자동화 툴이 상당히 많습니다. 물론 웹 프론트엔드 개발에도 예외는 아닙니다. 웹 프론트엔드 개발을 위한 자동화 툴 중 Bower와 Grunt에 대해서 소개하겠습니다.

Grunt

예전에 ‘보다 좋은 자바스크립트 코드를 작성하기 위한 7단계’라는 글을 번역한 적이 있습니다. 이 글에서 소개하는 7단계의 대부분을 Grunt를 이용하여 자동화할 수 있습니다.

먼저 Grunt란 무엇일까요?
Grunt는 ‘Grunt is a task-based command line build tool for JavaScript projects.’ 라고 정의할 수 있습니다. 여기서 중요한 것은 task-based 입니다. Grunt에 적당한 task를 작성하면 Grunt가 task에 따라서 프로젝트를 자동으로 빌드해준다는 뜻입니다.

설치

설치는 npm을 통해서 설치할 수 있습니다. npm이란 Node Packaged Modules의 약자로 node.js에서 사용하는 모듈을 npm을 이용하여 설치할 수 있습니다. node.js를 설치하면 npm도 같이 설치됩니다. node.js설치는 공식 홈페이지에서 할 수 있습니다.

npm이 설치되었으면 다음과 같은 명령을 입력합시다.

$ npm install -g grunt-cli

위 명령어 에서 ‘-g’는 글로벌을 나타냅니다. grunt-cli를 콘솔 어디서나 사용 편하게 가능합니다.

grunt-cli를 설치했으면 grunt를 설치해봅시다.

$ npm init
…
$ npm install grunt --save

npm init을 통해 package.json 파일을 생성할 수 있습니다. 이 파일은 npm 의존성 관리 및 프로젝트 내용을 기록합니다.
grunt 설치 중 —save옵션을 적어주면 package.json에 grunt 의존성을 기록합니다.

이제 grunt를 사용할 수 있습니다.

실행

grunt를 사용하기 위해서는 Gruntfile.js를 작성해야 합니다. 이 파일에서 task를 관리할 수 있습니다

module.exports = function(grunt) {
  grunt.initConfig({
  });  grunt.registerTask('dev', []);
}

위 처럼 작성한 뒤 아래의 커맨드로 실행시켜 봅시다.

$ grunt dev

Done, without errors. 라는 문자열이 보인다면 성공입니다.

이제 본격적으로 grunt를 이용한 자동화를 진행해봅시다.

grunt-contrib-concat를 이용한 예제

grunt-contrib-concat은 여러 파일을 하나로 합쳐주는 모듈입니다.
다음과 같이 설치하여 사용할 수 있습니다.

$ npm install grunt-contrib-concat --save

‘js/src’ 폴더 아래 모든 js가 있다고 가정하고 Gruntfile.js을 수정하여 모든 파일을 합쳐봅시다.

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-concat');  grunt.initConfig({
    concat: {
      dev: {
        src: ['js/src/*.js'],
        dest: 'js/application.js'
      }
    }
  });  grunt.registerTask('dev', ['concat:dev']);
}

먼저 loadNpmTasks를 통해 모듈을 불러온 후 initConfig에 concat설정을 작성합니다. 그후 registerTask에 사용할 task를 적어주면 사용이 가능합니다.

$ grunt dev
$ Running "concat:dev" (concat) task
$ File js/application.js created.$ Done, without errors.

위와 같이 task실행이 완료되면 모든 js파일이 합쳐진 application.js가 생성됩니다. 만약 합쳐져야하는 순서를 정해야 한다면 위 initConfig 설정 중 src에서 합쳐져야하는 순서대로 파일 명을 적어줘야합니다.

그 외

concat말고도 grunt를 사용하여 자동화 할 수 있는 모듈이 많습니다. jshint를 이용하여 문법 및 잠재적인 문제를 검사할 수 있고 uglify와 mincss를 사용하여 자바스크립트, CSS 파일을 압축할 수 있습니다.

grunt 모듈의 종류는 grunt-contrib에서 찾아 볼 수 있습니다. 프로젝트에 필요한 모듈을 설치하여 사용할 수 있습니다. 사용방법은 각 git 저장소에 자세히 나와있습니다.

Bower

bower는 웹 프론트엔드 제작에 필요한 라이브러리를 관리할 수 있는 npm, maven, gem같은 패키지 매니저입니다.

웹 프론트엔드에서 자주 사용하는 jQuery, Bootstrap과 같은 라이브러리를 간편하게 관리, 설치해줄 수 있습니다.

설치

설치는 grunt와 동일하게 npm을 사용하여 설치할 수 있습니다. 먼저 node.js를 설치한 후 다음 명령어를 입력하면 bower 설치를 시작합니다.

$ npm init
…
$ npm install bower --save

사용법

bower를 사용하기 위해서는 우선 bower.json파일을 생성해야 합니다. bower.json 생성은 다음 명령어로 생성 가능합니다.

$ bower init

bower init을 할 때 나오는 각종 설정을 프로젝트에 맞춰서 작성하시면 bower.json 생성이 완료됩니다.

jQuery 설치

bower install 명령어를 사용하여 jQuery를 설치할 수 있습니다.

$ bower install jquery --save

설치가 완료되면 bower_components 폴더 아래에 jquery 폴더가 생성됩니다. 그리고 —save 옵션을 붙이면 bower.json에 의존성을 기록할 수 있습니다.

bower-installer

bower를 사용하여 설치된 라이브러리는 bower_components 폴더 아래에 생성되므로 사용이 불편합니다. 이러한 문제를 bower-installer를 사용하여 해결 할 수 있습니다.

$ npm install -g bower-installer

global로 bower-installer를 설치 후 bower.json에 다음 설정을 추가합니다.

"install": {
  "path": {
    "css": "static/css",
    "js": "static/js"
  }
}

위 설정은 bower로 설치한 라이브러리 중 css파일은 ‘static/css’로 js파일은 ‘static/js’ 폴더로 옮기는 설정입니다. 위 설정을 추가 후 다음 명령을 실행 해봅시다.

$ bower-installer
$ Setting up install paths...Finished
$ Running bower install...Finished
$ Installing:
$ jquery : /.../test/static/js/jquery/jquery.js
$ Success

성공적으로 jquery파일이 ‘static/js’ 폴더로 옮겨졌습니다. 외에도 bower-installer git 저장소에 다양한 설정 방법이 적혀있습니다.

밤에 쓰려니 졸려서 길게 쓰지를 못하겠네요 ㅠㅠ
내용에 틀린 점이나 부족한 점이 있다면 지적 부탁드립니다. ^^