Gulp는 Sass, Babel, TypeScript 컴파일, 로컬 서버 구축 등 귀찮은 웹 제작 작업을 효율적으로 설명하는 인기 빌드 시스템입니다. 2018년 12월에 출시된 최신 버전 4에서는 간단한 작업 정의, 플러그인 없는 직렬 및 병렬 처리 등 편리한 기능이 추가되었습니다.

이 항목에서는 Gulp 4를 도입하는 방법과 간단한 작업 정의를 소개합니다.

「 절대 넘치지 않는 Gulp 4 입문(2018년판) - 설치와 Sass를 사용할 때까지의 순서 - ICS MEDIA 」에서는 환경 구축 방법이나 Sass의 컴파일, watch등에 대해서 동영상 첨부로 자세하게 해설하고 있습니다. 여기도 함께 참조하십시오.

프로젝트 초기 설정

우선 환경 준비입니다. 커맨드 라인(Windows에서는 커맨드 프롬프트, macOS에서는 터미널)을 사용하는 장면이 있습니다만, 코피페만으로 간단하게 인스톨 할 수 있어 5분도 있으면 종료합니다.

모든 프로젝트 폴더로 명령줄을 사용하여 이동합니다.

프로젝트 폴더로 이동

cd /Users/MyName/myproject

프로젝트의 초기 설정을 수행합니다.

프로젝트 초기 설정

npm init -y

프로젝트 폴더에 Gulp 4 설치

Gulp 4를 설치합니다.

프로젝트 초기 설정

npm install gulp -D

프로젝트 폴더의 Gulp 4 사용

프로젝트 폴더에 설치된 Gulp 4를 사용하려면 npm Node.js v8.2에서 도입된 npx를 사용하는 것이 편리합니다 (참고 기사 "npm 5.2.0의 새로운 기능! "npx"로 로컬 패키지를 쉽게 실행합시다.").
npx gulp 명령을 사용하면 프로젝트 폴더의 Gulp를 사용할 수 있습니다. 전역적으로 gulp-cli를 설치할 필요가 없습니다.

Gulp 사용 (버전 확인)

npx gulp -v

태스크를 지정하려면 다음을 수행하십시오.

Gulp 사용

npx gulp (タスク名)

Gulp 4를 사용해보십시오.

환경이 준비되었으므로 Gulp 4를 사용해 봅시다. Gulp 4의 변경점은 CHANGELOG 에 기재가 있습니다만, 기본적인 사용법은 같습니다.

로그를 출력하는 간단한 작업은 다음과 같습니다. done 의 부분은 콜백 함수(태스크가 끝난 후에 실행되는 함수)로, 이 지정이 없는 경우는 경고가 나옵니다.

로그 출력 테스트입니다.

gulp.task("mytask", (done) => {
  console.log("gulp 4 success!");
  done();
});

작업을 실행해 봅시다.

mytask 실행

npx gulp mytask

콘솔에 로그가 출력되면 성공입니다.

직렬·병렬 처리

지금까지 Gulp에서 직렬 처리 (하나의 처리가 완료된 후에 다음 처리가 실행된다) · 병렬 처리 (복수의 처리가 동시에 실행된다)를 실시하려면 , run-sequence 와 같은 플러그인을 사용 필요했지만, Gulp 4에서는 표준으로 gulp.series 와 gulp.parallel 가 추가되었으므로 추가 플러그인이 더 이상 필요하지 않습니다.

task1 : 1 초 후에 로그 출력

task2 : 2 초 후에 로그 출력

task3 : 즉시 로그 출력

라는 내용의 태스크를 정의하고 task1 및 task2가 완료된 후 task3을 실행하는 태스크를 정의합니다.

Gulp4의 직렬·병렬 처리

gulp.task("default",
  gulp.series(
    gulp.parallel("task1", "task2"),
    "task3"
  )
);

실행하면, 다음과 같이 로그가 출력되어 직렬·병렬 처리가 성공하고 있는 것을 알 수 있습니다.

Gulp 4를 사용해 보자.

Gulp 4에서는 gulp.series 및 gulp.parallel를 중심으로 API가 업데이트되었습니다. 개인적으로는 Gulp 3계를 배울 때보다 학습 비용이 낮아진 인상을 받고 있습니다. 꼭 최신 빌드 시스템 Gulp 4를 만져보세요.

■ 관련 기사

절대 넘치지 않는 Gulp 4 입문(2018년판) - 설치와 Sass를 사용할 때까지의 순서 - ICS MEDIA

Gulp 입문 - Schoo (스쿠)