🥤 gulp 사용하기 (2) gulp-webserver와 watch()를 통한 자동화

watch를 통해 파일에 변화 사항이 있을 경우 감지하고 자동으로 build한 후 webserver를 켜보도록 하자.

nodemon의 gulp 버전이다.

 

(https://www.npmjs.com/package/gulp-webserver)

(https://gulpjs.com/docs/en/api/watch)

(https://gulpjs.com/docs/en/api/parallel)

 

각 문서에 이미 자세히 설명이 되어 있다.

 

주의할 점은 보통 series는 순차적으로 실행하는 반면 parallel은 simultaneously 하게 실행한다.

Combines task functions and/or composed operations into larger operations that will be executed simultaneously. There are no imposed limits on the nesting depth of composed operations using series() and parallel().

 

watch와 webserver를 series로 돌려도 작동은 하지만 이는 webserver의 open option을 true로 주어서 재렌더링하는 것일 뿐이므로 parallel을 통해서 동시적으로 돌려줍시다.

 

import gulp from "gulp";
import gulppug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver";

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

//task
const pug = () =>
  gulp.src(routes.pug.src).pipe(gulppug()).pipe(gulp.dest(routes.pug.dest));

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

const webserver = () =>
  gulp.src("build").pipe(
    ws({
      port: 5000,
      livereload: true,
      open: true,
    })
  );

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

//////////////////////////execute///////////////////////////////////

// build delete for preventing conflict
const prepare = gulp.series([clean]);

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

// execute webserver deamon
const postDev = gulp.parallel([webserver, watch]);

// package.json에서 script로 사용하기 위해 export
export const dev = gulp.series([prepare, assets, postDev]);