[front] Grunt와 Bower사용법 - 퍼옴
Grunt와 Bower를 이용한 웹 프론트엔드 제작하기 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 ...