gulp-local-screenshots 
This plugin will make the screenshots of your static html files using phantomjs. (make sure you have phantomjs installed on your machine)
npm install --save-dev gulp-local-screenshots
var gulp = require('gulp');
var localScreenshots = require('gulp-local-screenshots');
gulp.task('screens', function () {
gulp.src('./public/*.html')
.pipe(localScreenshots({
width: ['1600', '1000', '480', '320']
}))
.pipe(gulp.dest('./public/'));
});Type: String
Default: 'public/'
Path from which the static files are served (Trailing slash at the end is required.)
Type: Number
Default: '8080'
Port for the static web server
Type: Array
Default: ['1024']
Array of page widths to make screenshots (for the responsive website)
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: String
Default: 'jpg'
Output image extension
Type: String
Default: 'screens'
Folder where to put images
Type: Number
Default: '200'
Timeout between files, in most cases you dont need to change that
Type: String
Default: 'http'
Protocol that will be used in phantom.js
Type: String
Default: 'localhost'
Host that will be used in phantom.js
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)
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).
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.
MIT © Daniel Husar