RevealJS 프레젠테이션을 패키징하고 게시하는 방법

이 기사는 원래 my personal blog에 게시되었습니다.
...
얼마 전 나는 React에서 일하는 팀원들에게 프레젠테이션을 하라는 요청을 받았습니다. 저는 항상 대부분의 사람들이 강연에서 프레젠테이션을 하는 방식에 매료되어 어떻게 프레젠테이션을 하는지 연구하게 되었습니다. 절대 승자는 RevealJS 입니다.

내가 그것을 선호하게 만든 몇 가지

문서에서 모든 기능과 측면을 다루었습니다.

프레임워크 자체에는 훌륭한 출발점을 제공하는 모든 사용 사례를 다루는 포괄적인 여러 예제가 포함되어 있습니다.

문서에서 언급했듯이 프레임워크를 설치하고 사용하는 가장 좋은 방법은 이 명령을 사용하여 저장소를 복제하는 것입니다.$ git clone https://github.com/hakimel/reveal.js.git전체 리포지토리를 복제할 때 좋은 점은 기능을 보여주는 완전한 예제 폴더와 RevealJS Holy Grail을 고려한 데모 프레젠테이션을 얻을 수 있다는 것입니다. 내 전체 프레젠테이션 스타일이 데모 프레젠테이션에서 복사되었다고 말하지 않았다면 거짓말일 것입니다. .
RevealJS는 빌드 및 개발에 gulp을 사용합니다.
gulpfile을 진행하는 동안 우연히 발견한 숨겨진 기능 중 하나는 package라는 작업으로 프레젠테이션을 빌드하고 패키징할 수 있으며 이제 게시할 준비가 되었습니다. 슬프게도 그것을 시도했을 때 예상대로 작동하지 않아 몇 가지 변경을 해야 했습니다. 문제는 모든 프레임워크 파일과 index.html을 캡처한다는 것입니다. 귀하의 프레젠테이션이 포함되어 있습니다. 게시할 준비가 된 패키지 zip 파일을 만듭니다. 게시된 버전을 시도하면 index.html 내부의 모든 참조가 올바른 위치를 가리키지 않기 때문에 버전이 손상되었음을 알 수 있습니다. 따라서 게시된 인덱스의 모든 CSS 및 js 참조를 업데이트하거나 올바른 폴더 구조를 가진 파일을 추가하도록 패키지 작업을 수정하는 두 가지 옵션 중 하나가 남아 있습니다.

gulp 작업은 폴더 경로 작성 버그로 인해 상위 폴더를 복사하지 않고 내부 파일/폴더만 복사하므로 다음과 같이 정의되었습니다.

gulp.task('package', gulp.series('default', () =>
    gulp.src([
        './index.html',
        './dist/**',
        './plugin/**',
        './**.md'
    ]).pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
))

그러나 존경받는 dist 및 플러그인 상위 폴더도 원했기 때문에 경로를 특정 위치 대신 와일드 카드로 변경해야 합니다. 따라서 업데이트된 버전은

gulp.task(
  "package",
  gulp.series("default", () =>
    gulp
      .src([
        "index.html",
        "*dist/**/*",
        "*media/**/*",
        "*plugin/**/*",
        "*markdown/**/*",
      ])
      .pipe(zip("reveal-js-presentation.zip"))
      .pipe(gulp.dest("./"))
  )
);

파일을 정리한 폴더도 몇 개 더 포함했습니다.

이제 마지막으로 할 일은 "package": "gulp package" 줄을 추가하여 패키지 스크립트를 포함하도록 package.json 파일을 업데이트하고 작업이 완료된 후 명령npm run package을 실행하는 것입니다. 프리젠테이션을 하고 어디에서나 게시할 수 있습니다.