gulp를 시작하기 전에 gulp와 JavaScript 관계를 알면 gulp를 이해하는데 도움이 될 것 같다.
gulp는 모두 JavaScript로 구성되어 있다.
걸프파일은 gulpfile.js 이름으로 프로젝트 폴더안에 있고 걸프명령어가 실행되면 자동으로 실행된다.
걸프파일 안에서는 src(), dest(), series(), parallel() 같은 gulp API들을 볼수 있을 것이다. 걸프는 수순한 자바스크립트로만 구성되어 있다. 그렇게 때문에 함수를 추출했다면 걸프 시스템에 등록할 수 있다.
Transpliation
걸프는 TypeScript 또는 Babel 같은 트랜즈폴레이션 언어를 사용할 수 있고 확장자가 변경될 수 있다.단 그 transpiler 모듈이 설치되어 있어야 한다. 예를 들어 TypeScript는 gulpfile.ts 로 파일이름을 바꿀수 있고 이때 ts-node 모듈이 설치되어 있어야 한다. 또 바벨의 예를 들면 gulp.babel.js 파이이름으로 바꿀수 있고 이때 @babel/register 모듈이 설치되어 있어야 한다.
gulpfile 쪼개기
걸프파일이 커지면 로직별로 걸프파일을 리팩토링 할 수 있습니다. 분리된 파일들 각각의 작업들로 분리되고 gulpfile에서 이 분리된 파일들을 불러와서 사용할 수 있습니다. 이렇게 파일을 쪼개놓으면 테스트가 용이해지고 조건에 따라 동작을 다르게 할 수 있습니다.
gulpfile.js 파일을 gulpfile.js 폴더로 변경하고 gulpfile.js 폴더안에 index.js 파일을 만들면 index.js 파일은 gulpfile.js 처럼 동작하게 된다. 또 gulpfile.js 폴더안에 작업 단위로 개별적인 파일을 담을 수 있다.
https://gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles