Grunt는 자바스크립트 작업 자동화 도구로, 여러 가지 작업을 편리하게 수행할 수 있습니다. 그 중에서도 자바스크립트 파일을 압축하는 작업은 성능 최적화 및 배포용 파일 준비에 매우 유용합니다. 아래는 Grunt를 사용해 자바스크립트 파일을 압축하는 단계별 방법입니다.

1. Grunt 설치

Grunt를 사용하기 위해 우선 Grunt CLI(Command Line Interface)를 전역으로 설치해야 합니다. 다음 명령어를 터미널에서 실행하여 설치합니다.

npm install -g grunt-cli

2. 프로젝트 폴더 생성 및 설정 파일 작성

Grunt 작업을 수행할 프로젝트 폴더를 생성하고, 해당 폴더에서 아래 명령어를 통해 package.json 파일을 생성합니다.

npm init

package.json 파일에는 프로젝트의 정보와 종속성(dependencies) 등이 기록됩니다. 그리고 프로젝트 폴더 내에 Gruntfile.js 파일을 생성하고 아래 코드를 추가합니다.

module.exports = function(grunt) {
  grunt.initConfig({
    uglify: {
      my_target: {
        files: {
          'dist/main.min.js': ['src/main.js']
        }
      }
    }
  });
  
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.registerTask('default', ['uglify']);
};

위 코드에서 uglify는 Grunt의 플러그인 중 하나로, 자바스크립트 파일을 압축해주는 역할을 담당합니다. 설정파일에서는 uglify 플러그인을 초기화하고, files 속성을 통해 압축 전 파일(src/main.js)과 압축 후 파일(dist/main.min.js)을 지정합니다.

3. Grunt 플러그인 설치

압축 기능을 제공하는 uglify 플러그인을 설치합니다. 프로젝트 폴더에서 아래 명령어를 실행합니다.

npm install grunt-contrib-uglify --save-dev

4. 압축 실행

압축 작업을 실행하기 위해 터미널에서 다음 명령어를 실행합니다.

grunt

위 명령어를 실행하면 Gruntfile.js에 설정된 압축 작업이 수행되고, src/main.js 파일이 dist/main.min.js로 압축됩니다.

자바스크립트 파일을 압축하는 방법을 Grunt를 통해 간단히 수행할 수 있습니다. Grunt를 사용하면 다양한 작업을 자동화하여 개발 작업 효율성을 높일 수 있으니, 다른 작업에도 적용해 보시기 바랍니다.

참고 자료

• Grunt 공식 사이트: https://gruntjs.com/
• Grunt Uglify 플러그인: https://github.com/gruntjs/grunt-contrib-uglify