grunt-ect로 편안한 HTML 코딩
원래 ECT란?
ECT
자바 스크립트 템플릿 엔진입니다.
Grunt로 컴파일하여 사용하거나 노드의 익스프레스와 조합하여 사용할 수 있습니다.
등의 기능도 있으므로 보통의 이번 템플릿 엔진이군요.
그리고 CoffeeScript 쓸 수 있는 것 같습니다.
grunt-ect 도입
설치
필요한 npm 준비
$ npm init
$ npm install grunt --save-dev
$ npm install grunt-ect --save-dev
$ npm install grunt-contrib-watch --save-dev
Gruntfle
Gruntfile은 이런 느낌입니다.
ect의 설정 안에서
ect.render.files 로 컴파일하고 싶은 파일명: '컴파일 후의 파일명'이라고 지정하면 그것만으로 괜찮습니다.덧붙여서 전체 변수로서
ect.render.variables 로 변수를 설정할 수 있습니다.Gruntfile.coffee
"use strict"
module.exports = (grunt) ->
# task
grunt.initConfig
dir:
src: "src"
dest: "dist"
pkg: grunt.file.readJSON "package.json"
# grnt ect
ect:
options:
root: '<%= dir.src %>/template'
render:
files:
'<%= dir.dest %>/index.html': ['main/index.ect']
variables:
projectName: 'Sample Site'
menuList:
'about': '/about.html'
'２about': '/about.html'
watch:
ect:
files: "src/**/*.ect"
tasks: "ect"
# プラグインの読み込み
grunt.loadNpmTasks 'grunt-ect'
grunt.loadNpmTasks 'grunt-contrib-watch'
# タスク登録
grunt.registerTask 'default', ['watch']
실제로 파일을 배치해보기
템플릿이 들어있는 디렉토리 구성은 이런 느낌
src
└── template
├── partials
│ └── menu.ect
├── layout
│ └── default.ect
└── main
└── index.ect
src의 main 디렉토리에 들어있는 것이 dist 파일에 전개되는 느낌입니다.
partials/menu.ect
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><%- @projectName %></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<% for name,link in @menuList : %>
<li><a href="<%= link %>"><%= name %></a></li>
<% end %>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
layout/default.ect
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<%= content 'description' %>">
<title><% content 'title' %>| sample page</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<% content %>
</div> <!-- /container -->
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<% content 'scripts' %>
</body>
</html>
main/index.ect
<% block 'title': %>トップページ<% end %>
<% extend 'layout/default.ect' %>
<% include 'partials/menu.ect' %>
<h1><%= @projectName %></h1>
ここはトップページです。
<% block 'scripts': %>
<script>
$(function(){
console.log("load")
})
</script>
<% end %>
나머지는 Grunt를 실행하기만 하면
$ grunt
이제 dist 디렉토리에 index.html이 생성되어야 합니다.
상속을 사용할 수있는 템플릿은 훌륭합니다.
일단 기본적인 ECT의 구문을 써 둡니다.
HTML 이스케이프하지 않는 출력
<%- someVar %>
HTML 이스케이프하는 출력
이번 샘플은 여기밖에 사용하지 않습니다.
<%= @projectName %>
CoffeeScript 작성
<% for article in @articles : %>
<% include 'article', article %>
<% end %>
위의 템플릿 파일은 menu.ect 부분에서 사용됩니다.
Grunt 측에서 정의한 menuList는 변수를 반복하여 메뉴로 표시하고 있습니다.
<% for name,link in @menuList : %>
<li><a href="<%= link %>"><%= name %></a></li>
<% end %>
템플릿 상속
extend를 붙이면 됩니다.
<% extend 'layout/default.ect' %>
부분
<% include 'partials/menu.ect' %>
오시마
템플릿 엔진 사용하는 것으로, 코딩 효율상이의 것과 동시에, PHP나 Ruby등과 제휴할 때도 편해집니다.
그래서 꼭 한번 시도해보십시오.
참고 사이트
Grunt : 템플릿을 사용하여 공통 요소를 포함하는 HTML 생성 (grunt-ect)
ect
Reference
이 문제에 관하여(grunt-ect로 편안한 HTML 코딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/polidog/items/d8b7c401e7137156f0e7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
