hugo pipes parcel

새로운 Dynamic Hugo Starter - Parcel을 사용한 Hugo Pipes 설정.

이 저장소는 자산 파이프라인을 시연하는 데에만 관심이 있으며 완전한 시작으로 간주되지는 않습니다. 원하는 대로 하세요. 하지만 여기에 있는 모든 내용은 내부 작업 흐름을 위해 설계되었다는 점을 명심하세요.

우리는 모든 프로젝트에 Changelog를 사용합니다. 업데이트는 해당 파일을 참조하세요.

도구

• Hugo - Go로 작성되어 정적 웹페이지를 생성하는 범용 웹사이트 프레임워크입니다.
• Parcel - "매우 빠르고" 구성이 필요 없는 웹 애플리케이션 번들러입니다.
• 포스트CSS | TailwindsCSS(JS 기반 CSS 클래스 라이브러리) | PurgeCSS(사용하지 않는 CSS 제거)
• KyleAMathews/typefaces(약간의 require 으로 로컬에서 OS 글꼴 로드)

휴고 에셋 파이프라인

이 설정은 Javascript 및 오픈 소스 글꼴 처리를 위해 Parcel을, CSS 처리를 위해 Hugo Pipes + PostCSS를, 그리고 Parcel과 Hugo를 병렬로 실행하기 위해 npm-run-all 활용합니다(아래 참고 참조). 우리는 Yarn 패키지 관리자를 사용하지만 원한다면 NPM을 사용할 수도 있습니다.

이 자산 파이프라인은 Webpack을 사용하여 JS/Fonts/CSS를 처리하는 전환입니다. Parcel은 Webpack과 같은 번들러이지만 유연성이 약간 떨어지는 대신 구성과 파일 공간이 더 작고 빌드 속도가 더 빠릅니다. 실제로 Parcel 구성 파일은 없습니다. Hugo를 사용하여 CSS를 구축하는 방식으로 전환하면 Hugo 사이트를 외부 빌드 프로세스 외부에서 개발할 수 있습니다. 아래에 설명된 대로 이 접근 방식에는 단점이 있습니다.

참고:

• 이 구성은 JS/글꼴이 프로덕션이 아닌 개발 단계에서 처리된다는 가정을 바탕으로 구축되었습니다. 단, 최소한의 노력만 필요합니다.
• package.json 의 스크립트에는 일부 시스템(Windows 아님)의 경우 선택 사항이며 안전하게 제거할 수 있는 cross-env 통한 환경 변수 로드가 포함되어 있습니다. cross-env NODE_ENV=development NODE_ENV=development 로 바꾸세요.

JS

• Parcel Bundler를 사용합니다.
• Parcel은 assets/output/index.js 로 출력됩니다.
• Hugo는 하위 리소스 무결성을 위한 보안 해시를 지문화하고 생성하는 데 사용됩니다.
  • fileExists "./assets/output/index.js 인 경우 Hugo는 layouts/_head/scripts.html 에서 해당 파일의 해시를 생성합니다.
• Hugo는 처리된 JS 파일을 public/output/index.min.[hash].js 로 출력합니다.

CSS

• PostCSS를 활용하여 Hugo Pipes를 사용합니다. 참고: 우리는 유틸리티 클래스 CSS를 사용하기 때문에 이 방법을 사용합니다. 그렇지 않으면 Parcel을 사용하여 CSS를 처리하는 것이 좋습니다. 아래의 "JS 기반 PostCSS 실행으로 전환하는 방법"을 참조하세요.
• Parcel/PostCSS를 기본값으로 사용합니다. 아래의 "Hugo 기반 PostCSS로 전환하는 방법"을 참조하세요.

Hugo를 통한 CSS

• Hugo는 Imports, TailwindCSS, Autoprefixer 및 PurgeCSS를 활용하여 assets/postcss.config.js 로 assets/css/styles.css 처리합니다.
• NODE_ENV=development 빌드 명령에 있으면 PostCSS는 PurgeCSS를 통해 파일을 처리하지 않습니다.
• Hugo는 처리된 CSS 파일을 public/css/styles.min.[hash].css 에 출력합니다.

소포를 통한 CSS

• Parcel은 Imports, TailwindCSS, Autoprefixer 및 PurgeCSS를 활용하여 assets/postcss.config.js 사용하여 assets/css/styles.css 처리합니다.
• NODE_ENV=development 빌드 명령에 있으면 PostCSS는 PurgeCSS를 통해 파일을 처리하지 않습니다.
• Hugo는 처리된 CSS 파일을 assets/output/index.[hash].css 로 출력합니다.

글꼴

• Typefaces를 통한 오픈 소스 글꼴은 Parcel Bundler를 사용합니다.
• Parcel은 CSS를 assets/output/index.css 에 출력하고 해시된 글꼴 파일도 동일한 디렉터리에 저장합니다.
• Hugo Pipes는 파일을 공용 디렉토리로 처리하고 프리페치 링크를 생성합니다.
  • fileExists "./assets/output/index.css 인 경우 Hugo는 layouts/_head/stylesheets.html 에서 프리페치 링크를 생성합니다.
• Hugo는 처리된 글꼴과 CSS 파일을 public/output/index.min.[hash].css 및 public/output/font-name.[hash].woff[2] 출력합니다.

이미지

• Imgix를 통해 변환된 S3 버킷 또는 리포지토리 로컬에 저장된 자산입니다.

TODO

• 캐싱 및 사전 로드를 위해 _header의 리소스를 고려합니다(스크래치 실행 가능).
• package.json 명령이 제대로 설정되었는지 확인하세요.
• typogpraphy 패키지로 호출되지 않는 글꼴(예: 상업용 글꼴)을 관리하기 위한 작업 흐름을 결정합니다.

PostCSS를 처리하기 위해 Hugo를 사용할 때의 장단점

장점

• CSS를 변경하기 위해 JS를 실행할 필요가 없으므로 CSS를 작성하는 동안 타이밍 불일치가 제거됩니다.
• 업데이트 개발 속도가 빨라졌습니다.

단점

• Hugo를 실행하려면 노드 모듈을 설치해야 합니다.
• 서버에서 프로덕션 환경에서 빌드하려면 PostCSS(노드 모듈 포함)를 실행해야 하며 모든 변경 사항에 대해 CSS를 빌드해야 합니다.
• 글꼴용으로 생성된 CSS 파일과 별도로 기본 스타일에 대한 별도의 CSS 파일을 생성합니다.

Hugo 기반 PostCSS 실행으로 전환하는 방법

• assets/index.js 에서 기본 CSS 파일을 제거합니다.
• Tailwind 가져오기를 직접 호출하는 대신 @import를 통해 tailwind를 호출하도록 변경하세요.
• Hugo를 사용하도록 초기 CSS 파일 layouts/_head/stylesheets.html 변경합니다(해당 파일의 주석 참조).