Gulp Basic
해당 블로그의 글은 공부를 하면서 정리를 한 내용입니다.
필자가 미처 모르는 부분이 있거나 잘못된 내용이 있을 수 있습니다.
오타 및 잘못된 내용 발견 시, 댓글로 남겨주시면 수정 및 반영하겠습니다.
감사합니다.
내용은 추가되거나 수정될 수 있습니다2020.06.24 작성
Gulp
- 한국 기준으로 '걸프'라 불리며, 오픈 소스 자바스크립트 툴킷.
- 프론트엔드의 스트리밍 빌드 시스템
- Nodejs 기반의 task runner, 웹 개발에 수반되는 시간 소모적인 반복 task들을 자동화 하기 위해 사용된다.
- 다양한 플러그인이 존재하며, gulp 생태계가 존재하는데 약 4000여개의 플로그인이 존재한다 (2020.06.23 기준)
gulpjs intro page에서는
A toolkit to automate & enhance your workflow라 적혀있다.
(당신의 워크 플로우를 자동화 시켜주고 향상시켜줄 툴킷)
특징
intro page에서 말하는 3가지 특징은 다음과 같다
- Flexible (유연)
- 환경 구성을 코드로 하고, Gulpfile을 만들어서 모든 자바스크립트 파일을 유틸화 할수 있음
- gulpfile 파일 내에서 tasks들을 코드로 구성하거나 단일 목적 gulp 플러그인들을 사용하여 작성이 가능하다
- Composable (구성)
- 개별, 중요 task들을 작성. 작은 task를 사용하여 반복은 줄이고 더 큰 task를 빠르고 정확하게 구성할 수 있음.
- Effiecient (효율)
- gulp stream을 사용하는데, 디스크에 파일이 만들어 지기전에 메모리 상에서 파일들에 대한 변환이 적용되어 진다.
- 그러므로 빠른 빌드 프로세싱이 가능하다.
플러그인
다양한 플러그 인들이 있는데, 이 다양한 플러그인들을 이용해 chaining method를 구성하여 task를 구성한다고 생각하면 된다.
이미 훌륭히 만들어진 플러그인들이 많이 때문에 사용하면 편하게 task를 구성할 수 있다.
대표적으로는 바벨, SASS, Typescript 플러그인 등 다양하다.
플러그인 storage 주소: https://gulpjs.com/plugins
Quick Start
기본 환경 Nodejs가 설치 되어 있어야합니다.
필자는 npm 대신 yarn을 사용하는 편이다.
최대한 global 의존성을 낮추기 위해서 모든 종속성은 로컬로 추가.
gulp cli툴은 yarn을 통해서 사용.
Gulp Page에서 제공해주는 Quick Start와 다를 수 있음.
git bash에서 해당 명령어들을 사용
echo '프로젝트 폴더생성'
mkdir gulp-study
echo '프로젝트 폴더이동'
cd gulp-study
echo '해당 폴더에 package.json 생성'
yarn init -y
echo '해당 package.json에 devDependency 추가 및 설치'
yarn add -D gulp-cli gulp
- gulp cli툴이 제대로 적용되는지 확인
자동으로 node_modules\.bin\gulp 바이너리를 찾아서 해당 cli를 이용할 수 있게 해준다
yarn gulp --version
output
CLI version: 2.3.0
Local version: 4.0.2
Done in 0.67s.-
root directory에 gulpfile.js 파일을 만들어 준다.
-
task 목록이 제대로 표시되는 지 확인
yarn gulp --tasks
output
[01:08:19] Tasks for D:\front\gulp-study\gulpfile.js
[01:08:19] └── default
Done in 0.87s.
- gulp을 통해 default task를 실행
yarn gulp
output
[01:09:25] Using gulpfile D:\front\gulp-study\gulpfile.js
[01:09:25] Starting 'default'...
default Task [Function: done]
[01:09:25] Finished 'default' after 5.27 ms
Done in 0.82s.
