New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

grunt-autoshot

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

grunt-autoshot - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

test/expected/generate_local.js

14

Gruntfile.js

@@ -36,8 +36,14 @@ /*

path: './test/screenshot',
filename: 'screenshot',
type: 'jpg',
remote: 'http://github.com/',
remote: {
files: [
{ src: "http://getbootstrap.com", dest: "bootstrap.jpg" },
{ src: "http://www.google.com", dest: "google.png" }
]
},
local: {
path: './test/src',
port: 7788
port: 7788,
files: [
{ src: "index.html", dest: "screenshot.jpg" }
]
},

@@ -44,0 +50,0 @@ viewport: [

{
"name": "grunt-autoshot",
"version": "0.0.2",
"version": "0.1.0",
"description": "Create a quick screenshot for your site which could help for document or testing.",

@@ -5,0 +5,0 @@ "homepage": "https://github.com/Ferrari/grunt-autoshot",

@@ -21,3 +21,3 @@ # grunt-autoshot [![Build Status](https://travis-ci.org/Ferrari/grunt-autoshot.png?branch=master)](https://travis-ci.org/Ferrari/grunt-autoshot)

Final and the most important thing, please make sure [**phantomjs**](http://phantomjs.org/) are in your PATH, cause this plugin use it to generate screenshot, so remember [install](http://phantomjs.org/download.html) first.
Final and the most important thing, please make sure [**phantomjs**](http://phantomjs.org/) are in your PATH, if your windows users, please download the phantomjs zip file and decompress it and don't forget to set the environment variable as phantomjs.exe's path. Cause this plugin use phantomjs to generate screenshot, so remember [install](http://phantomjs.org/download.html) it first.

@@ -29,2 +29,8 @@ ## The "autoshot" task

**Make a big change of config format from 0.1.0**, thanks @danielhusar and @ryanfitzer opinions, in order to support multiple sources and screenshots and follow the [standard format](http://gruntjs.com/configuring-tasks#files) of grunt.
After 0.1.0, filename and screenshot type all define using grunt file format. So please use those format that phantomjs [support](https://github.com/ariya/phantomjs/wiki/Screen-Capture).
There is a [example](https://github.com/Ferrari/grunt-autoshot/blob/master/Gruntfile.js#L32) of new Gruntfile format.
```js

@@ -36,8 +42,16 @@ grunt.initConfig({

// necessary config
path: '',
filename: '',
type: '',
path: SCREENSHOT_DIRECTORY_PATH,
// optional config, must set either remote or local
remote: '',
local: '',
remote: {
files: [
{ src: REMOTE_SITE_URL, dest: FILENAME(INCLUDE FILE TYPE) }
]
},
local: {
path: LOCAL_FILE_PATH,
port: LOCAL_SERVER_PORT,
files: [
{ src: LOCAL_FILENAME, dest: FILENAME(INCLUDE FILE TYPE) }
]
},
viewport: []

@@ -57,24 +71,13 @@ },

#### options.filename
Type: `String`
Default filename of screenshots.
It will combine with local, remote and viewport.
```
ex: [local|remote]-{filename}-{viewport}
```
#### options.type
Type: String
Image type of screenshot.
PhantomJS supports JPEG, PNG, GIF and PDF right now.
#### options.remote
Type: String
The url of target webpage.
New format after 0.1.0, now you have to assign the source url and your screenshot file, include it's format, like following:
```js
remote: {
files: [
{ src: "http://www.google.com", dest: "google.png" }
]
}
```
ex: http://www.google.com
```

@@ -84,7 +87,12 @@ #### options.local

Start a local http server to host your webpage then get the screenshot. There are several config options:
```
{
Start a local http server to host your webpage then get the screenshot.
Just like options.remote, you need to assign your local filename and screenshot filename, including it's format.
```js
local: {
path: './dist', // path to directory of the webpage
port: 8080 // port of startup http server
files: [ // local filename and screenshot filename
{ src: "index.html", dest: "screenshot.jpg" }
]
}

@@ -102,3 +110,20 @@ ```

### Deprecated (Don't support after 0.1.0)
#### options.filename
Type: `String`
Default filename of screenshots.
It will combine with local, remote and viewport.
```
ex: [local|remote]-{filename}-{viewport}
```
#### options.type
Type: String
Image type of screenshot.
PhantomJS supports JPEG, PNG, GIF and PDF right now.
## License
Copyright (c) 2013 Ferrari Lee. Licensed under the MIT license.

@@ -21,4 +21,16 @@ /*

path: __dirname + '/screenshot',
type: 'jpg',
name: 'screenshot',
remote: {
files: [
{src: "http://www.google.com", dest: "google.jpg"}
]
},
local: {
path: "./dist",
port: 8080,
files: [
{src: "index.html", dest: "screenshot.jpg"}
]
},
//type: 'jpg',
//name: 'screenshot',
viewport: ['1920x1080']

@@ -30,6 +42,8 @@ });

var viewport = opts.viewport;
var url = opts.url;
var filename = opts.filename;
//var url = opts.url;
//var filename = opts.filename;
var type = opts.type;
var path = opts.path;
var src = opts.src;
var dest = opts.dest;

@@ -48,4 +62,5 @@ phantom.create(function(err, ph) {

page.set('zoomFactor', 1);
page.open(url, function(err, status) {
var dest = filename + '.' + type;
page.open(src, function(err, status) {
//var dest = filename + '.' + type;
var target = type + '-' + viewport + '-' + dest;

@@ -61,4 +76,4 @@ // Background problem under self-host server

page.render(path + '/' + dest, function() {
grunt.log.writeln('Take a screenshot to ' + dest);
page.render(path + '/' + target, function() {
grunt.log.writeln('Take a screenshot to ' + target);
ph.exit();

@@ -80,11 +95,17 @@ cb();

hasRemote = true;
async.eachSeries(options.viewport, function(item, cb) {
screenshot({
path: options.path,
filename: 'remote-' + options.filename + '-' + item,
type: options.type,
url: options.remote,
viewport: item
async.eachSeries(options.remote.files, function(file, outerCb) {
async.eachSeries(options.viewport, function(view, cb) {
screenshot({
path: options.path,
//filename: 'remote-' + item.src + '-' + view,
type: "remote",
//url: file.src
viewport: view,
src: file.src,
dest: file.dest
}, function() {
cb();
});
}, function() {
cb();
outerCb();
});

@@ -99,20 +120,23 @@ }, function() {

hasLocal = true;
http.createServer(
st({
path: options.local.path,
index: 'index.html'
})
).listen(options.local.port, function() {
async.eachSeries(options.viewport, function(item, cb) {
screenshot({
path: options.path,
filename: 'local-' + options.filename + '-' + item,
type: options.type,
url: 'http://localhost:' + options.local.port,
viewport: item
async.eachSeries(options.local.files, function(file, outerCb) {
var mount = st({path: options.local.path, index: file.src});
http.createServer(function(req, res) {
mount(req, res);
}).listen(options.local.port, function() {
async.eachSeries(options.viewport, function(view, cb) {
screenshot({
path: options.path,
//filename: 'local-' + options.filename + '-' + item,
//type: options.type,
//url: 'http://localhost:' + options.local.port,
type: 'local',
viewport: view,
src: 'http://localhost:' + options.local.port + '/' + file.src,
dest: file.dest
}, function() {
cb();
});
}, function() {
cb();
grunt.event.emit('finish', 'local');
});
}, function() {
grunt.event.emit('finish', 'local');
});

@@ -119,0 +143,0 @@ });

@@ -27,10 +27,15 @@ 'use strict';

default_options: function(test) {
test.expect(1);
test.expect(2);
var local, remote, expected;
var actual = grunt.file.read('test/screenshot/remote-screenshot-1920x1080.jpg');
var expected = grunt.file.read('test/expected/screenshot.jpg');
test.equal(actual, expected, 'should generate screenshot of sample site');
local = grunt.file.read('test/screenshot/local-1920x1080-screenshot.jpg');
expected = grunt.file.read('test/expected/local.jpg');
test.equal(local, expected, 'should generate screenshot of sample site at local');
remote = grunt.file.read('test/screenshot/remote-1920x1080-google.png');
expected = grunt.file.read('test/expected/remote.png');
test.equal(remote, expected, 'should generate screenshot of sample site from remote');
test.done();
},
}
};

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc