오늘은 SCSS를 배우기 전에 배우게 된 Gulp에 대해 다뤄보려고 한다.
해당포스트는 Nomadcoder Gulp코스를 수강 후 작성하게 되었다.
Gulp란?
Gulp는 주로 task runner로 알려진 오픈소스 자바스크립트 툴킷으로, 주로 반복적이고 자주 사용 되는 일을 자동화 시켜주는, 빌드시스템으로 잘 알려져있다.
여기서 task란 이미지를 압축시키거나, 최신 버전으로 작성 된 코드를 구형 브라우저등에서 사용이 가능하게끔 컴파일 해주는 일을 이야기한다.
Gulp를 잘 사용 할 경우, 업무 시간 단축과 생산성 향상에 효과적이기에, 비슷한 위치인 Webpack과 비교 되며 자주 사용 된다.
Gulp로는 무엇을 할 수 있나?
gulp를 사용하면 업무를 자동화 할 수 있는 장점 외에도, pug형식으로 되어있는 파일을 html파일로 합치거나, scss로 작성한 파일을 토대로 css를 적용 할수도 있다. 또한, 이를 로컬 웹페이지로 열어서 실시간으로 변화가 확인 가능하도록 하는것도 가능하다.
추후에 scss를 다룰때는 물론이고, React를 다루기 전에도 알아두면 유용한 툴이 될것이라 생각한다.
Gulp install
Gulp를 사용하기 위해선 우선 node.js와 npm을 먼저 인스톨 해야한다.
node.js와 npm의 설치가 완료 되면 npm install gulp-cli -g을 터미널에 입력하여 Gulp를 설치 할 수 있다.
Gulp는 안에 다양한 기능을 가지고 있는 패키지가 아니다.
때문에 각각의 plug-in을 사용하게 되는데, 필요한 플러그인을 그때그때 npm을 사용해서 설치 한 다음, 사용하는 구조로 되어있다.
Gulp에서 사용 가능한 플러그인을 예로 들어보자면, pug scss를 사용 할 수 있거나, 혹은 웹사이트를 할당 한 다음 열 수 있거나, Babel을 이용해서 자바스크립트를 컴파일하는것도 가능하다.
Gulp는 어떻게 사용하는가?
gulp의 플러그인을 인스톨 한 뒤에는 gulp.babel.js를 통해서 조작하게 된다. gulp는 node.js기반의 툴킷이기에, 자바스크립트의 문법을 따르게 된다.
인스톨이 완료 되었다면, 최상단에 사용할 플러그인을 할당할 이름과 함께 import variable from "plugInName";과 같은 식으로 입력한다.
대부분의 경우는 사용법이 플러그인을 검색했을때 설치 키워드와 함께 npm공식문서에서 사용 방법이 나오기에 꼭 참조하면서 사용하도록 하자.
최초로 gulp를 사용할 경우엔, import gulp from "gulp";를 우선적으로 import를 해줘야한다.
그 위엔 routes를 작성하게 되는데, 이는 object이며 gulp를 사용하려 하는 파일이 pug인지 img인지등을 작성하게 된다.
그때 사용 되는 key는 src와 dest가 있는데, src는 해당 파일이 실제로 존재하는곳, 즉 검색할 위치를 나타낸다.
dest는 destination의 약자로, gulp를 통과한 파일이 저장되는 경로를 의미한다.
그 이후에는 task를 작성하게 된다.
예를 들어 pug파일을 html로 컴파일 하고 싶은 경우 task의 구성은
const pug = () =>
gulp.src(route.pug.src).pipe(gpug()).pipe(gulp.dest(route.pug.dest));와 같이 나타낼 수 있다.
즉 기본적으로 task는 함수이며, src를 pipe를 통해 플러그인으로 가공 한 뒤에, 다시 pipe를 통해서 목적지에 저장 하는 형태를 취하고 있다.
마치 하나의 파이프에서 흘러가는 흐름과 같은 방식인것이다.
이 task들은 여러 task를 묶어서 사용 하는것도 가능하다.
이를 묶어주는것이 series() 혹은 parallel()인데, 둘의 차이는 순차적으로 실행되는가?(series) 병렬적으로 동시에 실행되는가?(parallel)의 차이가 있다.
이후엔 export를 사용해서 gulp모듈에서 내보내져 아웃풋이 된다.
gulp를 기동 시키기 위해선 특별한 키워드가 필요한데, npm와 yarn 각각의 run키워드를 사용해서 기동시켜야 한다.
React에서도 사용하나?
비슷하게 npm을 사용하는 react는 gulp를 사용하지는 않는다. 대신에 이쪽은 react-create-app을 사용하게 된다.
react-create-app은 react를 다룰때 함께 다루도록 하겠다.
