Yeoman을 사용하여 프론트엔드 개발을 하면서 한가지 아쉬운 점이 있었다. 단일 페이지로 구성된 웹 애플리케이션이라면 문제가 없겠지만, 페이지가 많아지면서 중복 코드가 많아진다는 점이었다. HTML에도 include같은 기능이 있으면 좋겠지만, 그것은 불가능하니 자바스크립트의 힘을 빌리거나 조립해서 하나의 화면을 만들어줄 서버 프로그램이 필요하다. 하지만, 프론트엔드 개발 진행중에 서버 코드와 별개로 HTML/CSS로만 작업을 하려다보니 발생한 문제인데, Yeoman의 구성인 Grunt에서 사용할 수 있는 grunt-bake를 사용하면 해결할 수 있었다.

간단히 다음 명령으로 설치할 수 있다.

$ npm install grunt-bake --save-dev

이제 Gruntfile.js 파일을 수정해야 한다.

grunt.initConfig( {
    bake: {
        your_target: {
            options: {
                // Task 옵션을 추가한다.
            },

            files: {
                // 파일을 아래와 같은 형식으로 추가한다.
                // "결과 파일": "작업 파일"

                "dist/index.html": "app/index.html"

                // etc ...
            }
        },
    },
} )

위와 같이 설정을 해주면, app/index.html 내용은 아래와 같은 형식으로 작성하게 된다.

<html>
    <head></head>
    <body>
        <!--(bake includes/header.html)-->
        <div class="content"> ... </div>
        <!--(bake includes/footer.html)-->
    </body>
</html>

물론, includes/header.html 파일과 includes/footer.html 파일도 각 부분에 들어갈 내용으로 작성해준다.

이제 빌드를 위한 Task 설정을 수정할 차례이다. server Task와 build Task에 아래와 같이 "bake:build"를 추가해준다.

grunt.registerTask('server', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }
    grunt.task.run([
        'clean:server',
        'bake:build',
        'concurrent:server',
        'connect:livereload',
        'open',
        'watch'
    ]);
});
grunt.registerTask('build', [
    'clean:dist',
    'bake:build',
    'useminPrepare',
    'concurrent:dist',
    'concat',
    'cssmin',
    'uglify',
    'copy:dist',
    'rev',
    'usemin'
]);

그리고 livereload를 위해서 watch 설정에 페이지 부분 내용이 들어갈 폴더를 추가해준다.

watch: {
    compass: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        tasks: ['compass:server']
    },
    styles: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
        tasks: ['copy:styles']
    },
    bake: {
        files: [ "<%= yeoman.app %>/includes/**" ],
        tasks: "bake:build"
    },
    livereload: {
        options: {
            livereload: LIVERELOAD_PORT
        },
        files: [
            '<%= yeoman.app %>/*.html',
            '.tmp/styles/{,*/}*.css',
            '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
            '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
    }
}

이제 모든 설정이 끝났다. 페이지에서 중복된 코드는 반복하지 말고, 모두 부분 HTML로 작성하면 된다.

저작자표시

'Developing' 카테고리의 다른 글

PHP 에서 IE 구분  (0) 2015.01.19
동일 페이지에서 링크로 섹션 이동시 고정 헤더에 가리는 문제  (0) 2015.01.14
로에디 그린 - 유지보수하기 어렵게 코딩하는 방법  (0) 2013.04.11

+ Recent posts

티스토리툴바