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

이선협
이선협
Dec 16, 2014 · 7 min read

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이 설치되었으면 다음과 같은 명령을 입력합시다.

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

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

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

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

실행

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

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

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

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

grunt-contrib-concat를 이용한 예제

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

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

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

위와 같이 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 설치를 시작합니다.

사용법

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

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

jQuery 설치

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

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

bower-installer

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

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

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

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


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

Sunhyoup’s Story

선협이가 쓴 글들

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store