Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

08-04 05:26


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

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 handlebars

Setting

</> 파일구조

/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



posted syaku blog

Syaku Blog by Seok Kyun. Choi. 최석균.

http://syaku.tistory.com


댓글 남기기
◀ PREV 1···353637383940414243···313 NEXT ▶