Gulp.js로 빌드 작업 관리하기

() translation by (you can also view the original English article)

소프트웨어 개발 시 작업 자동화 도구가 주는 이점은 명백합니다. 그것들은 반복적이고 자주 일어나는 지루한 작업을 자동화하고 멋진 코드를 작성하는 것과 같은 더 중요한 일에 집중할 수 있도록 도움을 줍니다. 사실은, 이러한 이미지 압축, 코드 축소, 단위 테스트 및 더 많은 작업을 자동화 할 수있는 이런 능력은 엄청난 시간을 절약해줍니다.

지금까지 많은 프론트 엔드 개발자들에게는 Gruntfile.js라는 파일 (일명 Gruntfile)의 내부에 자바 스크립트를 사용하여 작업을 정의 할 수 있는 Grunt라는 자동 빌드 도구를 사용하고 있었습니다. 만약 자바스크립트를 이미 알고 있으면 Grunt 작업을 설정하는 것이 상당히 수월합니다. 그리고 JSHint, Sass와 같은 다른 플러그인들을 위한 서드 파티 플러그인의 영역이 이것을 가장 유연한 도구중의 하나로 만들었습니다.

많은 경우, Grunt를 선택해왔지만 최근에는 새로운 Gulp.js라고 부르는 것이 많은 관심을 받고 있습니다. 그것은 세팅이 편하고, 가독성이 좋고 관리가 용이한 파일 포맷으로 믿을 수 없을 만큼 작업을 쉽게 설정할 수 있습니다.

이 튜토리얼에서는, 어떻게 Gulp를 설치하고 이 위대한 새 빌드 자동화 도구를 시작할 수 있도록 간단한 설정 파일을 작성하는 방법을 설명합니다.

Gulp.js 설치하기

Gulp.js은 Grunt와 같은 노드 기반 작업 실행기이기 때문에 사용하려면 Node.js가 설치되어 있어야 합니다. 특히 운영 체제에 따라 여러 가지 방법으로 수행 할 수 있습니다. 저는 OS X 사용자이기 때문에, Node.js의 여러버전을 관리하라 수 있는 Tim Caswell의 멋진 스크립트인 nvm을 사용하기로 했습니다. 또한 Node.js 사이트에서 직접 바이너리 파일을 다운로드 할 수 있습니다. 만약 Node.js를 완전히 처음 접하는 거라면, Node.js에 관한 최신정보와 가이드를 갖춘 Nettuts + 시리즈의 도움을 받으시는것이 좋습니다.

Gulp.js는 노드 모듈에 의해 패키지로 제공되기 때문에 npm(노드 패키지 관리자)로 쉽게 설치할 수 있습니다. Gulp를 설치하려면 터미널을 열어 다음과 같이 적습니다.

1	npm install -g gulp

이것으로 npm에서 Gulp를 가져와 여러분의 시스템에 전역으로 등록 및 설정되어 커맨드라인을 통해 접근할 수 있게 됩니다.

Gulp.js이 설치되었고 사실상 여러분은 프로젝트를 시작할 준비가 된 것입니다.

Gulp.js를 사용하여 프로젝트를 설정하기

여러분의 프로젝트에 Gulp를 사용하려면 수행해야 할 중요한 몇 가지가 있습니다:

두 개의 의존성 패키지를 설치합니다.
여러분이 사용하고 싶은 플러그인을 설치합니다.
여러분이 실행하려는 작업을 정의하는 Gulp.js 파일을 만듭니다.

이 과정은 Gulp가 이 페키지들과 설정파일들을 사용할 수 있도록 여러분의 프로젝트 폴더 안에서 이루어져야 합니다.

먼저 의존성 패키지들을 설치하도록 하겠습니다.

1	npm install --save-dev gulp gulp-util

이제 설정파일에 정의된 작업들을 수행할 Gulp 플러그인들을 설치해야합니다. 이 플러그인들 역시 Node 패키지 모듈에 있으므로 설치하기 위해 npm을 다시 사용할 것입니다

1	npm install --save-dev gulp-uglify gulp-concat

저의 경우에는 자바스크립트 코드를 최소화/압축하는 플러그인과 모든 자바스크립트 파일들을 하나의 파일로 병합시켜주는 플러그인 두 개를 설치하겠습니다.

제가 Gulp 의존성 패키지들과 플러그인을 설치할때 --save-dev 라는 표식을 사용했다는 것에 주의하십시요. 이렇게 하면 각 항목이 다음과 같이 package.json 파일 내 devDependencies 목록에 만들어집니다.

1	{
2	"devDependencies": {
3	"gulp-util": "~2.2.13",
4	"gulp": "~3.5.0",
5	"gulp-uglify": "~0.2.0",
6	"gulp-concat": "~2.1.7"
7	}
8	}

이것은 프로젝트에 대한 모든 의존성 패키지를 나중에 npm을 사용하여 쉽게 설치할 수 있도록 해줍니다. 만약 여러분의 프로젝트안에 package.json파일이 없다면 커맨드 라인에 npm init 라고 적거나 중괄호를 포함한 내용을 넣고 "package.json"이라고 저장하면 됩니다. 그리고 npm명령을 다시 실행하면 위에 나열된 의존성이 업데이트됩니다. 중괄호를 넣는 것을 잊지 마십시요. 그렇지 않으면 --save-dev 표시를 사용하려고 할때 npm은 'it's not a valid JSON file'이라고 에러를 발생시킬 것입니다.

지금 제가 이 튜토리얼에 2개의 플러그인을 사용하는 시점에 Gulp는 200개가 넘는 플러그인을 제공하고 있네요.

LiveReload (gulp-livereload)
JSHint (gulp-jshint)
Sass (gulp-sass)
CoffeeScript file compilation (gulp-coffee)

등 더 많은 플러그인들이 있습니다.

Gulpfile.js 파일

Grunt와 유사하게 Gulp는 gulpfile.js라는 설정파일을 가지고 있습니다. 이것은 여러분이 실행할 작업들에 요구되는 모든 플러그인을 정의합니다. 여러분의 프로젝트의 루트 폴더에 이 파일을 생성해야합니다.

직관적이고 간결한 이 구문은 매우 읽기 쉽고 이해하기 쉽게 만듭니다.

1	var gulp = require('gulp'),
2	gutil = require('gulp-util'),
3	uglify = require('gulp-uglify'),
4	concat = require('gulp-concat');

이것은 단순히 정의된 작업을 완수하기위해 필요한 플러그인들을 Gulp에게 말해주는 역할을 합니다.

다음으로 우리는 Gulp가 실행할 작업을 정의해야합니다. 제 경우에는 아래와 같이 두 가지가 있습니다.

이미지들을 압축하기
자바스크립트 파일들을 최소화하기

정의 하려는 작업은 모든 자바스크립트 호출을 대상으로 할 것입니다. 우리가 원하는 작업을 정의하기 위해 task() 메소드를 사용합니다.

gulp.task('js', function () {
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

위의 코드를 보면, 필요에 의해 지정된 플러그인들에서 호출하는 메소드들이 함께 섞여있습니다. 첫 번째 메소드인 task()는 작업 이름(이 예제에서는 'js')과 실제 작업내용이 작성된 익명함수를 파라미터로 받습니다. 다음코드를 보면:

1	gulp.src('./js/*.js')

src() 메서드를 사용 하여 압축하고 변환시킬 자바스크립트 파일들을 찾을 수 있도록 파일 구조를 플러그인에 전달하여 플러그인이 작업을 처리할 수 있도록 합니다. 이것은 Node.js의 Streams API의 일부입니다. 그리고 Gulp가 간결함을 가질 수 있도록 하는 근거입니다.

1	.pipe(uglify())

pipe() 메소드는 src() 메소드로부터 온 소스 스트림을 참조된 특정 플러그인에 전달합니다. 이 예제에서는 uglify 플러그인이 소스 스트림을 전달 받을 것입니다.

1	.pipe(concat('all.js'))

uglify와 같이 concat 플러그인은 pipe() 메소드를 통해 소스 스트림을 전달받고 모든 자바스크립트 파일을 연결하여 "all.js"라는 파일로 만듭니다.

1	.pipe(gulp.dest('./js'));

결국, Gulp의 dest() 메소드를 사용하여 all.js 파일이 명시한 폴더에 생성됩니다. 이런 과정은 언제나 매우 직관적이고 가독성이 좋습니다.

마지막으로 이 "js"라는 작업을 실행시키기위해 기본 Gulp 작업으로 등록시켜야 합니다.

1	gulp.task('default', function(){
2	gulp.run('js');
3	});

커맨드라인으로 돌아가서 'gulp'라고 치면 Gulp는 gulpfile.js파일을 찾아 모든 포함된 플러그인과 의존성 패키지들을 로드하며, 기본 작업을 시작하고 우리의 'js'라는 작업을 실행시킵니다. 여러분은 결과적으로 압축되고 연결된 자바스크립트 파일을 보실 수 있습니다.

다음 단계로 넘어가면, Gulp는 watch()라는 메소드를 제공하는데 이는 자동으로 특정 리소스의 변화를 감지하는 메소드 입니다. 커맨드 라인에 'gulp'라고 수동으로 끊임없이 입력 해야하는 작업을 자동화해줍니다.

1	gulp.watch('./js/*', function () {
2	gulp.run('js');
3	});

이것이 실행되면 Gulp는지정된 폴더의 파일들의 변화를 감시하고 변화가 일어나면 자바스크립트 파일을 압축하고 병합하도록 하는 'js'라는 작업을 다시 실행시킵니다. 얼마나 멋진가요!

Gulp.js 이동하기

제가 Gulp에 대해서 처음 들었을때, 처음 했던 반응은 "오 또 비슷한 도구가 나왔군!" 였습니다. 그러나 제 생각은 틀렸습니다. Gulp.js는 정말이지 여러분의 작업을 쉽게 세팅해주는 마력의 문법과 API를 가지고 있습니다. Gulp는 Grunt가 가진것 만큼 폭넓은 플러그인을 가지고 있지 않지만 Gulp의 플러그인 저장소가 성장할 것으로 보입니다.[2014년 2월의 시점에서-역자 주] 특히 요즘은 많은 개발자들이 관심을 가지고 있습니다.

저는 이미 많은 개발자들이 Gulp로 옮겨가고 있다고 얘기한 바 있습니다. 지금 Gulp.js를 해볼만한 아주 적절한 시기입니다.