State

Setup

✎ Edit package

This package is a work-in-progress. Some aspects may be awaiting improvement.

To use this package, add suite.state(gulp) to your Gulpfile:

/* gulpfile.js */
const gulp = require("gulp");
const suite = require("@cloudcannon/suite");

suite.state(gulp);

Usage

Running gulp state will build a dependency graph and save it as JSON in your reports/ directory. A local webserver will be started on port 9001, using the JSON file to create an interactive visualisation of the dependency graph.

The state package needs to scan your compiled site - make sure you run gulp dev:build before gulp state.

$ gulp state
[16:39:37] Using gulpfile ./gulpfile.js
[16:39:37] Starting 'state'...
[16:39:37] Starting 'state:get-filename-list'...
[16:39:38] Finished 'state:get-filename-list' after 1.25 s
[16:39:38] Starting 'state:dependencies'...
[16:39:38] Finished 'state:dependencies' after 458 ms
[16:39:38] Starting 'state:dependents'...
[16:39:38] Finished 'state:dependents' after 2.43 ms
[16:39:38] Starting 'state:clean'...
[16:39:38] Finished 'state:clean' after 42 ms
[16:39:38] Starting 'state:build'...
[16:39:38] Finished 'state:build' after 14 ms
[16:39:38] Starting 'state:serve'...
[16:39:39] Finished 'state:serve' after 15 ms
[16:39:39] Finished 'state' after 1.78 s

In the visualiser, you can toggle between viewing the dependencies of an asset, and viewing the dependants of an asset.

Running gulp state:find-unused will print a list of unused assets to the console. This uses the dependency graph in reports/, so make sure to run gulp state:dependencies or gulp state first.

Subtasks

build

Copies the JSON files from the reports directory to the build destination directory, along with an HTML template. This acts as a static site you can use to visualise dependencies.

$ gulp state:build

clean

Deletes everything in the build destination directory.

$ gulp state:clean

dependencies

Scans the compiled site for asset references, builds a dependency graph, and creates a JSON file report in the reports directory.

$ gulp state:dependencies

dependents

Reads the report generated by state:dependencies, builds a reversed graph, and creates a JSON file in the reports directory. Make sure to run gulp state:dependencies first, if you are running this subtask manually.

$ gulp state:dependents

find-unused

Scans the dependency tree and prints unused assets to the console. Make sure to run gulp state:dependencies first.

$ gulp state:find-unused