먼저, 프로젝트의 루트 폴더에서 npm init 명령어를 실행하여 package.json 파일을 생성해야 합니다. package.json 파일에는 프로젝트의 의존성 관리와 Grunt 플러그인 설치에 필요한 정보가 포함됩니다.

이후, Grunt를 설치해야 합니다. npm install -g grunt-cli 명령어를 실행하여 전역으로 Grunt CLI를 설치하세요. 그리고 프로젝트의 개발 의존성에 Grunt를 추가하기 위해 npm install grunt --save-dev 명령어를 실행하세요.

Grunt를 사용하여 자바스크립트 파일을 패키징하고 모듈화하기 위해 Gruntfile.js 파일을 생성하세요. 이 파일은 Grunt의 구성 및 작업을 정의하는 역할을 합니다.

아래는 Gruntfile.js 파일의 예시입니다.

module.exports = function(grunt) {
  // Grunt의 구성 섹션
  grunt.initConfig({
    // 패키징할 자바스크립트 파일의 경로
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/bundle.js',
      },
    },
    // 모듈화된 자바스크립트 파일을 하나로 압축
    uglify: {
      dist: {
        src: ['dist/bundle.js'],
        dest: 'dist/bundle.min.js',
      },
    },
  });
  
  // Grunt 플러그인 로드
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Grunt 작업 등록
  grunt.registerTask('default', ['concat', 'uglify']);
};

위 예시에서는 concat 작업과 uglify 작업을 정의하였습니다. concat 작업은 src 폴더 내 모든 자바스크립트 파일을 하나의 파일로 합치며, uglify 작업은 합쳐진 파일을 압축하는 역할을 합니다.

실행 가능한 Grunt 작업을 만들기 위해 grunt.registerTask 함수를 사용하여 작업을 등록하세요. 위 예시에서는 default라는 작업을 등록하였습니다. 이 작업은 concat과 uglify를 차례대로 실행합니다.

마지막으로, 터미널에서 grunt 명령어를 실행하여 Grunt를 실행하세요. Grunt는 설정된 작업을 실행하고 자바스크립트 파일을 패키징하고 모듈화합니다.

이렇게하면 Grunt를 사용하여 자바스크립트 파일의 패키징과 모듈화를 자동으로 처리할 수 있습니다. 자세한 내용은 Grunt 공식 문서를 참조하세요.

참조:

• Grunt 공식 문서