Gulp 4 소개

Gulp는 웹사이트 개발 중 자주 발생하는 작업을 자동화하기 위한 도구입니다: CSS 및 JavaScript 파일 축소, 여러 파일을 하나로 병합, LESS 및 SASS를 CSS로 변환, TypeScript 언어를 JavaScript로 변환 등과 같은 작업을 수행합니다.

작동 원리는 다음과 같습니다: Gulp 시스템을 위해 작업(Task)을 작성하면, Gulp는 이러한 작업들을 지정된 순서대로 실행합니다.

Gulp를 설치해 봅시다. 이를 위해 명령줄에서 다음 명령을 실행해야 합니다:

npm install --global gulp-cli

이제 Gulp를 사용할 프로젝트를 생성합니다. 이를 위해 프로젝트 폴더에 다음과 같은 파일 구조를 만듭니다:

/src/
- /js/
  - script1.js
  - script2.js
  - script3.js
- /css/
  - styles1.css
  - styles2.css
- /img/
  - image1.png
  - image2.png
  - image3.png
- index.html

또한 프로젝트 폴더에 package.json을 추가해야 합니다. 그 후 프로젝트에 Gulp를 설치할 수 있습니다. 이를 위해 명령줄에서 프로젝트 폴더에 위치한 상태로 다음 명령을 실행해야 합니다:

npm install --save-dev gulp

프로젝트를 생성하고 그 안에 Gulp를 설치하세요.