@wndrfl/static-kit-cli

v2.11.0

Published

7 months ago

A commandline interface for compiling, optimizing, and managing static assets.

0High
0Medium
0Low

johnnietheblack

static compile assets bundle minify cli

✨ Static Kit CLI

A commandline interface for bootstrapping and working with Wonderful's Static Kit library.

Documentation

Quick Start

After installing the CLI, you can get started with just two commands:

# Install Static Kit into your project
$ static install

# Start watching for changes and compiling automatically
$ static -w

That's it! The CLI will watch your source files and automatically compile them whenever you make changes.

Installation

Using npm:

# Install the CLI globally
$ npm install -g @wndrfl/static-kit-cli

# Update to the latest version
$ npm update -g @wndrfl/static-kit-cli

# Check the current version
$ static version

Commands

The Static Kit CLI provides different commands for many common tasks, as they pertain to interfacing with the Static Kit library.

`static install [-d --dir] [-i --init]`

Installs the Static Kit library into the current directory (or, optionally, a directory indicated by the --dir flag). If the --init flag is provided, the CLI will automatically run commands such as npm install within the new installation.

`static compile [all|js|css|images] [-d --dir] [-w --watch]`

Compiles source Javascript, CSS (SCSS), and image files into distributable files. The command uses the .staticrc file to understand where to find the source files and where to output the distribution files.

Options:

-w, --watch: Watch for changes and automatically recompile files (recommended for development)
-d, --dir: Specify the directory to compile from (default: current directory)

Examples:

# Start watching for changes (recommended for development)
$ static -w

# Compile all assets once
$ static compile

# Compile specific asset types
$ static compile js
$ static compile css
$ static compile images

# Compile from a specific directory
$ static compile --dir ./my-project

`static template [create] [-n --name] [-d --dir]`

Creates a pair of .js and .scss files within the Static Kit directory. Use this command when beginning work on static assets (JS / CSS) for a new page template.

Directory Structure

When you run static install, it creates a static directory with the following structure:

static/
├── .staticrc           # Configuration file for the CLI
├── src/               # Source files
│   ├── js/           # JavaScript source files
│   ├── scss/         # SCSS source files
│   └── images/       # Image source files
└── dist/             # Compiled output files
    ├── js/          # Compiled JavaScript
    ├── css/         # Compiled CSS
    └── images/      # Optimized images

Configuration

The CLI uses a .staticrc file to configure compilation settings. Here's an example configuration:

{
  "paths": {
    "src": {
      "js": "src/js",
      "scss": "src/scss",
      "images": "src/images"
    },
    "dist": {
      "js": "dist/js",
      "css": "dist/css",
      "images": "dist/images"
    }
  },
  "overwrite": false
}

Configuration options:

paths: Define source and destination directories for different asset types
overwrite: When false (default), the dist directory is emptied before each compilation. Set to true to preserve existing files.