[javascript] Grunt를 사용하여 HTML 파일에서 정적 리소스 파일의 경로를 자동으로 수정하는 방법은 무엇인가요?

21 Nov 2023

javascript

먼저, 프로젝트 폴더에서 Grunt 및 관련 플러그인을 설치해야 합니다. 다음 명령어를 사용하여 필요한 패키지를 설치합니다.

npm install grunt --save-dev
npm install grunt-contrib-copy --save-dev

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

module.exports = function(grunt) {
  grunt.initConfig({
    copy: {
      main: {
        expand: true,
        cwd: 'src/',
        src: '**/*.html',
        dest: 'dist/'
      }
    },
    replace: {
      dist: {
        src: ['dist/**/*.html'],
        overwrite: true,
        replacements: [{
          from: /src="assets\//g,
          to: 'src="https://www.example.com/assets/'
        }]
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-text-replace');

  grunt.registerTask('default', ['copy', 'replace']);
};

위의 설정을 통해 src 폴더 내의 모든 HTML 파일을 dist 폴더로 복사한 후, src="assets/로 시작하는 경로들을 src="https://www.example.com/assets/로 변경합니다.

그 다음, 터미널에서 아래 명령어를 실행하여 Grunt 작업을 진행합니다.

grunt

위 명령어를 실행하면 Grunt는 HTML 파일을 복사하고, 정적 리소스 파일의 경로를 수정한 후 dist 폴더에 저장합니다.

자세한 내용은 Grunt의 공식 문서 (https://gruntjs.com/getting-started) 및 grunt-contrib-copy 및 grunt-text-replace 플러그인의 문서를 참고하시기 바랍니다.