@wbelk/shopify-simple-minify

Check out my Shopify apps: https://apps.shopify.com/partners/william-belk

npm link for this package: https://www.npmjs.com/package/@wbelk/shopify-simple-minify

Overview

This is a simple theme minifier, transpiler, and module router for Shopify that follows existing .liquid concepts like include and does not use Webpack. Changed files/modules will be watched and built automatically. This does not require a proxy and will play nicely with Themekit.

• Minifiyer (js, css, html, liquid)
• Liquid compressor (adds {%- ... -%} to liquid tags (except assign or capture))
• Transpiler (ES6 => ES5) for files and any javascript inside of <script> tags that does not contain liquid
• Simple module router using {% minifiy_module 'stuff/myfile.html' %}
• Watches for changes and rebuilds (not so great for newly added files, might need restart occasionally)

Assumptions

• Minfying is awesome
• Complex ES6 => ES5 compilers, routers, and bundlers make life harder, not easier. We're not building rockets, we're coding a (hopefully simple and ultra lightweight) Shopify theme.
• Liquid is pretty handy, so we don't need to come up with a complex deal to replace what it already does.
• Reliably minifying javascript + liquid is almost impossible (there is no npm pacakge for it, so that means it's a problem so hard that the community hasn't cracked it yet), so we need to start thinking about that in our code and trying to extract liquid from javascript as much as possible. That's what will maximize our potential to minify. A bit of architecture and patterns can go a long way.

Local Requirements

• node.js v12+
• npm

Getting Started

All directories/files of ./minify_modules/source_theme are minified/compiled/copied over to ./.

Init an npm project if you haven't already done so.

npm init

Install this npm package.

npm install --save-dev @wbelk/shopify-simple-minify

Add a script to package.json:

"minify": "node node_modules/@wbelk/shopify-simple-minify/src/index.js"

npm run minify will build directories watch for file changes and build on any new or change.

Copy all (or parts) of your existing Shopify theme to ./minify_modules/source_theme. For example, if you just want to minify a few files, create your Shopify directory like ./minify_modules/source_theme/snippets and copy your selected snippets over, open the files and save, then they will be minified into ./snippets.

All contents of ./minify_modules/source_theme will be minified/transpiled/compiled or copied over to Shopify theme directories in the root of the repo, i.e. ./minify_modules/source_theme/assets => ./assets.

If you're copying files into ./minify_modules/source_theme for the first time, you'll want to restart npm run minify.

Modules

Insert modules into other files using {% minifiy_module 'stuff/myfile.html %}. Modules are located in the ./minify_modules/modules directory and function just like an include. However, ./minify_modules/modules directory supports subdirectories, and you can add your preferred file type suffix so that your IDE will give you better formatting than the .liquid helpers which are not great for VS Code, Atom, etc.

** You cannot include a module inside of another module (unlike with the Shopify liquid include) **

Important Notes

• Supported file types: css, js, liquid. Does not support scss
• Any processed files will not be outputted with .min
• Any source assets from minify_modules/source_theme already containing .min will not be minified again, only copied over new or changed.
• To rebuild all files, either delete the file ./.minify_changelog which is generated on build, or delete the root Shopify directories. If you need to prune old files, it's best to delete the root Shopify directories as this library does not track/handle deletions.

Troubleshooting

• If your theme cannot complete building/minifying javascript that contains liquid tags, there may be issues with your quotes. Try changing single to double, or vice versa: class="{{ 'foo' }} change to class="{{ "foo" }}.
• Minifying Javascript that contains Liquid is dang-near impossible, so this package just removes multiple spaces and line breaks from Javascript that contains Liquid tags.
• If want to control your node version check out nvm