1. Grunt 설치하기: Grunt를 사용하기 위해 Node.js와 npm이 설치되어 있어야 합니다. npm을 사용하여 Grunt를 전역으로 설치해 줍니다.

$ npm install -g grunt-cli

1. package.json 파일 생성하기: 프로젝트 루트 디렉토리에 package.json 파일을 생성합니다. 이 파일은 프로젝트에 필요한 의존성 패키지들을 정의하는데 사용됩니다. 다음 명령어를 실행하여 package.json 파일을 생성합니다.

$ npm init

위 명령어를 실행하면 몇 가지 질문이 나오는데, 필요에 따라 답변하고 엔터를 눌러주세요.

1. Grunt 플러그인 설치하기: Grunt 플러그인을 설치하여 프로젝트에 필요한 작업을 수행할 수 있습니다. 예를 들어, 모듈 번들링을 위해 grunt-contrib-concat 플러그인을 사용할 수 있습니다. 다음 명령어를 실행하여 이 플러그인을 설치합니다.

$ npm install grunt-contrib-concat --save-dev

--save-dev 옵션을 추가하여 개발 의존성으로 설정합니다.

1. Gruntfile.js 파일 생성하기: 프로젝트 루트 디렉토리에 Gruntfile.js 파일을 생성합니다. 이 파일에는 Grunt 작업의 구성이 정의됩니다. 다음과 같이 작성합니다.

module.exports = function(grunt) {
  grunt.initConfig({
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['src/module1.js', 'src/module2.js'],
        dest: 'dist/bundle.js',
      },
    },
  });

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

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

• concat 작업은 여러 파일을 하나로 병합하는 작업을 수행합니다. src 배열에 병합할 모듈 파일들의 경로를 지정하고, dest에는 결과 파일의 경로를 지정합니다.

• grunt-contrib-concat 플러그인을 사용하기 위해서는 grunt.loadNpmTasks('grunt-contrib-concat') 코드를 추가해야 합니다.

• grunt.registerTask('default', ['concat'])는 기본 작업으로 concat을 실행하도록 설정합니다.

1. Grunt 실행하기: 터미널에서 다음 명령어를 실행하여 Grunt를 실행합니다.

$ grunt

Grunt는 Gruntfile.js 내에서 정의된 작업들을 실행하고, 설정된 경로에 번들링된 파일을 생성합니다.

이제 각 모듈별로 번들링된 파일을 생성하고, 자동으로 모듈을 로드하는 Grunt 설정을 구성할 수 있습니다. 추가로 필요한 작업이 있다면 Grunt 플러그인을 찾아보고, Gruntfile.js에 작업을 추가해 주세요.

참고 문서:

• Grunt 공식 문서: https://gruntjs.com/
• grunt-contrib-concat 플러그인 문서: https://github.com/gruntjs/grunt-contrib-concat