hugo pipes parcel

Hugo Starter Dinamis Baru - Pengaturan Pipa Hugo dengan Parcel.

Perhatikan bahwa repo ini hanya berkaitan dengan mendemonstrasikan saluran aset dan tidak dianggap sebagai permulaan penuh. Lakukan sesuai keinginan Anda, namun perlu diingat bahwa semua yang ada di sini dirancang untuk alur kerja internal kami.

Kami menggunakan Changelog di semua proyek kami. Silakan lihat file itu untuk pembaruan.

peralatan

• Hugo - Kerangka situs web tujuan umum—ditulis dalam Go—yang menghasilkan halaman web statis.
• Parcel - Bundel aplikasi web tanpa konfigurasi yang sangat cepat dan tanpa konfigurasi.
• PascaCSS | TailwindsCSS (perpustakaan kelas CSS berbasis JS) | PurgeCSS (menghapus CSS yang tidak digunakan)
• KyleAMathews/tipografi (memuat font OS secara lokal dengan satu require kecil)

Saluran Aset Hugo

Pengaturan ini menggunakan Parcel untuk Javascript dan pemrosesan font sumber terbuka, Hugo Pipes + PostCSS untuk pemrosesan CSS, dan npm-run-all untuk menjalankan Parcel dan Hugo secara paralel (lihat catatan di bawah). Kami menggunakan manajer paket Yarn, tetapi Anda dapat menggunakan NPM jika Anda mau.

Saluran aset ini merupakan peralihan bagi kami dari menggunakan Webpack ke memproses JS/Fonts/CSS. Parcel adalah bundler seperti Webpack, namun sebagai imbalan atas fleksibilitas yang sedikit lebih rendah, Parcel memiliki konfigurasi dan jejak file yang lebih kecil serta pembuatannya lebih cepat; sebenarnya, tidak ada file konfigurasi Parcel. Peralihan penggunaan Hugo untuk membangun CSS memungkinkan situs Hugo dikembangkan di luar proses pembangunan eksternal. Terdapat kelemahan dalam pendekatan ini, sebagaimana diuraikan di bawah ini.

Catatan:

• Konfigurasi ini dibangun berdasarkan asumsi bahwa JS/Font diproses dalam pengembangan, bukan produksi, meskipun hal ini memerlukan sedikit usaha untuk melakukannya.
• Skrip di package.json menyertakan pemuatan variabel lingkungan dengan cross-env yang bersifat opsional untuk beberapa sistem (bukan windows) dan dapat dihapus dengan aman. Ganti saja cross-env NODE_ENV=development dengan NODE_ENV=development

JS

• Menggunakan Paket Paket.
• Parcel output ke assets/output/index.js .
• Hugo digunakan untuk mengambil sidik jari dan membuat hash aman untuk Integritas Subsumberdaya.
  • Jika fileExists "./assets/output/index.js Hugo membuat hash file itu dari layouts/_head/scripts.html .
• Hugo mengeluarkan file JS yang diproses ke public/output/index.min.[hash].js .

CSS

• Menggunakan Pipa Hugo, memanfaatkan PostCSS. CATATAN: kami menggunakan metode ini karena kami menggunakan CSS kelas utilitas. Saya menyarankan Anda menggunakan Parcel untuk memproses CSS Anda. Lihat "Cara Beralih menjalankan PostCSS berbasis JS" di bawah.
• Menggunakan Parcel/PostCSS sebagai default. Lihat "Cara Beralih ke PostCSS berbasis Hugo" di bawah.

CSS melalui Hugo

• Hugo memproses assets/css/styles.css dengan assets/postcss.config.js , memanfaatkan Impor, TailwindCSS, Autoprefixer, dan PurgeCSS.
• Jika NODE_ENV=development ada dalam perintah build, PostCSS TIDAK akan memproses file melalui PurgeCSS.
• Hugo mengeluarkan file CSS yang telah diproses ke public/css/styles.min.[hash].css .

CSS melalui Paket

• Parcel memproses assets/css/styles.css dengan assets/postcss.config.js , memanfaatkan Impor, TailwindCSS, Autoprefixer, dan PurgeCSS.
• Jika NODE_ENV=development ada dalam perintah build, PostCSS TIDAK akan memproses file melalui PurgeCSS.
• Hugo mengeluarkan file CSS yang diproses ke assets/output/index.[hash].css .

font

• Font sumber terbuka melalui Typefaces menggunakan Parcel Bundler.
• Parcel mengeluarkan CSS ke assets/output/index.css dan juga meletakkan file font, yang di-hash, di direktori yang sama.
• Hugo Pipes memproses file ke direktori publik dan membuat tautan Prefetch.
  • Jika fileExists "./assets/output/index.css Hugo membuat tautan prefetch dari layouts/_head/stylesheets.html .
• Hugo mengeluarkan font dan file CSS yang diproses ke public/output/index.min.[hash].css dan public/output/font-name.[hash].woff[2] .

Gambar

• Aset yang disimpan dalam bucket S3 atau lokal ke repo, diubah melalui Imgix.

TODO

• Perhitungkan sumber daya di _header untuk caching dan pramuat (apakah Scratch layak).
• Pastikan perintah package.json kita sudah diatur dengan baik.
• Tentukan alur kerja untuk mengelola font yang tidak dipanggil dengan paket typogpraphy (yaitu font komersial).

Pro dan kontra menggunakan Hugo untuk memproses PostCSS

Kelebihan

• Tidak perlu menjalankan JS untuk mengubah CSS, menghilangkan ketidakcocokan waktu saat membuat CSS.
• Pembaruan lebih cepat dalam pengembangan.

kontra

• Harus Menginstal modul Node hanya untuk menjalankan Hugo.
• Harus menjalankan PostCSS (dengan modul Node) untuk membangun produksi di server, membangun CSS dengan setiap perubahan.
• Membuat file CSS terpisah untuk gaya utama selain dari file CSS apa pun yang dibuat untuk font.

Cara Beralih menjalankan PostCSS berbasis Hugo

• Hapus file CSS utama ke assets/index.js .
• Ubah impor Tailwind untuk memanggil tailwind melalui @import, bukan secara langsung.
• Ubah file CSS awal layouts/_head/stylesheets.html untuk menggunakan Hugo (lihat komentar di file itu).