1. 설치
npm install --save-dev gulp-nunjucks-render정상 설치가 되면, package.json 파일에 다음과 같은 내용이 추가된다.
"devDependencies": {
"gulp": "^4.0.2", // gulp 필수 ~
"gulp-nunjucks-render": "^2.2.3"
},다음은 아래 예들을 위한 파일트리이다.
├─dist
├─node_modules
├─src
│ ├─html
│ │ ├─pages // 각 페이지가 들어갈 폴더
│ │ │ └─home.njk
│ │ └─templates // 템플릿이 들어갈 폴더
│ │ └─layout.njk
│ ├─img
│ ├─scss
│ └─js
├─gulpfile.js
├─package-lock.json
└─package.json2. gulpfile 설정
src, pipe, dest에 대한 설명은 아래 링크에서 확인 가능하다.
2021/01/07 - [web/gulp] - gulp 설치 및 .src() .pipe() .dest() / 설명 추가
2-1. 공식 사이트 제공 코드(실작업시 2-2 방법 활용)
const gulp = require("gulp"); // gulp 기본
const nunjucksRender = require("gulp-nunjucks-render")
gulp.task("default", function(){
return gulp
.src("src/html/pages/*")
.pipe
(nunjucksRender({
path: ["src/html/templates"]
})
)
.pipe(gulp.dest("dist"));
});2-2. gulp.task에 별도 분리 후 default에 담기
const gulp = require("gulp"); // gulp 기본
const nunjucksRender = require("gulp-nunjucks-render")
gulp.task("nunjucks-html", function(){
return gulp
.src("src/html/pages/*")
.pipe
(nunjucksRender({
path: ["src/html/templates"]
})
)
.pipe(gulp.dest("dist"));
});
gulp.task(
"default",
gulp.parallel("nunjucks-html")
);nunjucksRender() 안의 path는 템플릿 파일의 위치로 지정하면 된다.
3. .njk
.njk는 넌적스의 특수 확장자이다. 하지만 넌적스는 html, php 등 파일형식에 제한을 받지 않기 때문에 원하는 파일형식으로 작업하면 된다. 다만 기본적으로 넌적스는, html으로 결과물을 내보내기 때문에 php와 같이 다른 파일형식으로 변환하고 싶다면, nunjucksRender에 ext 값을 지정해줘야 한다.
.pipe
(nunjucksRender({
path: ["src/html/templates"],
ext: ".php"
})
)4. 샘플, 사용법은 다음 글에 :)
4-1. templates > layout.njk
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8" />
</head>
<body>
<div>
{% block content %}
{% endblock %}
</div>
</body>
</html>4-2. pages > home.njk
{% extends "../templates/layout.njk" %}
{% block content %}
<p>HOME page</p>
{% endblock %}4-3. 터미널에서 gulp 실행
gulp4-4. dist폴더에 가서 html 파일이 다음과 같이 작성되었는지 확인
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8" />
</head>
<body>
<div>
<p>HOME page</p>
</div>
</body>
</html>
2021/01/07 - [web/gulp] - gulp 설치 + .src() .pipe() .dest()
2021/01/07 - [web/gulp] - [템플릿] gulp-nunjucks-render : 기본 사용방법
2021/01/07 - [web/gulp] - [템플릿] gulp-nunjucks-render : function(if, for, marco)
'javascript > gulp' 카테고리의 다른 글
| [코드정렬] pretty, through2 : 소스코드야 줄서자 (2) | 2021.01.08 |
|---|---|
| gulp-data : json 데이터 좀 html에 기입해주시겠습니까 (0) | 2021.01.08 |
| [템플릿] gulp-nunjucks-render : function(if, for, marco) (0) | 2021.01.07 |
| [템플릿] gulp-nunjucks-render : 기본 사용법 (0) | 2021.01.07 |
| gulp 설치 및 .src() .pipe() .dest() / 설명 수정 추가 :( (0) | 2021.01.07 |
댓글