Hatchet is a CLI tool built to help us work better with Shopify on the front-end at Pixelcabin.
Use the package manager npm to install Hatchet.
npm install @pixelcabin/hatchet [Add the "--global" flag to make it available everywhere]
hatchet --help to see the following output. Each subcommand has its own help information as well.
Usage: hatchet [options] [command] A command line tool for Pixelcabin's front-end team 🪓 Options: -V, --version output the version number -h, --help display help for command Commands: view Open a theme in the browser, or generate a link/QR code upload Upload individual files or globs of files to Shopify download Download individual files or globs of files from Shopify change-theme Update the theme id in the credentials.json lint-js Lint the JS in a project lint-sass Lint the Sass in a project help [command] display help for command
$ hatchet view
When ran will show a list of available themes to open in the default web browser. Optionally, you can customise the URL generated, copy this URL to the system clipboard, and generate a QR code of the URL to easily interact with a mobile device.
Usage: hatchet-view [options] Options: -p, --path <path> Go to a custom path like eg. /products/product-handle -m, --mobile Generate a QR code that a mobile can scan to open the link -c, --clipboard Save result to system clipboard -h, --help display help for command
$ hatchet upload
When ran, can be passed a glob or a filepath, both relative to the project directory.
Usage: hatchet-upload [options] Options: -j, --skip-json Don't upload json (settings_data.json is never uploaded) -i, --skip-images Don't upload images -f, --skip-fonts Don't upload fonts -L, --liquid-only Only upload liquid -D, --overwrite-settings-data Overwrite settings_data.json file -h, --help display help for command
$ hatchet download
When ran, will propose a list of themes to download from, can be passed a glob or a filepath, both relative to the project directory.
Usage: hatchet-download [options] Options: -s, --settings-data Shortcut to fetch settings_data.json -h, --help display help for command
$ hatchet change-theme
Quickly change the theme your dev environment is pointing at. When ran, shows a list of available themes and overwrites the property in the
$ hatchet lint-js
Lint the JS files in the project. Can be passed a glob, by default it will scan for all files in
src/js and subfolders. It loads the default Pixelcabin
.eslintrc.json which includes prettier and Vue plugins, and will also merge in an eslint config file if it exists in the project, as well as an
Usage: hatchet-lint-js "glob/**" Options: -f, --fix Autoformat source files -h, --help display help for command
$ hatchet lint-sass
Lint the Sass files in the project. Can be passed a glob, by default it will scan for all files in
src/scss and subfolders. It loads the default Pixelcabin
.stylelintrc.json which includes the prettier plugin, and will also merge in a stylelint config file if it exists in the project, as well as an
Usage: hatchet-lint-sass "glob/**" Options: -f, --fix Autoformat source files -h, --help display help for command
- [ ] JS compilation
- [x] JS linting
- [ ] SCSS compilation
- [x] SCSS linting
- [ ] Watcher task that compiles and uploads
- [ ] Pull request helper
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.