gulp-nunjucks-render 모듈을 이용한 HTML작업

모질라의 자바스크립트 템플릿 언어인 nunjucks을 gulp로 활용해서 HTML작업을 하는 방법을 소개합니다. 이 글에서는 마크업 작업자의 HTML산출물 관리를 위한 측면에서 관련 내용을 다룹니다.

샘플프로젝트의 디렉토리 구조

소스파일의 HTML디렉토리는 레이아웃과 본문 페이지, 그리고 공통으로 사용되는 common 디렉토리로 구성됩니다.

샘플에서는 위와같은 모듈을 사용했습니다.

nunjucks에서 indent필터를 지원하지만 space만 지원합니다.
템플릿이 랜더링될때 들여쓰기 출력이 신경쓰여서 gulpfile.js 에 manageEnv옵션을 이용해서 tabIndent이라는 필터를 추가했습니다.  템플릿 내에서 tabIndent로 탭문자 들여쓰기 필터를 사용할 수 있습니다.

최상위 레이아웃에서는 include 를 랩핑하는 매크로를 선언했습니다.
include할 때 tabIndent 필터를 적용해서 코드를 간결히 하려는 목적입니다.

{% block content %}{% endblock %} 영역은 각 페이지 본문 내용이 출력되는 block입니다. filter tabIndent로 감싸서 들여쓰기 적용한 모습입니다.

본문 파일에서는 set 태그로 현재 페이지의 변수를 지정하고 레이아웃이나 코드조각에서 활용할 수 있습니다. 그리고 현재 페이지에 적용할 레이아웃 템플릿을 지정합니다. 본문 내부에서도 다른 코드조각을 include할 수 있습니다.

header파일에서 nav파일을 include했고, nav파일에서는 페이지에서 선언한 변수인 pageVar를 참조해서 현재 페이지에 해당하는 링크에 active클래스를 출력해주고 있습니다.

nunjucks 템플릿 관련 설명은 https://mozilla.github.io/nunjucks/templating.html 에서 참조할 수 있습니다.