Grunt에서 이미지 스프라이트를 생성하기 위해, 다음과 같은 단계를 수행해야 합니다.

1. Grunt를 설치합니다. 다음 명령어를 사용하여 전역으로 설치할 수 있습니다:

npm install -g grunt-cli

1. 프로젝트 디렉토리에 package.json 파일을 생성합니다. 다음 명령어를 실행하여 기본 package.json 파일을 생성할 수 있습니다:

npm init

1. 필요한 Grunt 플러그인을 설치합니다. 이미지 스프라이트를 생성하려면 grunt-spritesmith 플러그인이 필요합니다. 다음 명령어를 사용하여 설치할 수 있습니다:

npm install grunt-spritesmith --save-dev

1. Gruntfile.js 파일을 프로젝트 디렉토리에 생성합니다. 이 파일에 Grunt 작업을 정의합니다. 다음 예제는 grunt-spritesmith 플러그인을 사용하여 이미지 스프라이트를 생성하는 Grunt 작업을 정의하는 예입니다:

module.exports = function(grunt) {
  grunt.initConfig({
    spritesmith: {
      sprite: {
        src: 'path/to/images/*.png',
        dest: 'path/to/sprite.png',
        destCss: 'path/to/sprite.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-spritesmith');
  
  grunt.registerTask('default', ['spritesmith']);
};

1. 위의 예제에서 src에는 스프라이트로 만들 이미지 파일들의 경로를, dest에는 생성될 스프라이트 이미지의 경로를, destCss에는 생성될 CSS 파일의 경로를 지정합니다.

2. 명령어 grunt를 실행하여 Grunt 작업을 수행합니다. 이 명령어는 Gruntfile.js에 정의된 default 작업을 실행하게 됩니다. 콘솔에 스프라이트 생성에 대한 로그가 표시될 것입니다.

이제 이미지 스프라이트 생성을 위한 Grunt 작업이 준비되었습니다. 웹 페이지에서 스프라이트 이미지와 관련된 CSS를 사용하여 이미지를 표시할 수 있습니다.