Is there a way to utilize Webpack, Gulp, or a combination of both to compile javascript files with liquid tags in them (*.js.liquid)

Question

I'm trying to configure an existing Shopify store's theme to compile and minify javascript files that contain liquid tags.

I've been doing some research for Webpack and Gulp, and it looks like there's a lot of great information for dealing with SCSS, but not much on javascript+liquid (*.js.liquid).

So is there a way to configure Webpack, Gulp, or a combination of both to achieve compiling javascript with liquid tags in them, such as an app.js.liquid?

I know there's a lot of great repos like krjo/shopify-webpack-dev-workflow, but it doesn't look like it has a way of compiling *.js.liquid files. And before I adopt a great repo like this, I want to know if there's a way to compile *.js.liquid files first.

I also found this article that goes over escaping strings to compile/minify out a *.scss.liquid file in an effort to retain liquid tags in scss files, but following the same logic with javascript files didn't work out.

If there is no way of compiling *.js.liquid files, any ideas for a workaround would be also great.

Thank you in advance!

Artem Artem · Accepted Answer · 2021-08-20T00:27:26

Perhaps this article will help you.

I found this liquidjs
LiquidJS is a simple, expressive, safe and shopify compatible template engine in pure JavaScript.

I also found this tool. File Optimizer.

Is there a way to utilize Webpack, Gulp, or a combination of both to compile javascript files with liquid tags in them (*.js.liquid)

1 Answers