Shopify development tool using webpack and themekit
Development tool for Shopify using webpack and themekit.
Check out the node package version: Shopify Packer
Install dependencies -
npm install
Start webpack compiler -
npm run start
npm run deploy
Webpack will create the following snippets that load all style and script chunks. You need to include this in your theme.liquid file.
{% include 'script-tags' %} {% include 'style-tags' %}
The system will check for any script or style sheet that matches Shopify template and layout files.
filename:
scripts/templates/product.js
creates file:
assets/template.product.js
script-tags snippet (auto generated) will only load this script on pages that use product template
{%- if template == 'product' -%} {%- else -%} {%- endif -%}
Start - Watches files for changes and deploys changes to Shopify. Also builds and deploys all theme files to Shopify before starting
npm run start
Watch - Watches files for changes and deploys changes to Shopify. Skips first deployment.
npm run watch
Build - Builds js/scss in production mode
npm run build
Deploy - Deploys the contents of dist folder
npm run deploy
Test - Runs all tests and code linters
npm run test
Lint CSS - Checks scss for errors and best practices.
npm run lint:css
Lint JS - Checks js for errors and best practices.
npm run lint:js
Fix CSS - Checks scss for errors and best practices. Automatically fixes simple errors like line endings
npm run fix:css
Fix jS - Checks js for errors and best practices. Automatically fixes simple errors.
npm run fix:js
This project uses stylelint and eslint for checking css and js.