Salin dan Bagikan
Hugo Hugo Pipes Asset Pipeline
Hugo Pipes Lengkap: Asset Pipeline untuk CSS JS dan Images - Tutorial lengkap Hugo Pipes untuk asset pipeline. CSS dengan PostCSS, JavaScript bundling, image …

Hugo Pipes Lengkap: Asset Pipeline untuk CSS JS dan Images

Hugo Pipes Lengkap: Asset Pipeline untuk CSS JS dan Images

Hugo Pipes adalah asset pipeline built-in yang memungkinkan Anda memproses CSS, JavaScript, dan images secara efisien tanpa tools eksternal seperti Webpack atau Gulp.

Apa itu Hugo Pipes?

Hugo Pipes adalah fitur untuk mengambil assets dari folder assets/ dan memprosesnya melalui berbagai transformasi sebelum di-include dalam site Anda.

Supported Assets

  • CSS: PostCSS, Sass/SCSS, CSS minification
  • JavaScript: ESBuild bundling, minification
  • Images: Resize, crop, format conversion, filtering
  • Other: JSON, YAML, TOML processing

Basic Hugo Pipes Workflow

1. CSS dengan PostCSS

<!-- layouts/partials/head.html -->
{{ $css := resources.Get "css/main.css" }}
{{ $css = $css | resources.PostCSS }}
{{ if hugo.IsProduction }}
  {{ $css = $css | resources.Minify | resources.Fingerprint }}
{{ end }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $css.Data.Integrity }}"{{ end }}>

2. JavaScript dengan ESBuild

<!-- layouts/partials/footer.html -->
{{ $js := resources.Get "js/main.js" }}
{{ $js = $js | resources.Minify }}
{{ if hugo.IsProduction }}
  {{ $js = $js | resources.Fingerprint }}
{{ end }}
<script src="{{ $js.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }} defer></script>

Advanced CSS Processing

1. SCSS/Sass Support

File assets/scss/main.scss:

@import "variables";
@import "mixins";

body {
  font-family: $font-family-base;
  background-color: $body-bg;
}

.hero {
  @include responsive-padding;
  background: linear-gradient(135deg, $primary-color, $secondary-color);
}

Template:

{{ $scss := resources.Get "scss/main.scss" }}
{{ $style := $scss | resources.ToCSS (dict "targetPath" "css/style.css" "enableSourceMap" true) }}
{{ if hugo.IsProduction }}
  {{ $style = $style | resources.Minify | resources.Fingerprint }}
{{ end }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

2. Tailwind CSS Processing

{{ $css := resources.Get "css/main.css" }}
{{ $css = $css | resources.PostCSS }}
{{ if hugo.IsProduction }}
  {{ $css = $css | resources.Minify | resources.Fingerprint }}
{{ end }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

3. CSS Purging (Critical CSS)

{{ $css := resources.Get "css/main.css" }}
{{ $css = $css | resources.PostCSS }}

<!-- Critical CSS (inline) -->
{{ $critical := $css | resources.Minify }}
<style>{{ $critical.Content | safeCSS }}</style>

<!-- Non-critical CSS (async load) -->
{{ $nonCritical := $css }}
<link rel="preload" href="{{ $nonCritical.RelPermalink }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="{{ $nonCritical.RelPermalink }}"></noscript>

JavaScript Processing

1. ESBuild Bundling

{{ $js := resources.Get "js/main.js" }}
{{ $js = $js | resources.Minify }}
{{ if hugo.IsProduction }}
  {{ $js = $js | resources.Fingerprint }}
{{ end }}
<script src="{{ $js.RelPermalink }}" defer></script>

2. Multiple Files Bundling

{{ $js := slice
  (resources.Get "js/header.js")
  (resources.Get "js/navigation.js")
  (resources.Get "js/search.js")
  | resources.Concat "js/bundle.js"
  | resources.Minify
}}
{{ if hugo.IsProduction }}
  {{ $js = $js | resources.Fingerprint }}
{{ end }}
<script src="{{ $js.RelPermalink }}" defer></script>

3. Conditional Loading

{{ if .IsHome }}
  {{ $homeJs := resources.Get "js/home.js" | resources.Minify }}
  <script src="{{ $homeJs.RelPermalink }}" defer></script>
{{ end }}

{{ if eq .Type "blog" }}
  {{ $blogJs := resources.Get "js/blog.js" | resources.Minify }}
  <script src="{{ $blogJs.RelPermalink }}" defer></script>
{{ end }}

Image Processing dengan Hugo Pipes

1. Basic Image Resize

{{ $image := resources.Get "images/photo.jpg" }}
{{ $resized := $image.Resize "800x" }}
<img src="{{ $resized.RelPermalink }}" alt="Photo" width="{{ $resized.Width }}" height="{{ $resized.Height }}">

2. Responsive Images

{{ $image := resources.Get "images/hero.jpg" }}
{{ $small := $image.Resize "400x webp" }}
{{ $medium := $image.Resize "800x webp" }}
{{ $large := $image.Resize "1200x webp" }}

<picture>
  <source srcset="{{ $small.RelPermalink }} 400w, {{ $medium.RelPermalink }} 800w, {{ $large.RelPermalink }} 1200w" sizes="100vw" type="image/webp">
  <img src="{{ $medium.RelPermalink }}" alt="Hero" loading="lazy">
</picture>

3. Image Filters

{{ $image := resources.Get "images/photo.jpg" }}
{{ $grayscale := $image | images.Filter (images.Grayscale) }}
{{ $blurred := $image | images.Filter (images.GaussianBlur 6) }}
<img src="{{ $grayscale.RelPermalink }}" alt="Grayscale">

Resources Bundling dan Fingerprinting

1. Concatenation

{{ $bundle := slice
  (resources.Get "css/reset.css")
  (resources.Get "css/base.css")
  (resources.Get "css/components.css")
  | resources.Concat "css/bundle.css"
  | resources.Minify
  | resources.Fingerprint
}}
<link rel="stylesheet" href="{{ $bundle.RelPermalink }}" integrity="{{ $bundle.Data.Integrity }}">

2. Fingerprinting untuk Cache Busting

{{ $css := resources.Get "css/main.css" | resources.Minify }}
{{ $css = $css | resources.Fingerprint "sha512" }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">

<!-- Output: /css/main.css?sha512=abc123... -->

3. FromString (Inline Content)

{{ $inlineCSS := "body { color: red; }" | resources.FromString "inline.css" | resources.Minify }}
<style>{{ $inlineCSS.Content | safeCSS }}</style>

Best Practices Hugo Pipes

1. Production vs Development

{{ if hugo.IsProduction }}
  {{ $css := resources.Get "css/main.css" | resources.Minify | resources.Fingerprint }}
  <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
{{ else }}
  {{ $css := resources.Get "css/main.css" }}
  <link rel="stylesheet" href="{{ $css.RelPermalink }}">
{{ end }}

2. Asset Organization

assets/
├── css/
│   ├── main.css
│   ├── components/
│   │   ├── buttons.css
│   │   └── cards.css
│   └── utils/
│       └── variables.css
├── js/
│   ├── main.js
│   ├── components/
│   │   ├── navigation.js
│   │   └── search.js
│   └── utils/
│       └── helpers.js
└── images/
    └── (untuk resources.Get)

3. Cache Configuration

# hugo.toml
[imaging]
  quality = 75
  resampleFilter = "lanczos"

[minify]
  disableCSS = false
  disableHTML = false
  disableJS = false

Kesimpulan

Hugo Pipes menyediakan asset pipeline yang powerful dan terintegrasi:

✅ No external tools: Tidak perlu Webpack, Gulp, atau Grunt
✅ Fast builds: Processing dilakukan dalam Hugo binary
✅ Production ready: Minification dan fingerprinting built-in
✅ Flexible: Support SCSS, PostCSS, ESBuild
✅ Image processing: Resize, filter, format conversion

Gunakan Hugo Pipes untuk workflow asset management yang streamlined dan efisien.

Artikel Terkait

Link Postingan : https://www.tirinfo.com/hugo-pipes-asset-pipeline/

Hendra WIjaya
Tirinfo
4 minutes.
3 February 2026