grunt-pageres 
Capture website screenshots using
pageres
Issues should be opened on the pageres issue tracker.
Install
$ npm install --save-dev grunt-pageres
Note to Linux users: If you get a "No usable sandbox!" error, you need to enable system sandboxing.
Usage
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pageres: {
screenshot: {
options: {
urls: 'https://sindresorhus.com',
sizes: [
'1200x800',
'800x600'
],
dest: 'dist'
}
},
multipleUrls: {
options: {
urls: [
'https://sindresorhus.com',
'https://google.com'
],
sizes: [
'800x1000',
'400x1000'
],
dest: 'dist',
crop: true
}
}
}
});
grunt.registerTask('default', ['pageres']);
Options
urls
Required
Type: string, string[]
One or more URLs or local paths to the websites you want to screenshot.
sizes
Required
Type: string[]
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.
timeout
Type: number (seconds)
Default: 60
Number of seconds after which the request is aborted.
crop
Type: boolean
Default: false
Crop to the set height.
css
Type: string
Apply custom CSS to the webpage. Specify some CSS or the path to a CSS file.
script
Type: string
Apply custom JavaScript to the webpage. Specify some JavaScript or the path to a file.
cookies
Type: Array<string, Object>
A string with the same format as a browser cookie or an object.
Tip: Go to the website you want a cookie for and copy-paste it from DevTools.
filename
Type: string
Define a customized filename using templating.
For example {{date}} - {{url}}-{{size}}{{crop}}.
Available variables:
url: The URL in slugified form, eg.http://yeoman.io/blog/becomesyeoman.io!blogsize: Specified size, eg.1024x1000width: Width of the specified size, eg.1024height: Height of the specified size, eg.1000crop: Outputs-croppedwhen the crop option is truedate: The current date (Y-M-d), eg. 2015-05-18time: The current time (h-m-s), eg. 21-15-11
incrementalName
Type: boolean
Default: false
When a file exists, append an incremental number.
selector
Type: string
Capture a specific DOM element matching a CSS selector.
hide
Type: string[]
Hide an array of DOM elements matching CSS selectors.
username
Type: string
Username for authenticating with HTTP auth.
password
Type: string
Password for authenticating with HTTP auth.
scale
Type: number
Default: 1
Scale webpage n times.
format
Type: string
Default: png
Values: png, jpg
Image format.
userAgent
Type: string
Custom user agent.
headers
Type: Object
Custom HTTP request headers.
transparent
Type: boolean
Default: false
Set background color to transparent instead of white if no background is set.
License
MIT © Sindre Sorhus