#0.1-0.4

Introduction

이 코스에서는 Gulp.js를 사용하여 어떻게 webpack을 대체할 수 있는지, 개발자로서 어떻게 우리의 워크플로우를 자동화할 수 있을지 배울 것이다.

Gulp는 흔히 Task Runner로 알려져 있다. 즉 우리가 할 일은 수많은 task를 만들고 gulp에서 task를 실행하면 그 결과를 주는 것이다. 여기서 말하는 task는 이미 정의한 동작이나 최신js르 가져와 코드를 컴파일 하는 것이다.

예를들어, pug를 html롤 바꾸든지 scss를 css로 바꾸거나 구형 js를 최신 js로 바꾸고 github를 올리는 등 수백 줄의 코드를 간결한 코드로 대신할 수가 있다.

Scaffolding Part One

gulp를 하기위해서는 두가지가 선행 되어야 한다. 우선 npm package에서 gulp를 설치한다.(console에서 gulp를 사용해야하기 때문) 아래 사이트에서 cli를 참고하여 설치한다.

참고로 wsl로 진행할때 설치가 안된다면 sudo를 추가하여 설치해본다.

Quick Start | gulp.js

sudo yarn add gulp-cli

위 cil를 입력하여 패키지를 설치한다. 이 패키지들은 콘솔에서 gulp를 호출할 수 있도록 도와주는 것이다.

<aside> ⭐ 여기서 gulp패키지 설치는 현제 콘솔이 접속해 있는 디렉토리에서 이루어진다. 그렇기에 설치되기 콘솔창에서 원하는 디렉토리로 접속해서 진해하길 바란다.

</aside>

gulp를 사용하는 폴더는 application을 위한 컵으로 쓰인다. 여기서 컵(gulp)은 이 폴더 안에 수많은 폴더랑 파일들을 다루는 공간을 뜻하게 된다. 나는 다음과 같은 경로에 baseGulp이란 폴더에서 진행할 것이다. path : C:\\Users\\qgs09\\OneDrive\\code

mkdir baseGulp
base

이 폴더에서 여러 파일에 대한 컴파일을 진행한다.

해당 폴더에서 src라는 폴더를 만든다. 이 파일은 컴파일 되기를 원하는 모든 파일들이 들어갈 폴더로 사용한다. path : C:\\Users\\qgs09\\OneDrive\\code\\baseGulp

mkdir src