Easier way to run transforms on passthrough copy files

[Rangoli-Software]

I'm trying to add a transform to minify my "*.js" file. ".js" is listed in the templateFormats, and passThroughFileCopy is true. I've modified the example in Add Filter to create the transform.

eleventyConfig.addTransform("jsmin", function(content, outputPath) {
if( outputPath.endsWith(".js") ) {
let minified = uglifyjs.minify(content);
if ( minified.error ) {
console.log("Uglify JS error: ", minified.error);
}
return minified.code;
}
return content;
});

However, nothing seems to be happening. It looks like transforms are only applied to files that actually have some template processing.

How can I minify my js files?

[okitavera]

It looks like transforms are only applied to files that actually have some template processing.

Exactly. passthroughFileCopy: true does copy files with non-matching template file extensions directly to your output directory without modification.

So, you can consider processing your js files with external tool like grunt, gulp, webpack, etc, or inlining your js through the addFilter API; especially if you had a small js file and you want to reduce the number of http requests
https://www.11ty.io/docs/quicktips/inline-js/

[zachleat]

Correct! Upvote #117 which will allow you to do this much easier!

[Rangoli-Software]

Upvoted. At the moment, I'd prefer to avoid adding any other dependencies like webpack, etc.

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

View the enhancement backlog here. Don’t forget to upvote the top comment with 👍!

[jevets]

@Rangoli-Software

I'm facing a similar problem (but with CSS). I also do not want to add additional dependencies like gulp, grunt, webpack, etc.

For now I'm using a "real" template file (.njk in my case) that simply defines its own permalink and includes a "static" asset file that will be transformed.

It would be nice if files added via addPassthroughCopy() could be transformed via addTransform(). This works for me now, though #117 would cover it too.

The only reason for the include() is so my editor picks up the correct syntax. Otherwise I'd keep the actual CSS right in this file.

// stylesheet.njk
---
permalink: /stylesheet.css
---
{% include "css/main.css" %}

// _includes/css/main.css

body { font-family: 'Comic Sans MS' }
a { color: salmon }

// .eleventy.js

// ...
config.addTransform('doTheCSSWork', (content, outputPath) => {
  if (outputPath.endsWith('.css')) {
    return processTheCSS()
  }
  return content
})

[Ryuno-Ki]

Nice hack!

[ki9us]

passthroughFileCopy: true does copy files with non-matching template file extensions directly to your output directory without modification.

OK, but I feel like transforms should work on passthroughFileCopy'd files though. Here is my reasoning:

1. It's trivial to perform checks in the transform to ensure it only runs on certain files. The example in the docs checks that the extension is .html.
2. It's not trivial to implement a transform on any other file type, as can be seen by jevet's kludgy workaround, or the suggestion to incorporate an entire second build system like gulp or grunt.

Considering these two points, I just don't see any advantage to the current behavior.

#117 would fix this, to be sure. If #117 were able to extend existing renderers instead of overwriting them, I guess transforms would be obsoleted anyway.

[necolas]

Is there an active issue to track this feature? I need this too and agree that simply minifying external css/js files shouldn't be this difficult vs working with inline css/js.

[zachleat]

As #1686 was merged, this will unlock passing a transform callback to recursive-copy. https://github.com/timkendrick/recursive-copy#advanced-options

Shipping with 2.0.0-canary.12