grunt-pageres

Responsive website screenshots using pageres

Issues should be opened on the pageres issue tracker.

Using another task runner?

Install

$ npm install --save-dev grunt-pageres

PhantomJS, which is used for generating the screenshots, is installed automagically, but in some rare cases it might fail to and you'll get an Error: spawn EACCES error. Download PhantomJS manually and reinstall this task if that happens.

Usage

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
	pageres: {
		yeoman: {
			options: {
				url: 'yeoman.io',
				sizes: ['1200x800', '800x600'],
				dest: 'dist'
			}
		},
		todomvc: {
			options: {
				url: 'todomvc.com',
				sizes: ['800x1000', '400x1000'],
				dest: 'dist',
				crop: true
			}
		}
	}
});

grunt.registerTask('default', ['pageres']);

Options

url

Required
Type: string

URL or local path to the website you want to screenshot.

urls

Required
Type: array

An array of URL or local path to the websites you want to screenshot. If supplied, it will override the single url option.

sizes

Required
Type: array

Use a <width>x<height> notation or a keyword.

A keyword is a version of a device from this list. You can also pass in the w3counter keyword to use the ten most popular resolutions from w3counter.

dest

Required
Type: string

Destination directory.

delay

Type: number (seconds)
Default: 0

Delay capturing the screenshot.

Useful when the site does things after load that you want to capture.

crop

Type: boolean
Default: false

Crop to the set height.

crop

Type: allowedConcurrency
Default: 2

Maximum allowed concurrency for the pageres rendering.

cookies

Type: array of string, object

A string with the same format as a browser cookie or an object of what phantomjs.addCookie accepts.

Tip

Go to the website you want a cookie for and copy-paste it from Dev Tools.

filename

Type: string

Define a customized filename using Lo-Dash templates.
For example {{date}} - {{url}}-{{size}}{{crop}}.

Available variables:

• url: The URL in slugified form, eg. http://yeoman.io/blog/ becomes yeoman.io!blog
• size: Specified size, eg. 1024x1000
• width: Width of the specified size, eg. 1024
• height: Height of the specified size, eg. 1000
• crop: Outputs -cropped when the crop option is true
• date: The current date

selector

Type: string

Capture a specific DOM element.

hide

Type: array

Hide an array of DOM elements.

username

Type: string

Username for authenticating with HTTP auth.

password

Type: string

Password for authenticating with HTTP auth.

scale

Type: number

Scale webpage n of times.

format

Type: String
Default: png
Values: png, jpg

Image format.

userAgent

Type: string

Custom user agent.

License

MIT © Sindre Sorhus