Gulp 시작하기

dkim-91·2022년 1월 3일

Intro

나는 gulp를 회사에서 처음 접하게 되었는데 주로 퍼블본 scss를 css로 변환 및 통합, babel을 통한 js의 변환 등에 사용하였는데, gulp 설치부터 플러그인 활용법에 대해 다시한번 정리해보고자 한다.

Gulp란?

nodejs와 npm 기반의 task-runner이다. 웹 개발 시 필요한 최적화, 유닛 테스트 등 반복되는 task들을 자동화 하기위해 사용된다. 다양한 플러그인들을 활용해 scss를 css로 변환하거나 IE에서 호환이되지않는 es6를 es5로 변환시켜주는 등 최적화에도 효율적으로 사용되곤 한다.

Gulp 시작하기

Gulp 설치

npm install --save-dev gulp
gulp -version

gulp 설치 후 gulp version을 체크하여 설치가 완료되었는지 확인한다.

CLI version: 2.3.0
Local version: 4.0.2

위와같이 출력되면 설치완료

gulpfile.js 생성

gulpfile.js는 gulp task를 정의하는 파일이다.
프로젝트 root경로에 "gulpfile.js" 파일을 생성한다.

task 선언 및 수행

gulpfile.js를 생성후 gulp가 수행할 task를 해당 파일에 Javascript로 선언해준다.

task 선언

function defaultTask(cb) {
    cb();
}

exports.default = defaultTask

task 수행

exports.default로 하였기에 명령어는 아래와같다.

gulp default 또는 gulp

gulp task 수행시 대략 이렇게 이해하면 편할것 같다.
exports.실행명령어 = 함수;

ex)
"test"로 export할 경우
exports.test = defaultTask
수행 명령어: gulp test

API 파헤쳐보기

•src

gulp가 파일을 읽기위해 사용되는 메소드이다. stream을 리턴한다.

아래와같이 src란 변수로 선언해서 사용할수 있다.

const { src } = require( 'gulp' ) ;

src(globs, [options])

globs는 문자열 또는 배열 type이고, 읽어들일 파일(들)을 해당 타입에 맞게 입력하면 된다.
options는 다양하게 있지만 필요에따라 찾아보면 될 것 같다. 활용예제는 dest에서 같이 다루겠다.

•watch

gulp가 파일을 감시하기 위해 사용되는 메소드이다. 변경이 발생하면 glob을 보고 작업을 실행한다. 예를들면, scss를 바라보고 변경이 감지되면 css로 변환하는 watch task를 만들어 사용할 수 있다.

const { watch } = require('gulp');

watch(['input/*.js', '!input/something.js'], function(cb) {
  // body omitted
  cb();
});

위 코드를 보면 gulp의 watch대상은 input폴더 하위의 js중 something.js를 제외한 모든 js파일이 된다. (* string의 !가 있으면 해당 파일 제외됨)
이와 같이 응용할 수 있겠다.

•dest

쉽게 표현하면 파일을 작성(?)하는 역할을 한다.
예를 들면, scss 파일들을 src로 읽어서 css로 변환(scss→css 변환은 다음장에서 다루겠다.) 한후, 변환된 css들을 통합하여 하나의 파일로 만든뒤, 내가 원하는 위치(directory)에 파일을 위치시킬때 사용될수 있다. 주로 프로젝트에서 통합된 css를 include하기 때문에 gulp활용 시dest는 빠질수 없는 요소이다.

dest(directory, [options])

directory에 파일을 작성하고자 하는 경로를 입력하면 된다.

const { src, dest } = require('gulp');

function copy() {
  return src('input/*.js')
    .pipe(dest('output/'));
}

exports.copy = copy;

위 코드를 보면 input폴더 하위의 모든 js파일을 읽어들여 output폴더 하위에 작성하게 된다.

series, parallel 등도 많이 쓰게되었지만 퍼블리싱에서 가장 많이쓰이고 필수적인 src,watch,dest만 정리를 해보았다. 다른 써보지못한 API에 대해서도 여유가있으면 더 공부해볼만 할것같다. 많이 알수록 간편해지고, "이런게 있었네?"와 같은 소득을 얻게 될수도 있게될테니 말이다.

참고: https://gulpjs.com/docs/en/api/concepts