Uses gulp to check for file changes in your local theme directory, uploads the changed files with shopify's theme gem to your shopify shop and reloads all browsers connected to browser sync.
This thing needs npm and shopify_theme installed on your machine.
Clone package.json and gulpfile.js into your shopify theme root and run:
npm install
- Go to you shopify admin panel > themes and click the preview icon for your current theme.
- Copy that entire preview url from the address bar
- Navigate to your project directory and run
gulp --url "https://your-shop.myshopify.com/?key=xxx" - Chrome pops up showing your store through the localhost proxy
- Change files in your code editor, wait for gulp do it's thing (wait for the files to upload) and watch your browser(s) reload after everything's done
Woop!
This is the product of an afternoon of hacking. By all means, if you find stuff that can be better: put down a pull request or PM me.
I also wanted to use browser sync's css injection feature which I couldn't figure out how to do currently because shopify stores assets on a cdn and the frontend loads those assets from that cdn url, which in turn leaves browser sync clueless of which resource to inject over.