Gulp #1(걸프 설치 및 개요)

자동화 빌드 시스템 : Start Gulp

현재 생산성을 높이고 개발자들의 수고를 덜어줄 수 있는 유용한 도구로는 Grunt, Gulp, Brunch, Bower 등이 있습니다.

이러한 도구는 예를 들어 사용자들이 반복적으로 수행하게 되는 일인, javaScript 와 CSS를 온라인 툴이나 기타 툴을 사용하여 파일의 용량을 줄이기 위해 압축, 병합을 시도한 후 수정작업이 발생할 경우 또 다시 일련의 반복작업을 하게 되는 것이 다반사인데 이러한 반복적인 할 일들을 자동으로 대신 처리해주는 것이 자동화 빌드 시스템입니다.

이 글에서는 다른 자동화 빌드 시스템보다 쉬운 문법을 제공하고 있는 gulp 에 대해 알아보도록 합니다.

gulp 는  Grunt 보다 후발주자임에도 쉬운 문법으로 인해 접근성이 뛰어나 꾸준한 인기로 Grunt를 추월했으며 그 커뮤니티 또한 폭발적으로 증가하고 있는 추세입니다.

Gulp 는 steaming build system 을 표방하고 있습니다. 

즉, Node의 스트림 기능으로 인해 이득을 얻는 빌드 시스템이란 의미입니다.

Node.js는 이벤트 루프에 기반한 비동기 I/O 를 제공하고 있습니다. 

파일 시스템에서 읽기/쓰기 작업을 할 때나 HTTP 요청을 전달할 때 Node.js는 노드는 응답을 기다리는 동안 다른 이벤트들을 처리할 수 있는데, 이를 non-blocking I/O 라고 부릅니다. 

Stream은 이보다는 더 확장된 개념으로 메모리 버퍼와 대역폭을 절약할 수 있는 이벤트 기반의 I/O 인터페이스를 제공하는 것을 말합니다.

예를 들어, 스트림은 대용량 파일의 파일 같은 경우, 파일 전체를 모두 로드하기 전에 메모리 버퍼를 절약하기 위해 무엇인가 다른 일을 빠르게 처리할 수 있습니다.

그래서 우리는 파일이 전체로 로드될 때까지 기다릴 필요없이 파일을 일부를 쓰거나 어떤 처리를 할 수 있게 되는 것입니다.

Start Gulp

빌드 시스템은 프로젝트를 development, production, testing 등의 다른 빌드들로 빌드해 줄 수 있습니다. 

Gulp 는 이런 작업을 수행해주고 또 플러그인들을 통해 매우 확장성있게 작업할 수 있도록 도와주는 유용한 도구이며, 현재 약 2000여개의 플로그인이 존재합니다.

gulp 로 무엇을 할 수 있는가?!

• 웹 서버를 동작.
• Sass 를 CSS 로 컴파일
• 편집기 툴에서 파일을 저장할 때마다 웹브라우저를 reload 하여 새로고침없이 브라우저를 갱신
• 배포를 위한 CSS, JS, fonts, and images 등의 리소스를 최적화

일반적으로 위와 같은 일들을 수행할 수 있습니다.

만약 프로젝트를 운영(production)으로 빌드한다면, 아마도 JavaScript를 minify(압축)하고 또 CSS의 전처리기인 Sass 파일을 컴파일하고 또 코드에 오류는 없는지 체크하고 싶을 것입니다. 

이러한 작업을 직접 수동으로 명령하지 말고, Gulp task를 작성하여 실행할 수 있습니다.

앞서 말씀드렸다시피 gulp 는 node.js 의 스트림 기능을 기반으로 하고 있기 때문에 node.js 가 설치되어 있어야 합니다.

먼저 자신의 운영체제에 적합한 node.js 설치를 하도록 합니다.

nodejs 사이트는 운영체제를 탐색하여 node.js 설치 프로그램을 다운받을 수 있도록 하고 있기 때문에 해당 OS별 실행프로그램을 선택할 필요가 없을 것입니다.

설치 과정은 여기서 다루지 않습니다.

Node.js 는 명칭에서도 표현하고 있듯이 자바스크립트를 개발 언어로 사용하는 소프트웨어 플랫포밉니다.

구글 크롬 웹브라우저와 안드로이드 웹브라우저에 탑재된 V8 엔진 위에서 동작하고, 프론트측이 아닌 서버측에서 실행되는 서버사이드 언어(Server Side Language)입니다.

그리고 설치 과정 중에 "npm package manage" 라는 항목이 있을 것입니다.

이를 NPM(node package manager)라고 하는데 Node.js 기반의 패키지 모듈들을 관리하는 도구입니다.

Node.js 설치를 끝내셨다면 운영체제를 다시 시작해야 Node.js 가 정상적으로 작동합니다.

Node.js를 설치하고 운영체제를 다시 시작했다면 명령어 기반에서 node --version 을 실행하면 설치된 Node.js 버전을 화면에 출력할 것입니다.

CLI

$ node --version

CMD 는 Window 운영체제에서 기본으로 제공하는 명령어 기반 인터페이스(CLI) 도구입니다.

CMD 는 명령 프롬프트(Command Prompt)로, 실행 파일인 cmd.exe를 의미합니다.

명령어 인터페이스 도구로는 윈도우 기반의 cmd, powershell 등이 있으며, Mac 운영체제에서 사용되는 터미널(terminal) 등이 있습니다.

명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻하고, 이 같은 인터페이스를 제공하는 프로그램을 명령 줄 해석기(command line interpreter) 또는 셸(shell)이라고 부릅니다. 

이를테면, 유닉스 셸(sh, ksh, csh, tcsh, bash 등)과 CP/M, 도스의 command.com("명령 프롬프트") 등이 있습니다.

참고로 CLI 의 명령어는 운영체제마다 다르므로 주의하시기 바랍니다.

위의 명령어를 명령 줄 인테페이스에서 명령어를 입력하여 확인하도록 합니다.

그리고 $ 기호는 명령 줄 인터페이스에서 사용하라는 상징 기호의 의미로 $ 기호는 타이핑하지 않습니다.

--version 은 -v로 줄여서 사용할 수 있습니다. 

CLI

$ node -v

Installing Gulp

Node.js 설치를 마쳤다면 이제 Node.js 기반의 모듈인 Gulp 패키지를 설치할 수 있습니다.

먼저 gulp 패키지 모듈을 설치하려면 NPM을 이용하여 손쉽게 설치할 수 있는데 앞서 Node.js를 설치하는 과정 중에 npm 의 설치항목을 확인하셨을 것입니다.

npm 설치가 올바로 되었는지 버전을 아래와 같이 확인해 보도록 합니다.

Command Line Interface

$ npm -v

필자의 npm 버전은 위와 같이 나타납니다.

npm 관리도구를 이용하여 다음과 같이 gulp 패키지를 다운받습니다.

Command Line Interface

$ npm install gulp -g

위 명령어 중에 -g 플래그는 global의 약어로 시스템에 아무 곳에서나 gulp 명령어을 사용,실행할 수 있도록 로컬 컴퓨터에 전역적(global) 설치하라고 npm에게 알려주는 명령어입니다.

gulp 를 전역적으로 설치했다면 gulp -v 명령어로 Gulp.js 버전을 확인하실 수 있습니다.

좀더 자세한 gulp 설치 방법은 Gulp 패키지를 방문하여 GitHub 페이지에 Getting Started 링크를 클릭하여 참고바랍니다.

Gulp.js(gulp 모듈 패키지)를 사용자 프로젝트 디렉터리에 로컬 설치하기

프로젝트를 시작하기에 앞서 사용자 프로젝트 디텍터리를 하나 생성하도록 합니다.

만약 D 드라이브의 workspace 란 디렉터리를 생성했다면 CLI 에서 해당 디렉터리로 이동한 후 gulp 명령어를 실행해 보도록 합니다.

Command Line Interface

$ cd E:\
$ mkdir workspace
$ cd workspace

cd 명령어는 change directory 의 약어로 디렉터리를 변경하는 것이고 mkdir 은 make directory 의 약어로 디렉터리를 생성하는 명령어입니다.

필자와 같이 CLI 명령어를 사용하여 디렉터리 구성을 해도 무방하며 윈도우 탐색기에서 폴더를 생성해도 상관없습니다.

만약 필자와 같이 구성했다면 해당 E 드라브에 workspace 란 폴더가 생성되어 있을 것입니다.

윈도우 탐색기에서 폴더를 구성했다면 cd 명령어 뒤에 윈도우 탐색기에서 생성한 폴더를 CLI 기반에 드래그하여 해당 디렉터리 내로 이동할 수도 있습니다.

해당 사용자 프로젝트 디렉터리로 이동했다면 다음과 같이 이동된 디렉터리로 표시될 것입니다.

필자는 PowerShell 이라는 CLI를 사용하고 있기 때문에 PS가 앞에 나타납니다.

해당 디렉터리로 이동한 후 다음과 같이 gulp 명령어를 실행해 봅니다.

Command Line Interface

$ gulp

아마 위와 같이 실행했다면 local gulp not found 메시지가 출력되면서 현재 디렉터리에서 로컬 Gulp를 찾을 수 없다는 메시지가 뜰 것입니다.

이는 현재 디렉터리에 Gulp 패키지가 설치되어 있어야만 Gulp 를 사용할 수 있다는 것을 의미합니다.

그렇다면 좀 전에 실행했던 gulp -g 를 이용해 왜 전역 설치를 한 것일까요?

대개 전역적으로 Gulp 를 설치했다 하더라도 개별적인 프로젝트에서 Gulp 를 사용하려면 로컬 설치가 필요합니다.

로컬 디렉터리에서 다음과 같이 실행합니다.

Command Line Interface

$ npm i gulp --save-dev

i 는 설치명령어인 install 의 약어로써 줄여서 사용할 수 있습니다.

그리고 --save-dev 플래그를 추가하면 디펜던시들을 devDependency로써만 설치하게 되는데, 이 옵션을 주는 이유는 Gulp와 관련 디펜던시들은 애플리케이션 개발 과정까지만 필요하기 때문입니다. 

나중에 Gulp 의 플러그인들을 설치할 때에도 같은 --save-dev 옵션을 주어야 합니다.

디펜던시(의존성)란? 

제이쿼리를 사용하는 사용자가 있다면 먼저 제이쿼리를 불러온 다음에 제이쿼리 문법을 사용할 것입니다.

이렇듯 내가 사용하는 스크립트가 제이쿼리에 의존하고 있다면 제이쿼리에 의존성을 가지고 있다고 할 수 있습니다.

그래서 모듈을 설치(npm install)할 때 --save-dev 명령어를 입력하면 개발할 때만 의존(devDependcies)하는 모듈로 기술됩니다.

보통 개발 당시에만 gulp의 플러그인 패키지가 필요하고 배포(Production)시에는 gulp 패키지 모듈은 서비스를 받는 사용자에게 필요없기 때문에 개발할 때만 의존하도록 --save-dev 플래그를 사용합니다.

만약에 $ npm install gulp --save와 같이 -dev를 생략하고 명령어를 입력하면 배포할 때도 의존하는 모듈로 기술됩니다.

--save-dev 는 -D 로 줄여서, --sasv 는 -S로 줄여서 사용할 수 있습니다.

사용자 프로젝트 디렉터리에 Gulp 를 로컬설치가 끝나면 Node 모듈을 관리하는 [node_modules] 디렉터리와 그 내부에는 Gulp 모듈 패키지 디렉터리가 생성됩니다.

다음으로 아래와 같이 명령어를 실행한 후 질문에 답할 수 있도록 합니다.

Command Line Interface

$ npm init

NPM 명령어인 npm init 는 초기화(init) 명령어로 사용자에게 질문하여 대답을 입력받는 형식으로 package.json 파일을 생성하게 됩니다.

package.json 은 배포(Publish)할 때 반드시 필요한 파일입니다.

package.json 파일을 직접 생성할 수도 있겠지만, 처음 사용할 때는 초기화 명령어로 생성하는 것이 일반적이고 편리합니다.

이름(name)을 시작으로 version, description(설명) 등의 여러 정보를 사용자에게 물어보는데, 값을 입력할 때는 제외하고는 Enter를 눌러 넘어값니다.

마지막에 Is this ok? (yes) 라는 질문이 나타나는데, Enter 를 누르면 package.json 파일이 생성될 것입니다.

package.json 파일을 열면, 질문에 답변한 내용이 문서에 포함되어 있으며, 문서 내용 중 필요없는 부분은 삭제하여 정리할 수 있습니다.

필자는 아래와 같은 package.json 파일이 생성되어 있습니다.

npm init 을 먼저 실행한 후 npm install gulp --save-dev 를 수행해도 상관없습니다.

이제 사용자 프로젝트 디렉터리에 Gulp 설치를 마쳤습니다.

하지만 Gulp를 프로젝트 디렉터리에 설치했으나 수행할 일(task)을 정의하지 않았기에 아직은 작동하지 않습니다.

Gulp 가 수행할 일의 정의는 gulpfile.js 문서에 작성해야 합니다.

gulpfile.js 파일을 생성하여 간단한 일을 정의하고 실행해 보겠습니다.

프로젝트 디렉터리에 gulpfile.js 파일을 생성한 후에 Gulp 모듈을 호출하고 Gulp 가 수행할 일을 gulp.task() 메소드를 사용하여 정의하도록 합니다.

gulpfile.js

// Modules 호출
var gulp = require('gulp'); // Gulp 모듈 호출

// Gulp.task() 를 사용해 기본(Default) 테스크를 정의
gulp.task('default', function () {
    // 콘솔 객체에 메시지를 기록(log)해 봅니다.
    console.log('gulp default 일이 수행되었습니다!!!');
});

Command Line Interface

$ gulp default

gulpfile.js 를 작성한 후 위의 명령어를 입력하면 다음과 같이 문자열이 출력,수행되는 것을 확인하실 수 있습니다.

현재 gulpfile.js 에서 gulp.task() 메소드는 두 개의 전달 인자를 받는데 하나는 수행할 "업무 이름"이고 다른 하나는 처리해야할 "업무 프로세스"입니다.

여기서는 업무이름을 default 로 정의하고, 처리해야할 일로 콘솔 메시지를 출력하는 코드가 입력되어 있습니다. 

지금까지 Gujp 설치방법에 대해 알아보았고 다음 포스팅에서 gulp 의 본격적인 사용법에 대해 알아보도록 하겠습니다.

Related Info

1. Gulp.js 한국어 참조 문서
2. Gulp 사용법 #2
3. Gulp 사용법 #3

Jaehee's WebClub