반응형
1. @@include('템플릿 파일 위치')
@@include('템플릿 파일 위치') <!-- 기본 -->
@@include('파일위치', { <!-- 템플릿에 넘겨줘야할 변수가 있을 경우 -->
변수명 : 변수값
})2. @@var : 변수값 삽입용
@@변수명 <!-- 변수값, 주의! 변수선언이 아닌 변수값이 들어가는 부분이다. 선언은 include에서! -->3. @@if : 오직 if만 존재
@@if (변수 === 변수값){
결과물
}4. @@for
@@include('템플릿 파일 위치', {
배열이름 : [아이템1, 아이템2, 아이템3]
})<div class="content">
<ul>
@@for (var i = 0; i < arr.length; i++) {
<li>`+arr[i]+`</li>
}
</ul>
</div>5. 샘플:
src > html > index.html:
<!DOCTYPE html>
<html>
<head>
@@include('./include/head.html', {
page_main: true,
page_name: "fresh-mint"
})
</head>
<body>
@@include('./include/content.html')
</body>
</html>src > html > about-gulp-file-include.html:
<!DOCTYPE html>
<html>
<head>
@@include('./include/head.html', {
page_main: false,
page_title: "gulp-file-gulp",
page_name: "fresh-mint"
})
</head>
<body>
@@include('./include/content.html')
</body>
</html>src > html > include > head.html
@@if (page_main === true){
<title>fresh-mint</title>
}
@@if (page_main === false){
<title>@@page_title | fresh-mint</title>
}
<meta name="author" content="@@page_name">src > html > include > content.html
<div class="content">
content area
</div>결과물:
dist > html > index.html:
<!DOCTYPE html>
<html>
<head>
<title>fresh-mint</title>
<meta name="author" content="fresh-mint">
</head>
<body>
<div class="content">
content area
</div>
</body>
</html>dist > html > about-gulp-file-include.html:
<!DOCTYPE html>
<html>
<head>
<title>gulp-file-gulp | fresh-mint</title>
<meta name="author" content="fresh-mint">
</head>
<body>
<div class="content">
content area
</div>
</body>
</html>2021/01/07 - [web/gulp] - gulp 설치 및 .src() .pipe() .dest() / 설명 수정 추가 :(
2021/01/09 - [web/gulp] - [템플릿] gulp-file-include 설치 및 gulp-file 설정
반응형
'javascript > gulp' 카테고리의 다른 글
| [템플릿] gulp-ejs : 사용법 (0) | 2021.01.09 |
|---|---|
| [템플릿] gulp-ejs : 설치 및 gulpfile.js 설정 (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 |
댓글