프론트 엔드 웹 개발을 위한 빌드 시스템(Grunt, Yeoman, Bower)
Yeoman, Grunt, Bower
개인적으로 Grunt 와 Bower, Yeoman 을 사용하여 간단한 프로젝트를 진행했는데 나름대로의 재미와 만족을 느끼고 있다.
이 세 가지는 요멘 사이트에 가보면 패키지로 사용하기를 권장하고 있으며 그 중 Grunt는 프론트 엔드 웹 개발을 위한 자동 빌드 시스템 관리 툴이다.
순수 퍼블리셔란 직군으로 일하면서 그리고 아직 미진한 실력으로 이 관리 툴을 이용하는데 많은 시간과 노력이 필요했고 아직 이 시점에서도 무지함 투성이지만 개인적으로 이해한 것들을 정리하는 시간을 가져볼까 한다.
이 관리 도구들은 기본적인 구조를 잡는 것부터 시작하여 각종 라이브러의 설치와 의존성 관리, 그리고 각종 작업들( 소스코드 합치기, 압축, 배포)을 편리하게 수행하고 관리할 수가 있다.
■ Grunt
ㆍ 자바스크립트 프로젝트를 위한 task 기반의 CLI 자동 빌드 툴이다. (command line interface build tool)
ㆍtask 란 하나의 작은 작업 단위로써, js, css, html 같은 static 파일들을 하나로 합치고 (concat) 압축을 한 후에 파일 사이즈를
줄이는 (minification) 작업들, test, 그리고 배포(dist) 등등의 각 모듈별 단위의 작업들을 각각 하나의 task라고 이해하면 될 것 같다.
ㆍGrunt 는 이런 빈번한 작업들을 사용자가 미리 정의해 놓은 Gruntfile.js 를 통해 자동으로 빌드해 주는 툴이다.
ㆍGrunt 의 환경은 Node.js로 구성되어져 있기 때문에 Node.js 가 설치가 필요하며 npm 으로 global 로 설치하여 사용한다.
Grunt [번역 비공식 사이트 ] : http://gruntjs-kr.herokuapp.com
■ Bower
ㆍ프론트 엔드 컴포넌트 의존성을 관리해주는 툴이다.
다시 말해서 Grunt 를 설치하기 위해 사용하는 npm(node package manager) 과 비슷한 것이다. sublime text 툴을 써 본 사람이라면
패키지 컨트롤과 유사하다고 보면 된다.
ㆍ 일반적으로 새로운 프로젝트를 시작하거나 진행 중이던 프로젝트에서 부트스트랩 3버전을 사용한다고 했을때 해당 소스를 다운 받고,
해당 프로젝트의 적당한 디렉토리에 복사하여 진행하는 경우가 다반사일 것이다.
이렇게 미리 jQuery 버전이 설치된 상황 에서 부트스트랩 3버전은 jQuery 버전의 차이에 따라 의존성관계 및,호환성 문제가 야기될 수 있다.
ㆍ bower 는 위와 같은 상황에서의 각종 컴포넌트들(respond.js, html5shiv 등등....)의 설치를 간편하게 해 줄 뿐만 아니라,
의존성 부분도 깔끔하게 관리해주기도 한다.
[Bower] : http://bower.io
■ Yeoman
ㆍ 요멘은 아직까지 scaffolding (뼈대, 기본 골격) 기능만 사용해 봤기 때문에 내가 이해한 바로는 웹 어플리케이션의 기본 구조,
디렉토리를 쉽고, 빠르게, 편하게 빌드해주는 도구 정도로 이해하고 있다.
ㆍ Generator 라는 명령어를 이용하여 개발하려는 프로젝트 종류에 따라 webapp, bootstrap, angularjs 등등의 프로젝트 성격에
맞는 기본적인 구조를 만들어 준다.
[Yeoman] : http://yeoman.io
■ Yeoman, Grunt, Bower 사용하기
Yeoman 은 command line 을 통해 사용할 수가 있는데 Mac에서의 터미널이나 리눅스에서 shell, 또는 window 환경이라면 cmd.exe 나 PowerShell 에서 사용 가능하다.
Yeoman 을 설치하기 전에는 다음의 환경이 필요하다.
1. Node.js v0.10.x+
2. npm 버전 2.1.0 이상
3. git
위의 환경이 준비되었다면,
$ node --version && npm --version를 통해 node 버전과 npm 버전을 확인하여 Yeoman을 설치하기 위한 환경이 준비되었는지 확인해 본다.
혹여 npm 버전이 낮다면 다음 아래의 명령어를 npm 버전을 업데이트 해준다.
$ npm install --global npm@latest* yo 명령어
yo 는 Yeoman 프로젝트를 지원하고 generators 처럼 sacffoding 을 이용하면서 웹 어플리케이션의 기본 골격인 디렉터리 구조를 제공한다.
처음에 yo 를 전역적(-g 인 global)으로 설치하고 다른 tools 을 설치한다.
bower와 grunt 를 사용시 다음의 명령어를 사용하고,
$ npm install -g yo bower grunt-clibower와 gulp 를 사용할 시에는 다음의 명령어를 사용한다. (gulp 역시 Grunt 와 같은 자동 빌드시스템 도구이다)
$ npm install -g yo bower gulp$ npm install -g yo bower grunt-cli gulp
다음으로 기본 뼈대를 설치하기 위해 다음의 명령어를 실행한다.
$ npm install -g generator-webapp위의 명령어는 기본적으로 웹 어플리케이션에 HTML5 Boilerplate, jQuery, Modernizr, Bootstrap 을 포함하고 있는 기본 뼈대를 제공한다.
그리고 이 명령어를 통해 generator-webapp 에 포함된 HTML5 Boilerplate, jQuery, Modernizr, Bootstrap 모듈들을 선택적으로 선택하여
설치하여 기본 구조를 생성할 수 있다.
이제 generator가 설치 되었으면 사용자 프로젝트의 디렉토리에 다음의 명령어를 실행한다.
$ mkdir my-yo-project
$ cd my-yo-project위의 명령어는 CLI 가 아니더라도 사용자 편집툴(IDE)의 디렉터리에 프로젝트 폴더를 생성하여 프로젝트가 생성된 폴더로 이동한 후에 다음의 명령어를 실행하여도 무방하다.
$ yo webapp
webapp 명령어를 실행하게 되면 해당 프로젝트 디렉터리에 yo 를 통해 만들어진 각각의 프로젝트 모듈이 당신의 워크플로우에서 사용할 수 있도록 관련된 Grunt task 를 포함하고 있을 것이다.
■ Grunt 명령어
# Preview an app you have generated (with Livereload).
$ grunt serve
# Run the unit tests for an app.
$ grunt test
# Build an optimized, production-ready version of your app.
$ grunt$ grunt build
다음의 명령어로 배포를 하기 위해 빌드한다.
아직 gruntfile.js를 완벽히 이해하지 못해 build 를 하는데 에로사항이 있으나 아래 참고된 gruntfile.js를 참고하자. ㅎㅎ;
Gruntfile.js■ Bower 명령어
bower 는 웹을 위한 패키지 매니저 툴로 사용자의 프로젝트에 플러그인 등의 패키지들을 쉽고 간단하게 설치하도록 도와준다.
bower 는 다음의 명령어를 통해 bower 에 등록된 패키지를 검색, 설치하거나 사용자 프로젝트에 bower를 통해 관리되는 패키지 리스트를 확인하거나
bower 를 통해 설치된 패키지를 업데이트 할 수 있다.
# Search for a dependency in the Bower registry.
$ bower search <dep>
# Install one or more dependencies.
$ bower install <dep>..<depN>
# List out the dependencies you have installed for a project.
$ bower list
# Update a dependency to the latest version available.
$ bower update <dep>
$ bower install jQuery#1.11.2 --save-dev
$ bower install jQuery#~2.1.3 --save-dev
bower 로 jQuery install 하기 : ~(물결)은 최신버전을 뜻한다.
[TIP] Grunt 유의사항
git 서버에 프로젝트를 빌드 시스템을 이용하여 초기셋팅한 후 push 한 뒤 다른 작업자가 pull 하여 프로젝트를 업데이트 받아서 사용할 시에는 다른 작업자는 node.js가 설치된 전제 하에 pull 받은 프로젝트에서 npm install 하여 사용하면 동일한 환경이 구축된다.
■ Grunt VS Gulp
Grunt 가 먼저 나왔고 Gulp 가 후속 주자이며 둘의 차이점은 문법적인 면에서 차이가 있다.
Gulp 는 우선 문법적으로 제이쿼리와 유사하며 쉽고 간결하며 읽기가 편하여 가독성이 좋다는 평이 있다.
반면 Grunt 는 문법적으로 설정/로드/등록 코드가 나뉘어 있어서 다소 복잡한 경향이 있으며 상대적으로 Gulp 보다 처리속도가 느리다는 평이 있다. Grunt 는 선발주자답게 많은 커뮤니티를 보유한 점이 강점이며 둘 중에 무엇을 선택하여 사용할 지는 좋고 나쁘다를 떠나 개개인의 성향의 따라 선택하여 사용하면 될 듯 싶다.