gulp(1) setting, pug -> html

폴더 구조

> npm init

• node_module과 package.json 생성

node_module
.gitignore
package.json
src
    img
    js
    partials
    scss
    templates
    index.pug

---

> npm i gulp-cli -g

• console 창에서 gulp실행 할 수 있음

> npm i gulp -D

• 개발환경으로 gulp 설치

> touch gulpfile.js

• gulp config파일 생성

> npm i @babel/{preset-env,core,register} -D

> touch .babelrc

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

• babel 패키지 설치 후 버전 설정

> mv gulpfile.js gulpfile.babel.js

• gulpfile 파일명 변경

• gulpfile js문법을 안정된 버전으로 변환시켜줌

> npm i gulp-pug -D

• pug => html

// gulpfile.babel.js

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

const routes = {
	pug: {
		src: "src/*.pug",	// index.pug에서 다른 파일 include하기 때문에 index파일만 컴파일
		dest: "build",
	},
};

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

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

• routes 오브젝트에 경로 저장

• 변수 pug에 pug=>html 함수 저장

• 변수 dev로 task series export

> npm i del

> npm i gulp-webserver -D

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del";
import gws from "gulp-webserver";

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

// FUNCTIONS
const clean = () => del(["build/"]);

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

const webServer = () => {
	gulp.src("build").pipe(gws({ livereload: true, open: true }));
};

const watch = () => gulp.watch(routes.pug.watch, pug);

// TASKS
const prepare = gulp.series([clean]);

const assets = gulp.series([pug]);

const render = gulp.parallel([webServer, watch]);

// EXPORT
export const dev = gulp.series([prepare, assets, render]);

• routes, functions, tasks, export 로 구분

• 수정사항을 바로 볼 수 있도록 gulp.watch 사용

• 동기 task는 parrarel 비동기 task는 series 함수 사용

• del은 dest폴더에 이전에 번들된 파일을 삭제하기 위해 사용

• 이런식으로 task들을 추가