Gulp로 JavaScript 반복 작업 자동화 빌드 도구 사용해보기

 

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. -Gulp 공식 홈페이지 중

 

JavaScript 상에서 이루어지는 반복 작업들을 자동적으로 수행해주는 빌드 도구를 사용해보자.

 

현재 가장 널리 쓰이고 있는 빌드 도구는 Grunt와 Gulp가 있다.

 

본 글에서는 Gulp를 사용해 자동화 빌드 도구가 주는 이점을 확인해보자.

 

 

 

 

 

 

Gulp 설치하기

 

우선 본 글은 Node를 설치했다고 가정하고 쓴 글이다. 노드를 설치하지 않았다면 https://nodejs.org/en/ 에서 Noide를 다운받도록 하자

Node.js

 

노드를 설치했다면 다음과 같은 명령어로 Gulp를 전역에 설치해주자.

 

$ npm install -g gulp

$ npm install --save-dev gulp

 

 

 

 

 

 

Gulp 실행해보기

 

설치한 gulp가 잘 실행되는지 알아보기 위해 우선 gulp파일을 만들어야 한다.

다음과 같이 gulpfile.js를 만들어보자. gulpfile는 gulp의 각종 설정들을 포함한다.

 

const gulp = require('gulp'); 
 
 
gulp.task('default', function() {
 
});

 

첫 줄은 gulp나 각종 플러그인들을 사용하기 위해 require를 사용해 gulp 및 사용할 플러그인들을 불러온다.

사용할 플러그인들은 우선 npm을 통해 --save-dev 플래그를 붙여 설치해야 한다..

 

다음 줄은 gulp의 task를 선언함으로써 실제 task를 실행한다. 본 글에서 사용하는 파라메터는 task의 name('default')과 func(function()) 두 개이다. name은 task의 이름, func는 실제 수행할 task들을 정의하게 된다.

 

$gulp 명령어를 통해 위에서 작성한 명령을 실행해보자.

[22:52:43] Using gulpfile ~/Desktop/Learning-Javascript/gulpfile.js
[22:52:43] Starting 'default'...
[22:52:43] The following tasks did not complete: default
[22:52:43] Did you forget to signal async completion?

 

본인은 위와 같은 Did you forget to signal async completion? 오류가 떴다.

 

해결법은 Stackoverflow에서 찾을 수 있었다. 

(https://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async)

 

본 글에서는 간단하게 function 앞에 async를 붙임으로써 해결했다.

const gulp = require('gulp'); 
 
 
gulp.task('default',async function() {
 
});
 

 

 

 

 

 

Gulp로 Babel을 이용한 트랜스컴파일 자동화해보기

 

Gulp가 주는 자동화의 이점을 확인하기 위해 JavaScript의 ES6 코드를 ES5로 바꾸어보자.

 

현재 널리 쓰이는 트랜스컴파일러는 바벨과 트레이서가 있으나, 본 글에서는 바벨을 사용해 ES6 코드를 트랜스컴파일 해보겠다.

 

그 전에 ES6 코드와 ES5 코드가 담길 디렉토리를 만들자.

 

프로젝트 루트에 기존의 ES6 코드가 담길 es6 폴더, gulp에 의해 빌드될 코드가 담길 dist 폴더를 만들자.

 

똑같이 했다면 프로젝트 루트는 다음과 같은 형태를 갖는다.

 

node_modules/
 
es6/
 
dist/
 
gulpfile.js
 
package.json

$ npm install --save-dev babel-preset-es2015

그리고 프로젝트 루트에 다음과 같은 내용을 가진 .babelrc 파일을 만들자.

{ "presets": [ "@babel/preset-env" ] }

이 파일을 통해 바벨을 사용할 때 ES6을 사용한다는 것을 인식할 수 있다.

 

 

 

이제 본격적으로 트랜스컴파일을 실행해보자. 우선 다음과 같은 명령어를 통해 gulp-babel 패키지를 설치하자.

$ npm install --save-dev gulp-babel

const gulp = require('gulp');
const babel  = require('gulp-babel');
 
 
gulp.task('default', async function() { 
 
gulp.src("es6/**/*.js")
  .pipe(babel())
  .pipe(gulp.dest("dist"));
 
});

두 번째 줄을 통해 babel을 require해 사용하도록 했다.

 

일곱 번째 줄의 gulp.src(file)은 파일이나 파일들의 경로가 포함된 string 이다. 위에서는 "es6/**/*.js"로 되어 있는데, 이런 와일드카드 형태로 지정 시 es6 폴더의 .js 파일뿐만 아니라 es6폴더 내부의 .js 파일도 지정하게 된다.

 

다음 줄의 pipe를 통해 소스 파일을 바벨에 파이프로 연결한다. 이 행위로 인해 ES6는 ES5로 트랜스컴파일된다.

 

마지막으로 gulp.dest또한 pipe에 연결함으로써 dist 폴더로 결과물을 보낸다.

 

gulpfile.js를 수정했다면 다시 gulp를 실행해보자. 정상적으로 실행되었다면 

 

[03:00:58] Starting 'default'...
[03:00:58] Finished 'default' after 86 ms

위와 같이 gulp의 작업이 완료되었다는 메세지를 받는다. dist폴더로 가서 확인해보면 es6폴더 내부에 있던 ES6로 쓰여진 .js 파일이 ES5로 변환되어 있는 것을 확인할 수 있다.