Gruntjs html template layout - 템플릿에 html 파일 삽입하기 : Front-end Build System
Gruntjs html template layout - 템플릿에 html 파일 삽입하기 : Front-end Build System
특정 1개의 템플릿을 만들어 놓고 대상이 되는 모든 html 파일의 내용을 템플릿에 담아 새로운 파일로 생성한다.
반복적인 소스를 템플릿에서 관리하고 대상이 되는 html에 자동으로 삽입하게 한다.
템플릿엔진은 handlebars 를 사용했다. http://handlebarsjs.com/
결과물
template.hbs
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Modern Design</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/commons/fonts/NanumGothic/nanumgothic.css">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/bower_components/ionicons/css/ionicons.min.css">
</head>
<body>
{{{body}}}
</body>
</html>source.html
<link rel="stylesheet" href="./gbdc.style.css">
<div class="ex-note">
<span>test</span>
</div>source.html 내용이 template.hbs 의 {{{body}}} 삽입된다.
result.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Modern Design</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/commons/fonts/NanumGothic/nanumgothic.css">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/bower_components/ionicons/css/ionicons.min.css">
</head>
<body>
<link rel="stylesheet" href="./gbdc.style.css">
<div class="ex-note">
<span>test</span>
</div>
</body>
</html>Install
npm install-D grunt-contrib-watch grut-contrib-connect handlebarsSetting
</> 파일구조
/dist
/apps
/todayNotify
index.html
/src
/apps
/todayNotify
index.html
/templates
layout.hbs
Gruntfile.js
package.js핸들바를 이용하여 파일을 생성하기 때문에 직접 grunt task 개발하였다.
</> Gruntfile.js
var path = require('path')
var handlebars = require('handlebars')
module.exports = function (grunt) {
// 직접 task 를 생성한다.
grunt.registerMultiTask('hbsLayout', '', function () {
// 설정 옵션을 받는 다.
var options = this.data
var templateSrc = options.template
var files = options.files
var src = files.src
var cwd = files.cwd
var dest = files.dest
// 대상 html 소스를 모두 찾는 다.
var htmlPaths = grunt.file.expand({ cwd: cwd }, src)
htmlPaths.map(function (htmlPath) {
var _htmlPath = path.join(cwd, htmlPath)
if (grunt.file.exists(_htmlPath)) {
var body = grunt.file.read(_htmlPath)
// layout.hbs 템플릿 파일을 읽는 다.
var source = grunt.file.read(templateSrc)
// 헨들바로 컴파일 한다.
var template = handlebars.compile(source)
// 원래 소스 경로를 위치로 파일을 생성한다.
grunt.file.write(path.join(dest, htmlPath), template({body}))
}
})
})
grunt.initConfig({
... 기존 설정 생략 (이전 포스팅 참고) ...
'hbsLayout': {
html: {
template: 'src/templates/layout.hbs',
files: {
src: ['apps/**/*.html'],
cwd: 'src/',
dest: 'dist'
}
}
}
})
grunt.loadNpmTasks('grunt-contrib-watch')
grunt.loadNpmTasks('grunt-contrib-connect')
grunt.registerTask('build', ['hbsLayout:html'])
grunt.registerTask('default', ['build', 'connect:server', 'watch'])
}이렇게 직접 작업을 생성할 수 있어 grunt 는 다른 빌드들에 비해 보다 자유롭게 작업을 구성할 수 있다.
keyword
Front-end build-system gruntjs grunt template handlebars html include grunt-contrib-watch grunt-contrib-connect
Syaku Blog by Seok Kyun. Choi. 최석균.
'Front-end > Gruntjs' 카테고리의 다른 글
| Gruntjs html include - 파일 삽입하기 : Front-end Build System (0) | 2017.02.23 |
|---|---|
| Gruntjs LiveReload - 페이지 자동 새로고침 : Front-end Build System (0) | 2017.02.22 |
| html include를 구현한 빌드 시스템 (0) | 2016.06.30 |