Grunt 파일은 주로 Gruntfile.js라는 이름으로 프로젝트 루트 디렉토리에 위치합니다. 해당 파일은 Grunt가 실행될 때 필요한 설정 정보와 태스크들이 정의되어 있습니다.

이제 Grunt 파일을 구성하는 방법에 대해 알아보겠습니다.

Grunt 설정 구성

Grunt 파일은 JavaScript 코드로 작성되며, 다음과 같은 구조를 가지고 있습니다.

module.exports = function(grunt) {
  // Grunt 설정
  grunt.initConfig({
    // 태스크 구성
  });

  // 플러그인 로드
  grunt.loadNpmTasks('plugin-name');

  // 태스크 등록
  grunt.registerTask('task-name', ['task1', 'task2']);

  // 기본 태스크 등록
  grunt.registerTask('default', ['task-name']);
};

module.exports를 사용하여 Gruntfile 모듈을 내보냅니다. 그리고 grunt.initConfig 메서드를 사용하여 Grunt 설정을 구성합니다. 여기에는 프로젝트의 태스크 구성이 들어갑니다.

태스크 구성

grunt.initConfig 메서드 내부에서는 다양한 태스크가 구성될 수 있습니다. 각 태스크는 이름과 해당 태스크에 필요한 설정 정보로 구성됩니다. 예를 들어, uglify 플러그인을 사용하여 JavaScript 파일을 압축하는 태스크를 구성하려면 다음과 같이 작성할 수 있습니다.

grunt.initConfig({
  uglify: {
    options: {
      mangle: true,
      compress: true
    },
    dist: {
      files: {
        'dist/main.min.js': ['src/main.js']
      }
    }
  }
});

위 예제에서 uglify는 태스크 이름이고, options 객체에서 압축 옵션을 설정합니다. dist 태스크는 files 객체를 사용하여 입력 파일과 출력 파일 경로를 지정합니다.

플러그인 로드

Grunt 파일에서 사용할 플러그인은 grunt.loadNpmTasks 메서드를 사용하여 로드해야 합니다. 이 메서드는 Grunt의 플러그인 이름을 전달받아 해당 플러그인을 로드합니다.

grunt.loadNpmTasks('plugin-name');

태스크 등록

Grunt 파일에서는 grunt.registerTask 메서드를 사용하여 태스크를 등록할 수 있습니다. 이 메서드는 태스크 이름과 실행될 태스크들의 배열을 전달받습니다.

grunt.registerTask('task-name', ['task1', 'task2']);

기본 태스크 등록

마지막으로, Grunt 파일에서는 grunt.registerTask 메서드를 사용하여 기본 태스크를 등록할 수 있습니다. 이 기본 태스크는 grunt 명령어를 실행했을 때 실행됩니다.

grunt.registerTask('default', ['task-name']);

이렇게 Grunt 파일을 구성하면 프로젝트의 빌드와 배포를 자동화하는데 도움이 됩니다. Grunt 플러그인을 사용하여 더욱 다양한 태스크를 추가할 수도 있습니다. Grunt 공식 문서에서 다양한 플러그인과 설정 옵션에 대해 더 자세히 알아보시기 바랍니다.

참고 문서: Grunt 공식 사이트