[javascript] Grunt를 사용하여 프로젝트 소스 코드를 자동으로 포맷팅하는 방법은 무엇인가요?

21 Nov 2023

javascript

Grunt 설치하기:
```
npm install -g grunt-cli
```
프로젝트 폴더로 이동하여 다음 명령어를 실행하여 Grunt를 초기화합니다:
```
npm init
```
Grunt 플러그인 설치하기: 코드 포맷팅을 위해 grunt-contrib-jshint와 grunt-contrib-uglify 플러그인을 설치합니다. 다음 명령어를 실행합니다:
```
npm install grunt-contrib-jshint grunt-contrib-uglify --save-dev
```

Gruntfile.js 생성하기: 프로젝트 폴더에 Gruntfile.js라는 파일을 생성합니다. 해당 파일에 다음 코드를 추가합니다:

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      all: ['src/**/*.js']  // 체크할 JavaScript 파일의 경로를 설정합니다.
    },
    uglify: {
      options: {
        compress: true,
        mangle: true
      },
      build: {
        files: {
          'dist/output.min.js': ['src/**/*.js']  // 소스 파일 경로와 빌드된 파일 경로를 설정합니다.
        }
      }
    }
  });

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

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

코드 포맷팅 실행하기: 프로젝트 폴더에서 다음 명령어를 실행하여 코드를 포맷팅합니다:
```
grunt
```

위의 단계를 따르면 Grunt를 사용하여 프로젝트 소스 코드를 자동으로 포맷팅할 수 있습니다. 문법 검사를 위해 JSHint를 사용하고, 코드 압축을 위해 Uglify를 사용합니다. 필요에 따라 Gruntfile.js 파일을 수정하여 다른 작업을 수행할 수도 있습니다.

더 자세한 내용은 다음 참고 자료를 참고하세요:

Grunt 공식 문서: https://gruntjs.com/
Grunt-contrib-jshint: https://github.com/gruntjs/grunt-contrib-jshint
Grunt-contrib-uglify: https://github.com/gruntjs/grunt-contrib-uglify