🥤 gulp 사용하기 (1) 기초 및 pug 트랜스파일

gulp.js

문서가 굉장히 짧아서 금방 읽습니다.

 

 

 

참고하면 좋은 포스트)

(http://jeonghwan-kim.github.io/tool/2017/09/16/gulp-workflow-for-frentend-development.html)

(https://css-tricks.com/gulp-for-beginners/)

 

 

웹팩보다 간편해서 많이 쓰인다고 한다. gulp는 task runner라고 불리우는데 task란 다음과 같은 일들을 말한다.

 

• Spinning up a web server
• Reloading the browser automatically whenever a file is saved
• Using preprocessors like Sass or LESS
• Optimizing assets like CSS, JavaScript, and images

React를 build하는데 보통 CRA에서는 웹팩을 사용하지만 커스텀하는 경우 Gulp도 종종 사용한다고 한다.

 

그렇다면, gulp를 이용해서 scss -> css, pug -> html, es6 이상의 js -> 구형 js으로 트랜스파일 및 이미지 최적화를 해보도록하자.

 

 

🥤 설치

 

gulp의 quick start를 읽어봅시다.

(https://gulpjs.com/docs/en/getting-started/quick-start)

 

콘솔에서도 gulp를 사용해야 하니 cli는 전역 설치

npm install --global gulp-cli

 

gulp는 프로젝트 단위에서 사용하니 프로젝트 내에 dev dependencies로 설치

npm i -D gulp

 

 

🥤 gulpfile.js, gulpfile.babel.js 

 

실습을 위한 더미 데이터 생성해봅시다. 일반 브라우저는 이해할 수 없는 pug, es6로 작성된 js, scss를 생성했습니다.

 

 

webpack을 생성할 때 webpack.config.js를 생성했듯, gulp에서는 gulpfile.js를 생성합니다.

webpack과 마찬가지로 구식의 js로 작성되어야 합니다...만!

 

gulpfile.babel.js 로 생성하여 최신의 문법으로 gulpfile을 작성할 수도 있습니다. (babel 설치 필요)

 

babel 설치 및 .babelrc 세팅은 생략하겠습니다. es6 이상 문법으로 gulpfile.babel.js를 작성하고 명령창이 요구하는 대로 babel 설치를 해주면 됩니다.

 

🥤 gulpfile.babel.js 내 task 작성 (gulp-task를 이용한 pug 트랜스파일)

 

(https://gulpjs.com/docs/en/getting-started/creating-tasks)

 

이제 gulpfile에서 task를 작성해보겠습니다.

task는 트랜스파일, 폴더 이동, 압축 등등 여러 가지 gulp가 처리하는 일들을 말합니다.

그리고 각 task들은 asynchronous JavaScript function입니다. 

 

우선, pug를 트랜스파일 해보겠습니다. 2020년 6월 기준으로 4001개의 plugin이 있습니다.

여기서 검색해봅시다. (https://gulpjs.com/plugins)

 

여기서 우리는 pug를 트랜스파일해야 하므로 gulp-pug를 사용하겠습니다.

npm i -D gulp-pug

 

gulpfile.babel.js은 다음과 같이 task를 작성합니다.

pug 함수를 보면, 모두 .으로 연결된 asynchronous JavaScript function임을 알 수 있습니다. 

src나 pipe, series, dest와 같은 메서드들은 api 문서를을 확인합시다. (https://gulpjs.com/docs/en/api/concepts)

 

// gulp 사용을 위해 임포트
import gulp from "gulp";
// pug 트랜스파일을 위해 설치했습니다.
import gulppug from "gulp-pug";
// del 패키지는 직접 설치해줘야 합니다.
import del from "del";

const routes = {
  pug: {
    // src 첫 경로에 있는 pug와 해당 pug와 연관된 block, include 등등의 pug도 함께 트랜스파일됨
    src: "src/*.pug",
    dest: "build",
  },
};

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

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

// dev 실행시 clean을 한 후 pug을 실행하도록 함
// build가 충돌하는 것을 방지하기 위함 (직접 build 파일을 지워줘도 되지만 자동화를 위해)
export const dev = gulp.series([clean, pug]);

 

package.json은 다음과 같이 작성합니다.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "gulp dev",
  "build": "gulp build"
},

 

npm run dev를 돌려주면, 라우트 설정을 해준대로 build에 트랜스 컴파일된 내용이 쌓입니다.