1. Node.js 설치: Grunt를 사용하기 위해 Node.js를 설치해야 합니다. Node.js 공식 웹사이트에서 다운로드 및 설치할 수 있습니다.

2. 프로젝트 폴더 생성: Grunt를 설정할 프로젝트 폴더를 생성합니다. 이 폴더에는 Gruntfile.js와 package.json 파일이 있어야 합니다.

3. package.json 파일 생성: 프로젝트 폴더에서 아래 명령을 실행하여 package.json 파일을 생성합니다.

npm init

이 명령은 프로젝트 정보를 설정하는 대화형 프롬프트를 제공합니다. 입력된 정보에 따라 package.json 파일이 생성됩니다.

1. Grunt 및 필요한 플러그인 설치: 프로젝트 폴더에서 아래 명령을 실행하여 Grunt 및 필요한 플러그인을 설치합니다. 이 예제에서는 grunt-contrib-watch 플러그인을 사용합니다.

npm install grunt grunt-contrib-watch --save-dev

위 명령은 Grunt와 grunt-contrib-watch 플러그인을 설치하고, package.json 파일의 devDependencies에 추가합니다.

1. Gruntfile.js 생성: 프로젝트 폴더에 Gruntfile.js 파일을 생성하고 아래와 같이 설정합니다.

module.exports = function(grunt) {
  grunt.initConfig({
    // Grunt 태스크 설정
    watch: {
      files: ['src/*.js'], // 감시할 파일 목록
      tasks: ['build'] // 변경 감지 시 실행할 태스크
    }
  });

  // Grunt 플러그인 로드
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 기본 태스크 설정
  grunt.registerTask('default', ['watch']);
};

위 설정에서는 watch 태스크를 설정하고, ‘src/*.js’ 패턴의 파일 변경을 감지하면 build 태스크가 실행됩니다. build 태스크는 실제로 소스 코드의 재빌드를 담당합니다. Gruntfile.js 파일에 다른 태스크도 추가할 수 있습니다.

1. Grunt 실행: 프로젝트 폴더에서 아래 명령을 실행하여 Grunt를 실행합니다.

grunt

Grunt는 watch 태스크를 실행하며, 소스 코드의 변경을 감지하면 자동으로 build 태스크를 실행하여 재빌드합니다.

이제 Grunt를 사용하여 소스코드 변경 감지와 자동 재빌드를 설정할 수 있습니다. Grunt를 사용하면 개발 중 소스 코드의 변화를 실시간으로 감지하고, 변경 사항을 자동으로 처리할 수 있어 개발 효율성을 크게 향상시킬 수 있습니다.

• Grunt 공식 사이트
• grunt-contrib-watch 플러그인