https://v0-122-0--gohugoio.netlify.app/categories/asset-management/Recent content in asset management on HugoHugo -- gohugo.ioenhttps://v0-122-0--gohugoio.netlify.app/hugo-pipes/introduction/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/introduction/Find resources in assets This is about global and remote resources. global resource A file within the assets directory, or within any directory mounted to the assets directory. remote resource A file on a remote server, accessible via HTTP or HTTPS. For .Page scoped resources, see the page resources section. Get a resource In order to process an asset with Hugo Pipes, it must be retrieved as a resource. For global resources, use:https://v0-122-0--gohugoio.netlify.app/hugo-pipes/transpile-sass-to-css/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/transpile-sass-to-css/Usage Transpile Sass to CSS using the LibSass transpiler included in Hugo’s extended edition, or install Dart Sass to use the latest features of the Sass language. {{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }} {{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }} <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} Sass has two forms of syntax: SCSS and indented. Hugo supports both.https://v0-122-0--gohugoio.netlify.app/hugo-pipes/postcss/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/postcss/Setup Follow the steps below to transform CSS using any of the available PostCSS plugins. Step 1 Install Node.js. Step 2 Install the required Node.js packages in the root of your project. For example, to add vendor prefixes to CSS rules: npm i -D postcss postcss-cli autoprefixer Step 3 Create a PostCSS configuration file in the root of your project. You must name this file postcss.config.js or one of the other supported file names.https://v0-122-0--gohugoio.netlify.app/hugo-pipes/postprocess/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/postprocess/Usage Marking a resource with resources.PostProcess delays any transformations to after the build, typically because one or more of the steps in the transformation chain depends on the result of the build (e.g. files in public). A prime use case for this is CSS purging with PostCSS. There are currently two limitations to this: This only works in *.html templates (i.e. templates that produces HTML files). You cannot manipulate the values returned from the resource’s methods.https://v0-122-0--gohugoio.netlify.app/hugo-pipes/js/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/js/Usage Any JavaScript resource file can be transpiled and “tree shaken” using js.Build which takes for argument either a string for the filepath or a dict of options listed below. Options targetPath (string) If not set, the source path will be used as the base target path. Note that the target path’s extension may change if the target MIME type is different, e.g. when the source is TypeScript. params New in v0.https://v0-122-0--gohugoio.netlify.app/hugo-pipes/babel/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/babel/Usage Any JavaScript resource file can be transpiled to another JavaScript version using resources.Babel which takes for argument the resource object and an optional dict of options listed below. Babel uses the babel cli. Hugo Pipe’s Babel requires the @babel/cli and @babel/core JavaScript packages to be installed in the project or globally (npm install -g @babel/cli @babel/core) along with any Babel plugin(s) or preset(s) used (e.g., npm install @babel/preset-env --save-dev).https://v0-122-0--gohugoio.netlify.app/hugo-pipes/minification/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/minification/Usage Any CSS, JS, JSON, HTML, SVG, or XML resource can be minified using resources.Minify which takes for argument the resource object. {{ $css := resources.Get "css/main.css" }} {{ $style := $css | resources.Minify }} Note that you can also minify the final HTML output to /public by running hugo --minify.https://v0-122-0--gohugoio.netlify.app/hugo-pipes/bundling/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/bundling/Usage Asset files of the same MIME type can be bundled into one resource using resources.Concat which takes two arguments, the target path for the created resource bundle and a slice of resource objects to be concatenated. {{ $plugins := resources.Get "js/plugins.js" }} {{ $global := resources.Get "js/global.js" }} {{ $js := slice $plugins $global | resources.Concat "js/bundle.js" }}https://v0-122-0--gohugoio.netlify.app/hugo-pipes/fingerprint/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/fingerprint/Usage Fingerprinting and SRI can be applied to any asset file using resources.Fingerprint which takes two arguments, the resource object and an optional hash algorithm. The default hash algorithm is sha256. Other available algorithms are sha384 and (as of Hugo 0.55) sha512 and md5. Any so processed asset will bear a .Data.Integrity property containing an integrity string, which is made up of the name of the hash algorithm, one hyphen and the base64-encoded hash sum.https://v0-122-0--gohugoio.netlify.app/hugo-pipes/resource-from-string/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/resource-from-string/Usage It is possible to create a resource directly from the template using resources.FromString which takes two arguments, the target path for the created resource and the given content string. The result is cached using the target path as the cache key. The following example creates a resource file containing localized variables for every project’s languages. {{ $string := (printf "var rootURL = '%s'; var apiURL = '%s';" (absURL "/") (.https://v0-122-0--gohugoio.netlify.app/hugo-pipes/resource-from-template/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/hugo-pipes/resource-from-template/Usage In order to use Hugo Pipes function on an asset file containing Go Template magic the function resources.ExecuteAsTemplate must be used. The function takes three arguments: the target path for the created resource, the template context, and the resource object. The target path is used to cache the result. // assets/sass/template.scss $backgroundColor: {{ .Param "backgroundColor" }}; $textColor: {{ .Param "textColor" }}; body{ background-color:$backgroundColor; color: $textColor; } // [...] {{ $sassTemplate := resources.