[javascript] Grunt 템플릿과 변수를 사용하여 동적으로 파일을 생성하는 방법은 무엇인가요?

21 Nov 2023

javascript

Grunt에서 파일을 생성하기 위해서는 grunt-contrib-copy 플러그인을 사용할 수 있습니다. 이 플러그인은 파일을 복사하거나 디렉토리를 복사하는데 사용됩니다.

템플릿 파일을 생성하기 위해서는 grunt-template 플러그인을 함께 사용해야 합니다. 이 플러그인은 템플릿 엔진을 사용하여 파일을 생성할 수 있도록 도와줍니다.

먼저, package.json 파일에 Grunt 플러그인과 템플릿 엔진 관련 모듈을 설치해야 합니다. 다음 명령을 이용하여 필요한 모듈을 설치할 수 있습니다.

npm install grunt-contrib-copy grunt-template --save-dev

다음으로, Gruntfile.js 파일을 생성하고 다음과 같이 구성합니다:

module.exports = function(grunt) {
  grunt.initConfig({
    copy: {
      template: {
        files: [
          {
            expand: true,
            src: ['templates/*.tpl'],
            dest: 'output/',
            rename: function(dest, src) {
              // 파일 이름 변경을 위한 함수
              var path = require('path');
              return path.join(dest, path.basename(src, '.tpl') + '.txt'); 
            },
            options: {
              process: function(content, srcpath) {
                var template = require('lodash/template');
                var data = {
                  name: 'John',
                  age: 25
                };
                return template(content)(data); // 템플릿에 변수 삽입
              }
            }
          }
        ]
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-copy');

  grunt.registerTask('default', ['copy']);
};

위의 예제 구성에서는 templates 디렉토리에 있는 .tpl 파일들을 읽어 output 디렉토리로 복사합니다. 파일 이름은 확장자를 .tpl에서 .txt로 변경됩니다. 파일 내용에 있는 템플릿은 name과 age 변수를 포함하며, 해당 변수들은 data 객체를 통해 동적으로 생성됩니다.

이제 터미널에서 grunt 명령을 실행하면, templates 디렉토리에 있는 .tpl 파일들의 복사본이 output 디렉토리로 생성됩니다. 생성된 파일들은 템플릿에 지정된 변수를 사용하여 동적으로 생성됩니다.

추가로 사용할 수 있는 템플릿 엔진으로는 EJS, Handlebars, Mustache 등이 있으니, 다양한 템플릿 엔진을 사용해보세요. 그리고 Grunt의 다른 유용한 플러그인들을 탐색해보면서 프로젝트의 자동화를 강화해보세요