Grunt에서 즉석 템플릿 엔진이 필요했기 때문에 마침내 만들었습니다.
json을 떨어 뜨렸다.
HTML 템플릿
플레이스홀더(:TAG)를 마련해, 이런 HTML 만들어 둔다.
template.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>:NAME</title>
</head>
<body>
<p id=":ID">:TEXT</p>
</body>
</html>
데이터가 되는 JSON 준비
자리 표시자의 문자열을 키로 한 객체를 만듭니다.
이 JSON 값이 삽입되는 방식.
스프레드 시트 등에서 출력할 수 있도록 해두면 더욱 편리할지도 모른다.
data.json
[
{
":ID": 1,
":NAME": "name",
":TEXT": "text."
},
{
":ID": 2,
":NAME": "なまえ",
":TEXT": "テキスト。"
}
]
Grunt에서 개인 작업 정의
그러면 Grunt 측에 이런 느낌의 개인 작업을 설정한다.
Gruntfile.js
grunt.registerTask('make-html', 'make html.', function ()
{
var template = grunt.file.read('./src/template.html'),
data = grunt.file.readJSON('./src/data.json'),
item,
key,
reg,
html;
for (var i = 0, l = data.length; i < l; i++)
{
item = data[i];
html = template;
for (key in item)
{
reg = new RegExp(key, "ig");
html = html.replace(reg, item[key]);
}
grunt.file.write('./dest/'+ i + '.html', html, {force: true});
}
});
그런 다음 grunt make-html을 사용하면 HTML 파일이 생성됩니다.
물론 HTML이 아니어도 된다.
보시다시피, JSON의 키 이름과 일치하는 곳을 대체하는 매우 간단한 메커니즘. 쓰기 메커니즘은 어쩌면이 정도로 필요한 충분한 생각이 들었습니다.
데이터를 저것 이것 조작할 수 있는 자유도가 있으므로, 여기로부터 어레인지하면 좋다고 생각합니다.
샘플 세트
Reference
이 문제에 관하여(Grunt에서 즉석 템플릿 엔진이 필요했기 때문에 마침내 만들었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nenjiru/items/b889f26579798c40f72f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
