#2.0 -

Dev Server

개발 워크플로우를 만든 후 다음으로 해야하는 일은 개발 서버를 만드는 것이다.(localhost server 같은) 그래서 서버를 만들기위해 gulp에서 webserver라는 플러그인을 설치할 것이다.

yarn add gulp-webserver -D

그리고 다음과 같이 webserver task를 정의하여 .html로 변환한 파일을 서버로 동작시켜서 실행시켜 본다.

import gulpWebserver from "gulp-webserver";

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

const postDev = gulp.series([webServer]);

export const dev = gulp.series([prepare, assets, postDev]);

콘솔창에 서버가 시작되었다는 메시지와 함께 주소창을 제공하였고, 해당 주소창에 들어가면 html에 정의되어 있는 코드가 동작하는걸 볼 수 있다.

Watching Files

서버를 통해 html이 동작하는걸 보았지만 html로 변환했었던 pug file을 변환하여도 서버에 동작하는 html은 변하지 않는다. 그 이유는 gulpfile에 dev는 한번 실행하고 끝났기 때문에 webserver에 등록된 html만 감지 할 수 있기 때문이다.

이제는 pug를 수정하면 바로 변경이 될 수 있게 gulp를 수정해볼 것이다. watch라는 gulp API를 사용해볼 것인데 watch라는 함수는 지켜볼 파일과 실행할 task를 적어주어 사용한다.