gulp 모듈 - Node.js기반 프로세스 자동화 도구

gulp

---

설명 : gulp는 Node.js 기반의 프로세스 자동화 도구이다.A 파일을 변경할 때마다 B파일을 엎어쳐야하는 등의 지루하고 반복적인 작업을 자동화 시킬 수 있다.

우리는 gulp를 이용하여 scss 파일을 변경 시 css가 자동으로 엎어쳐지게 만들 것이다.

 

설치 방법 : npm 또는 yarn을 통해 패키지를 설치해주면 된다. (게시물 하단 참고)

 

사용 방법 : gulp에서 수행하는 작업단위(Task)를 gulpfile.js에 작성한다.

 

API : 

• series() : 순차적으로 Task를 수행
• parallel() : 동시에 최대한 많은 Task를 수행
• src() : 주어진 경로의 파일을 Readable Node.js Stream 생성
• dest() : 주어진 경로의 파일에 Writeable Node.js Stream 생성
  pipe() : Writeable Stream을 Readable Stream으로 연결 (Node.js Stream API)
  보통 src().pipe().pipe()....pipe(dest()); 이렇게 사용한다.
  
  (예시) 이렇게 사용될 수 있다.
  

  (Task)
  ...
  src('test/*.js') test폴더의 모든 js파일을 Stream에 추가 
  .pipe(babel({    Stream의 파일들을 babel로 트랜스파일
        presets: ['@babel/preset-env']
      }))
  .pipe(dest('output/')); Stream의 파일을 모두 output파일에 Write
  ...

 

gulp 설치

---

npm 또는 yarn 을 통해 설치한다.

 

npm의 경우

node.js 와 npm 버전 확인한다. 버전이 나오면 설치되어있는 것

node -v
npm -v

 

현재 경로에 package.json 파일이 있다면 해당 파일의 "dependencies" 아래에 작성된 Module들이 설치된다. 

npm install 또는 npm i (동일 명령어임)

만약 package.json 파일의 "script" { key:value } 를 작성해두었다면

npm run key 수행 시 npm run value가 설치되도록 할 수도 있다. (축약을 위함)

npm run 모듈명
npm run gulp dev

혹은 한 줄 커맨드로도 가능함.

npm i && npm run gulp dev

 

yarn의 경우

yarn && yarn 모듈명
yarn && yarn gulp dev