Screenshots

Setup

✎ Edit package

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

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

suite.dev(gulp);
suite.screenshots(gulp);

Usage

Run gulp screenshots:dev to read a compiled site at /dist/site/ and output screenshots of each page to /reports/screenshots/dev.

Run gulp screenshots:dev-tool to build and serve a static site where you can view and search your i18n source tags mapped onto screenshots.

Run gulp screenshots:i18n-tool to use the same tools with your dist/translated_site from the i18n package. Now you can see all your translated content in place, searchable by tag.

You can customise these commands in the configuration. For each namespace defined in the configuration options, a new set of gulp tasks will be available. For example, if you have a “staging” entry, the task gulp screenshots:staging can be used to read from a custom specified location and output to reports/screenshots/staging.

Subtasks

clean

Delete everything in the output destination folder reports/screenshots.

$ gulp screenshots:clean

dev-takescreens

Outputs screenshots of every page to output directory, with a JSON file mapping i18n tag information to coordinates.

$ gulp screenshots:dev-takescreens

dev

First, this runs dev-takescreens to create screenshots and JSON mappings. Then, it generates a JSON index file at the root, to use for searching i18n keys.

$ gulp screenshots:dev

dev-tool

First, this runs dev to create screenshots, JSON mappings, and an index file. Then, it generates and serves a static site which allows you to search and review your translated content.

$ gulp screenshots:dev-tool

dev:clean

Delete everything in the output destination folder reports/screenshots/dev.

$ gulp screenshots:dev:clean

dev in the above commands can be replaced with any namespace in the configuration.