gulp = Task runner
task 란? 이미지를 가져와서 압축한 뒤 특정 폴더에 넣거나 가장 최신의 자바스크립트 코드를 가져와서 기존코드에 컴파일 하는 것. 컴파일 하는 과정에서 소스를 압축해줄수도 있다.
전역에 gulp를 설치해준다.
npm inatall gulp-cli -g
파일 만들어주기
package.json > scripts 에 아래 코드 넣기.
"dev": "gulp dev", "build": "gulp build"
npm add gulp -D -> node-modules 파일 생성
pacjage.json 에 아래 코드 생성되었는지 확인``` "devDependencies": { "gulp": "^4.0.2"} ```
.bablerc 에 아래 코드 넣기
{ "presets": ["@babel/preset-env"]; }
npm add @babel/{register,core}
npm add @babel/preset-env
import gulp from "gulp";
export const dev = () => console.log("i will dev");
주의점 - include, extends 시 파일 경로 잘 지정 하기
extends templates/layout
block content
img(src="img/logo.svg")
h1 Awesome Cleaness
footer
span This is gulp
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")
이 코드들을 하나의 파일로 압축하여 빌드 할거임.
gulp-pug 터미널에 설치하기
npm add gulp-pug -D
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에만 해주면 된다.
만약 빌드업을 했을때 "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