หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

Dynamic Hugo Starter ใหม่ - การตั้งค่า Hugo Pipes พร้อมพัสดุ

โปรดทราบว่าการซื้อคืนนี้เกี่ยวข้องกับการสาธิตไปป์ไลน์สินทรัพย์เท่านั้น และไม่ถือเป็นการเริ่มต้นเต็มรูปแบบ ดำเนินการตามที่คุณต้องการ แต่โปรดจำไว้ว่าทุกสิ่งที่นี่ได้รับการออกแบบมาเพื่อขั้นตอนการทำงานภายในของเรา

เราใช้บันทึกการเปลี่ยนแปลงกับโครงการทั้งหมดของเรา โปรดดูไฟล์นั้นสำหรับการอัปเดต

เครื่องมือ

  • Hugo - กรอบงานเว็บไซต์สำหรับใช้งานทั่วไป—เขียนด้วยภาษา Go—ซึ่งสร้างหน้าเว็บแบบคงที่
  • Parcel - ตัวรวมเว็บแอปพลิเคชันที่ "โดดเด่น" รวดเร็วและไม่มีการกำหนดค่า
  • โพสต์ CSS | TailwindsCSS (ไลบรารีของคลาส CSS ที่ใช้ JS) | PurgeCSS (ลบ CSS ที่ไม่ได้ใช้)
  • KyleAMathews/แบบอักษร (โหลดแบบอักษร OS ในเครื่องโดย require เพียงเล็กน้อย)

ท่อส่ง Hugo Asset

การตั้งค่านี้ใช้ Parcel สำหรับ Javascript และการประมวลผลแบบอักษรโอเพนซอร์ส, Hugo Pipes + PostCSS สำหรับการประมวลผล CSS และ npm-run-all เพื่อเรียกใช้ Parcel และ Hugo พร้อมกัน (ดูหมายเหตุด้านล่าง) เราใช้ตัวจัดการแพ็คเกจ Yarn แต่คุณสามารถใช้ NPM ได้หากต้องการ

ไปป์ไลน์สินทรัพย์นี้เป็นการเปลี่ยนแปลงสำหรับเราจากการใช้ Webpack เพื่อประมวลผล JS/Fonts/CSS Parcel เป็นตัวรวมกลุ่มเหมือนกับ Webpack แต่เนื่องจากมีการกำหนดค่าที่เล็กกว่าและมีขนาดไฟล์น้อยกว่า และสร้างได้เร็วกว่า เนื่องจากมีความยืดหยุ่นน้อยกว่าเล็กน้อย จริงๆ แล้วไม่มีไฟล์การกำหนดค่า Parcel การเปลี่ยนไปใช้ Hugo เพื่อสร้าง CSS ทำให้ไซต์ Hugo ได้รับการพัฒนานอกกระบวนการสร้างภายนอก วิธีการนี้มีข้อเสีย ดังที่อธิบายไว้ด้านล่าง

หมายเหตุ:

  • การกำหนดค่านี้สร้างขึ้นบนสมมติฐานที่ว่า JS/แบบอักษรได้รับการประมวลผลในการพัฒนา ไม่ใช่การใช้งานจริง แม้ว่าจะใช้เวลาดำเนินการเพียงเล็กน้อยก็ตาม
  • สคริปต์ใน package.json มีการโหลดตัวแปรสภาพแวดล้อมด้วย cross-env ซึ่งเป็นทางเลือกสำหรับบางระบบ (ไม่ใช่ windows) และสามารถลบออกได้อย่างปลอดภัย เพียงแทนที่ cross-env NODE_ENV=development ด้วย NODE_ENV=development

จส

  • ใช้ตัวรวมพัสดุ
  • พัสดุส่งออกไปที่ assets/output/index.js
  • Hugo ใช้ในการพิมพ์ลายนิ้วมือและสร้างแฮชที่ปลอดภัยสำหรับ Subresource Integrity
    • หาก fileExists "./assets/output/index.js Hugo สร้างแฮชของไฟล์นั้นจาก layouts/_head/scripts.html
  • Hugo ส่งออกไฟล์ JS ที่ประมวลผลไปยัง public/output/index.min.[hash].js

ซีเอสเอส

  • ใช้ Hugo Pipes โดยใช้ PostCSS หมายเหตุ: เราใช้วิธีนี้เนื่องจากเราใช้ CSS ระดับยูทิลิตี้ ฉันขอแนะนำให้คุณใช้ Parcel เพื่อประมวลผล CSS ของคุณ ดู "วิธีสลับไปใช้ PostCSS แบบ JS" ด้านล่าง
  • ใช้ Parcel/PostCSS เป็นค่าเริ่มต้น ดู "วิธีเปลี่ยนไปใช้ PostCSS ที่ใช้ Hugo" ด้านล่าง

CSS ผ่าน Hugo

  • Hugo ประมวลผล assets/css/styles.css ด้วย assets/postcss.config.js โดยใช้ Imports, TailwindCSS, Autoprefixer และ PurgeCSS
  • หากมี NODE_ENV=development ในคำสั่ง build PostCSS จะไม่ประมวลผลไฟล์ผ่าน PurgeCSS
  • Hugo ส่งออกไฟล์ CSS ที่ประมวลผลแล้วไปที่ public/css/styles.min.[hash].css

CSS ผ่านพัสดุ

  • Parcel ประมวลผล assets/css/styles.css ด้วย assets/postcss.config.js โดยใช้ Imports, TailwindCSS, Autoprefixer และ PurgeCSS
  • หากมี NODE_ENV=development ในคำสั่ง build 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]

รูปภาพ

  • สินทรัพย์ที่จัดเก็บไว้ในบัคเก็ต S3 หรือภายในเครื่องไปยัง repo ซึ่งแปลงผ่าน Imgix

สิ่งที่ต้องทำ

  • บัญชีสำหรับทรัพยากรใน _header สำหรับการแคชและการโหลดล่วงหน้า (ใช้งานได้กับ Scratch)
  • ตรวจสอบให้แน่ใจว่าคำสั่ง package.json ของเราได้รับการตั้งค่าอย่างดี
  • กำหนดขั้นตอนการทำงานสำหรับการจัดการฟอนต์ที่ไม่ได้ถูกเรียกด้วยแพ็คเกจการพิมพ์ (เช่น ฟอนต์เชิงพาณิชย์)

ข้อดีและข้อเสียของการใช้ Hugo เพื่อประมวลผล PostCSS

ข้อดี

  • ไม่จำเป็นต้องรัน JS เพื่อเปลี่ยน CSS กำจัดความไม่ตรงกันในเวลาขณะสร้าง CSS
  • การอัปเดตจะเร็วขึ้นในการพัฒนา

ข้อเสีย

  • ต้องติดตั้งโมดูล Node เพื่อรัน Hugo
  • ต้องรัน PostCSS (พร้อมโมดูล Node) เพื่อสร้างการใช้งานจริงบนเซิร์ฟเวอร์ สร้าง CSS พร้อมทุกการเปลี่ยนแปลง
  • สร้างไฟล์ CSS แยกต่างหากสำหรับสไตล์หลัก นอกเหนือจากไฟล์ CSS ใดๆ ที่สร้างขึ้นสำหรับแบบอักษร

วิธีเปลี่ยนไปใช้ PostCSS ที่ใช้ Hugo

  • ลบไฟล์ CSS หลักไปที่ assets/index.js
  • เปลี่ยนการนำเข้า Tailwind เพื่อเรียก tailwind ผ่าน @import แทนที่จะเรียกโดยตรง
  • เปลี่ยน layouts/_head/stylesheets.html เพื่อใช้ Hugo (ดูความคิดเห็นในไฟล์นั้น)
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด