Hatchet
Hatchet is a CLI tool built to help us work better with Shopify on the front-end at Pixelcabin.
Installation
Use the package manager npm to install Hatchet.
npm install @pixelcabin/hatchet [Add the "--global" flag to make it available everywhere]Usage
Run 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
View
$ 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
Upload
$ 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
Download
$ 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
Change Theme
$ 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 credentials.json.
Lint JS
$ 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 .eslintigore.
Usage: hatchet-lint-js "glob/**"
Options:
-f, --fix Autoformat source files
-h, --help display help for command
Lint Sass
$ 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 .stylelintignore.
Usage: hatchet-lint-sass "glob/**"
Options:
-f, --fix Autoformat source files
-h, --help display help for command
Coming soon
- [ ] JS compilation
- [x] JS linting
- [ ] SCSS compilation
- [x] SCSS linting
- [ ] Watcher task that compiles and uploads
- [ ] Pull request helper
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.