Gulp ?

쓰는 이유 :)

 

Gulp 홈페이지에서 소개하는 글

---

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는 Stream 기반의 Build System입니다. 

 

Gulp 설치 :)

 

npm install --global gulp-cli
npm install --save-dev gulp

 

Gulp 파일 생성 :)

 

루트 프로젝트에 gulpfile.js 라는 이름으로 생성을 합니다.

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

 

이제 테스트를 진행합니다.

 

gulp

 

 

참고로 기존에서는 task를 통해 구현이 되어있었지만 이제는 API가 변경이 되었습니다!.

이제는 src(), dest(), series(), parallel() 이런 문법을 존재합니다.

 

파일명 :)

 

• Babel 을 사용하게 되는 경우 gulpfile.babel.js 라는 이름으로 파일명을 변경해야 합니다. 

• TypeScript을 사용하게 되는 경우 gulpfile.ts 라는 이름으로 파일명을 변경해야 합니다.

 

Creating Tasks

각각의 Gulp의 작업은 비동기로 제공을 합니다.

이 방법을 동기적으로 만들고 싶으면 대안으로는 async / await 이 있습니다.

 

Gulp는 Public Task , Private Task 존재 합니다.

 

Public Task는 command gulp 실행을 해주며

Private Task는 내부적으로 series() or parallel() 보통 사용이 됩니다.

 

Public Task는 독립적으로 실행을 시킬수 있지만 Private Task는 독립적으로 실행을 시킬수 없습니다.

 

• series() - 작업을 순서대로 진행하고 싶으면 이 옵션을 선택
• parallel() - 작업은 동시적으로 진행하고 싶으면 이 옵션을 선택

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

function transpile(cb) {
  // body omitted
  cb();
}

function bundle(cb) {
  // body omitted
  cb();
}

exports.build = series(transpile, bundle);

----

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

function javascript(cb) {
  // body omitted
  cb();
}

function css(cb) {
  // body omitted
  cb();
}

exports.build = parallel(javascript, css);

 

series() , parallel() 서로 계속 중복되서 사용할수 있습니다.