먼저, Grunt를 설치해야 합니다. 프로젝트 루트 디렉토리에서 아래 명령어를 실행하여 Grunt CLI를 전역으로 설치합니다.

npm install -g grunt-cli

다음으로, 프로젝트 디렉토리에서 package.json 파일을 생성하고 필요한 Grunt 플러그인과 의존성을 설정합니다.

{
  "name": "my-project",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.4.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-uglify": "^5.0.0",
    // 필요한 플러그인 추가
  }
}

이제 Gruntfile.js 파일을 생성하여 Grunt의 구성을 정의합니다. 아래는 간단한 예시입니다.

module.exports = function(grunt) {
  grunt.initConfig({
    concat: {
      dist: {
        src: ['src/*.js'], // 병합할 소스 파일 경로
        dest: 'dist/bundle.js' // 결과 파일 경로
      }
    },
    uglify: {
      dist: {
        src: ['dist/bundle.js'], // 압축할 파일 경로
        dest: 'dist/bundle.min.js' // 결과 파일 경로
      }
    }
  });

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

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

위 설정에서는 concat 플러그인을 사용하여 src 디렉토리에 있는 JavaScript 파일을 dist/bundle.js로 병합하고, uglify 플러그인을 사용하여 압축하여 dist/bundle.min.js 파일을 생성합니다. Gruntfile.js 파일에서는 필요한 플러그인을 grunt.loadNpmTasks()로 로드하고, grunt.registerTask()로 실행할 작업을 등록합니다.

이제 커맨드 라인에서 grunt 명령어를 실행하면 설정된 작업들이 실행되어 정의된 빌드 과정이 수행됩니다. 필요에 따라 빌드 환경에 따라 다른 Task들을 추가로 설정할 수 있습니다.

Grunt를 사용하여 프로젝트의 디렉토리 구조를 유지하고, 각각의 빌드 환경에 맞게 설정할 수 있습니다. 자세한 내용은 Grunt의 공식 문서를 참조하시기 바랍니다.