gulp-banners-screenshots

This plugin will make the screenshots of your html files using phantomjs. In your HTML, add a console.log() with the same message set up in the 'waitLastFrame'. This will trigger the action to actually take a screenshot. (make sure you have phantomjs installed on your machine)

Phantomjs

npm install -g phantomjs-prebuilt

Install

npm install --save-dev gulp-banners-screenshots

Example

const gulp = require('gulp');
const localScreenshots = require('gulp-banners-screenshots');
 
gulp.task('createBackupImage', function () {
    gulp.src('./dev/*.html')
    .pipe(localScreenshots({
        width: ['160'], // The banner width
        timeout: 10000, // Time to exit if no console.log message is received
        folder: './delivery/', // Where the screenshot will be placed
        port: '8889', // Usually 8889 for 'gulp serve'
        path: './dev/', // Where is you html
        waitLastFrame: 'lastFrameReady' // Message to trigger the screenshot action
    }))
    .pipe(gulp.dest('dist/'));
});

Options

waitLastFrame

Type: String Default: 'false'

A message to define when the screenshot should be taken. It should match the 'console.log' message in your html/javascript file.

path

Type: String
Default: 'public/'

Path from which the static files are served (Trailing slash at the end is required.)

port

Type: Number
Default: '8080'

Port for the static web server

width

Type: Array
Default: ['1024']

Array of page widths to make screenshots (for the responsive website)

height

Type: String
Default: '10'

Height of the page, if the actual page heights is more than that it, iamge will have actual page height. (specifing height is good for testing)

type

Type: String
Default: 'jpg'

Output image extension

folder

Type: String
Default: 'screens'

Folder where to put images

timeout

Type: Number
Default: '200'

Timeout between files, in most cases you dont need to change that

protocol

Type: String
Default: 'http'

Protocol that will be used in phantom.js

host

Type: String
Default: 'localhost'

Host that will be used in phantom.js

server

Type: Boolean
Default: 'true'

If plugin should start local web server (otherwise you should start your web server by yourself, or specify host option for some remote server)

zoom

Type: Number
Default: '1'

Zoom level to set the phantom.js browser viewport. Can be used to take 2x, 3x, etc. screen shots. Widths, heights and output file name remain as specified, but the resulting image will be * 'zoom' pixels. E.g. specify 320 width, zoom level 2: output file will be 320px of page content, but at twice the resolution (640px wide).

suffix

Type: String
Default: 'false'

A custom suffix for output file name, you can use -thumb, -shot, etc. And the output file will named source-file-name + custom-suffix. If no suffix set, will use default suffix.

Demo