1. <%- %>
<!-- 기본 -->
<%- include('템플릿 파일 위치') %>
<!-- 템플릿에 넘겨줘야할 값이 있을 경우 -->
<%- include('템플릿 파일 위치', {
변수 : 변수값
}) %>
<!-- 넘겨야 할 변수가 없을 경우: 하이픈(-) 삭제 가능 -->
<% include('템플릿 파일 위치') %>혹, 아래와 같이 변수 지정 여부로 분기 처리가 되어있은데, false로 값을 넘기고 싶을 때엔, 따로 변수를 기입하지 않아도 된다(예: <%- include(' ') %>). 단, 하이픈(-)은 반드시 있어야 한다,
if ( ON ) {
is On
} else {
is Off
}2. <%= %> : 변수값 삽입용
<%= 변수 %>
<!-- 변수값, ★★ 주의! 변수선언이 아닌 변수값이 들어가는 부분이다. 선언은 include에서! ★★ -->+ <% %>와 <%= %>의 경우 줄바뀜이 있으면, 오류가 난다. 반드시, '%>' 닫힘 태그 삽입이 필요하다.
var a = <%= 1 %> <!-- 인식O -->
<% var a %> = 1 <!-- 인식X -->위처럼 'var 변수명 = <%= 변수값 %>'과 같이 사용 가능한데, 비추천한다. 자바스크립트 코드를 담을 땐 <% %>를 사용하고 변수값을 담을 땐 <%= %>를 사용하는 식으로, 완전한 분리 사용을 해야, 추후 관리에 용이하다.
3. <% %> : 자바스크립트 코드 삽입용
gulp-ejs에서는 <% %>을 이용하여 자바스크립트를 내장할 수 있다. 다만, 위의 글처럼 <% %>는 줄바꿈이 있으면 안되는 태그이기 때문에 "<%" 가 작성된 줄에는 반드시 "%>" 도 있어야 한다. 그 예로,
// 예시 스크립트
if (! locals.page_title ) {
page_title 값이 없습니다.
} else {
page_title 값이 있습니다.
}<%# ejs 형식으로 변경 %>
<% if (! locals.page_title ) { %>
page_title 값이 없습니다.
<% } else { %>
page_title 값이 있습니다.
<% } %>4. <%# %> : 주석처리
<%# 주석 내용 %>5. 샘플
5-1-1. src > html > index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%- include('./include/head.ejs') %>
</head>
<body>
body area
</body>
</html>5-1-2. src > html > about-gulp-ejs.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%- include('./include/head.ejs', {
page_title: "gulp-ejs"
}) %>
</head>
<body>
body area
</body>
</html>5-1-3. src > html > include > head.ejs:
<% if (! locals.page_title ) { %>
<title>fresh-mint</title>
<% } else { %>
<title><%= page_title %> | fresh-mint</title>
<% } %>5-2. gulp 실행
gulp5-3. 결과물
dist > html > index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fresh-mint</title>
</head>
<body>
body area
</body>
</html>dist > html > about-gulp-ejs.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gulp-ejs | fresh-mint</title>
</head>
<body>
body area
</body>
</html>2021/01/07 - [web/gulp] - gulp 설치 및 .src() .pipe() .dest() / 설명 수정 추가 :(
2021/01/09 - [web/gulp] - [템플릿] gulp-ejs : 설치 및 gulpfile.js 설정
'javascript > gulp' 카테고리의 다른 글
| [템플릿] gulp-ejs : 설치 및 gulpfile.js 설정 (0) | 2021.01.09 |
|---|---|
| [템플릿] gulp-file-include 사용법 (0) | 2021.01.09 |
| [템플릿] gulp-file-include 설치 및 gulp-file 설정 (0) | 2021.01.09 |
| [로컬 테스트 서버] browser-sync + gulp-sass : scss 수정하고 바로 확인하자 (0) | 2021.01.08 |
| [css 초기화] gulp-sass + node-normalize-scss (0) | 2021.01.08 |
댓글