@pixelcabin/hatchet

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
• JS linting
• SCSS compilation
• 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.

License

GNU GPLv3