반응형
예로, 아래 코드를 gulp 돌리면, 의미없는 공백들과 제멋대로인 정렬로 소스가 못생겨진다.
pretty + through2 은, 동료에게 '정렬이 왜 이따구인거죠?' 말을 안듣기 위한 플러그인이랄까?
{% set navigation = [
{ 'name': '1' , 'url': '1.html' },
{ 'name': '2' , 'url': '2.html' },
{ 'name': '3' , 'url': '3.html' }
] %}
{% extends "../templates/layout.njk" %}
{% block content %}
{% for item in navigation %}
<a href=“{{item.url}}”>{{item.name}}</a>
<a href=“{{item.url}}”>{{item.name}}</a><!-- 예:실수로 정렬이 틀어졌다! -->
{% endfor %}
{% endblock %} <!DOCTYPE html>
<html>
<head>
<title>pretty / through2</title>
<meta charset="utf-8" />
</head>
<body>
<div>
<!-- 공백 발생 -->
<!-- 공백 발생 -->
<a href=“1.html”>1</a><!-- 앞 여백 발생 -->
<a href=“1.html”>1</a><!-- 위 라인과 정렬 틀어짐 -->
<!-- 공백 발생 -->
<a href=“2.html”>2</a><!-- 앞 여백 발생 -->
<a href=“2.html”>2</a><!-- 위 라인과 정렬 틀어짐 -->
<!-- 공백 발생 -->
<a href=“3.html”>3</a><!-- 앞 여백 발생 -->
<a href=“3.html”>3</a><!-- 위 라인과 정렬 틀어짐 -->
<!-- 공백 발생 -->
<!-- 공백 발생 -->
</div>
</body>
</html>1. pretty, through2 설치
npm install --save-dev pretty through22. gulpfile 설정
const gulp = require("gulp");
const nunjucksRender = require("gulp-nunjucks-render");
const data = require('gulp-data');
const page_data = require("./src/page_data.json");
const through2 = require("through2"); // ★★★★ add
const pretty = require("pretty"); // ★★★★ add
function prettyGulp(file, enc, callback){ // ★★★★ add
file.contents = Buffer.from(pretty(file.contents.toString(), { ocd: true}));
callback(null, file);
}
gulp.task("nunjucks-html", function(){
return gulp
.src("src/html/pages/*")
.pipe(
data(page_data)
)
.pipe
(nunjucksRender({
path: ["src/html/templates"],
/* ★★★★
넌적스 옵션 중:
trimBlocks:true,
블록태그로 인해 생기는 줄바뀜 삭제, 하지만 원하는 만큼의 결과물 안나옴
lstripBlocks:true
블록태그로 인해 생기는 공백 삭제, 하지만 원하는 만큼의 결과물 안나옴
*/
})
)
.pipe(through2.obj(prettyGulp)) // ★★★★ add
.pipe(gulp.dest("dist"));
});
gulp.task(
"default",
gulp.parallel("nunjucks-html")
);3. 결과물
<!DOCTYPE html>
<html>
<head>
<title>pretty / through2</title>
<meta charset="utf-8" />
</head>
<body>
<div>
<a href=“1.html”>1</a>
<a href=“1.html”>1</a>
<a href=“2.html”>2</a>
<a href=“2.html”>2</a>
<a href=“3.html”>3</a>
<a href=“3.html”>3</a>
</div>
</body>
</html>반응형
'javascript > gulp' 카테고리의 다른 글
| [파일압축2] gulp-clean-css : 넌 거리두기 하지마(minify) (0) | 2021.01.08 |
|---|---|
| [파일압축1] gulp-concat : 파일들아 모여라 (0) | 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 |
댓글