Chapter 7
Managing Assets with Pipes

A website is more than just its content. Stylesheets, images, and JavaScript bring a site to life, but managing these assets can be tricky.

When you’re getting your site ready for production, you’re looking for ways to make the experience better for your visitors. To improve speed, it’s common practice to process CSS and JavaScript files to minify them, which involves removing whitespace, line breaks, and comments to reduce the file size so the files transfer faster. It’s also common to fingerprint the CSS and JavaScript files so that they’ll have slightly different filenames when you deploy modified versions. This invalidates browser caches so visitors see your changes.

You might even want to take advantage of Sass, a CSS preprocessor that lets you break up your stylesheets, add logic, and create shared functionality. And now that you have a JS-powered search, you might want to create a bundle for your JavaScript files instead of relying on a version hosted by a CDN.

Hugo can handle all of this out of the box, thanks to its Pipes feature. Pipes let you transform your CSS and other assets right from within Hugo. You won’t need to install additional tooling to concatenate, minify, or fingerprint your files. As long as you’ve installed the extended version of Hugo, you’ve got everything you need.

Hugo also includes some powerful built-in features for managing images, including the ability to resize images automatically, or perform other forms of image processing, without the need for external tooling.

In this chapter, you’ll use Hugo’s built-in features to manage your CSS, images, and JavaScript files. You’ll also integrate Webpack^[34] into your project so that you can take advantage of advanced features Hugo doesn’t support, such as JavaScript modules. And since you’re going to do that integration, you’ll create some scripts to make building your project easier.