gulp + nunjucks

 

 

gulp + nunjucks를 쓰게 된 계기

1. 구축 프로젝트를 진행하게 되었다.
2. html 산출물이 필요하다.
3. 공통적으로 쓰이는 코드들이 많다.
4. 이것들을 컴포넌트화 해서 어느 페이지에서든 재사용하면 좋지 않을까?
   1. pug가 좋다고? > 너무 생소하다.
   2. nunjucks 라는게 있네? > 인클루드/컴포넌트/자바스크립트 제어 익숙하다 > 선택
5. html 산출물이 필요하기 때문에 이를 빌드할 툴이 필요하다.
   1. 웹팩을 많이 쓴다고? > html 산출물만을 위해 쓰기엔 너무 무거운데?
   2. gulp는 어떨까? > 쉽고 가볍다 > 선택

 

 

---

 

gulp 셋팅

• js, css 파일 minify
• scss 컴파일
• css autoprefixer
• 라이브 서버
• 이미지 경량화
• babel
• 빌드된 html 파일 beautify 
• 라이브러리 설치(swiper, chart.js, aos...)

/** Load plugins */
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");
const sass = require("gulp-sass")(require("sass"));
const autoprefixer = require("gulp-autoprefixer");
const cssnano = require("gulp-cssnano");
const concat = require("gulp-concat");
const clean = require("gulp-clean");
const imagemin = require("gulp-imagemin");
const changed = require("gulp-changed");
const connect = require("gulp-connect");
const nunjucksRender = require("gulp-nunjucks-render");
const beautify = require("gulp-beautify");
const babel = require("gulp-babel");

 

 

node / gulp 버전

> 버전 영향 많이 받음

node -v : v18.12.0
gulp -v : CLI version: 2.3.0
              Local version: 4.0.2

 

 

package.json

> 설치한 패키지들

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "browser-sync": "^2.27.5",
    "del": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-babel": "^7.0.1",
    "gulp-beautify": "^3.0.0",
    "gulp-changed": "^3.2.0",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^4.1.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-uglify": "^3.0.2",
    "node": "^19.6.0",
    "sass": "^1.58.0"
  },
  "browsers": [
    "last 2 versions"
  ],
  "dependencies": {
    "gulp-if": "^3.0.0",
    "gulp-nunjucks-render": "^2.2.3"
  },

 

 

 

.babelrc

> babel 설정

{
    "presets": ["es2015"]
}

 

 

 

.gitignore

> git에 commit 할 때 node_module 폴더 제외

node_modules/

 

 

 

폴더구조

└─ src	//작업 폴더
    ├─ assets	
    │  ├─ images
    │  ├─ js
    │  └─ scss
    │      ├─ base
    │      ├─ components
    │      ├─ helpers
    │      └─ pages
    └─ template
        ├─ layout	// 레이아웃
        ├─ page	    // 페이지
        └─ partial	// 컴포넌트

 

└─ build	// 빌드되는 폴더 > html 산출물
    ├── assets
    │  ├─ css
    │  ├─ font // 폰트는 gulp 영향 X
    │  │  ├─ woff-dynamic-subset
    │  │  └─ woff2-dynamic-subset
    │  ├─ images
    │  ├─ js
    └─── pages

 

 

 

---

 

세팅은 이정도로 하고..

컴포넌트 만드는데 집중해야 한다.

최대한 많이 사용할 수 있도록...