gulp = Task runner

task 란? 이미지를 가져와서 압축한 뒤 특정 폴더에 넣거나 가장 최신의 자바스크립트 코드를 가져와서 기존코드에 컴파일 하는 것. 컴파일 하는 과정에서 소스를 압축해줄수도 있다.

1. 설치 방법 및 사용

1. 전역에 gulp를 설치해준다.

   npm inatall gulp-cli -g

2. 파일 만들어주기

• 파일 구성
  

3. package.json > scripts 에 아래 코드 넣기.

   "dev": "gulp dev",
   "build": "gulp build"

4. npm add gulp -D -> node-modules 파일 생성
   pacjage.json 에 아래 코드 생성되었는지 확인

   ```
   "devDependencies": {
   "gulp": "^4.0.2"} 
   ```

5. .bablerc 에 아래 코드 넣기

   {
       "presets": ["@babel/preset-env"];
   }

6. 터미널에

npm add @babel/{register,core}
npm add @babel/preset-env

7. gulpfile.babel.js 에

import gulp from "gulp";
export const dev = () => console.log("i will dev");

8. 터미널에 gulp dev 시
   

---

2. gulp를 이용한 pug > html 압축 빌드

주의점 - include, extends 시 파일 경로 잘 지정 하기

index.pug

extends templates/layout 

block content 
    img(src="img/logo.svg")
    h1 Awesome Cleaness 

footer.pug

footer 
    span This is gulp

layout.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title make gulp
    body 
        include ../partials/header 

        block content

        include ../partials/footer 

        script(src="js/main.js") 

이 코드들을 하나의 파일로 압축하여 빌드 할거임.

1. gulp-pug 터미널에 설치하기

   npm add gulp-pug -D

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";

const routes = {
  pug: {
    src: "src/*.pug",
    dest: "build"
  }
};

export const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

export const dev = gulp.series([pug]);

"src/*.pug", → src폴더 자체에 속해있는 .pug 만 !!
"src/**/*.pug", → src폴더에 속해있는 모든 파일 !!
.
gulp.series([ ]) 안에 export해 놓은것들 추가해주기
.
export 를 앞에 꼭 붙여주지 않아도 된다. package.json 에서 쓸 command에만 해주면 된다.

delete

만약 빌드업을 했을때 "src/**/*.pug"와 같이 넓은 범위로 빌드업을 시켰다가
"src/*.pug"와 같이 좁은 범위로 다시 빌드업을 시키는 경우 이번에 빌드업한 파일들은 지워지지않고 남아 있게 된다.

이럴때 해당사항 없는 필요없는 빌드업 파일을 지워주는 것이 delete이다.

npm add del

del(확장자 또는 파일명);
gulp.series([ ]) 안에 clean 추가

import del from "del";
.
.
.
export const clean = () => del(["build"]);
export const dev = gulp.series([clean, pug]);
npm run dev