diff --git a/.gitattributes b/.gitattributes index 391f0a4..6313b56 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,2 +1 @@ -* text=auto -*.js text eol=lf +* text=auto eol=lf diff --git a/.gitignore b/.gitignore index 3c3629e..239ecff 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +yarn.lock diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..43c97e7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/.travis.yml b/.travis.yml index 7d69d74..225084f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,5 @@ +os: osx language: node_js node_js: + - '10' - '8' - - '6' - - '4' diff --git a/gruntfile.js b/gruntfile.js index 3214116..0381b52 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -4,16 +4,24 @@ module.exports = grunt => { pageres: { screenshot: { options: { - urls: 'yeoman.io', - sizes: ['1000x1000', '100x100'], - dest: 'tmp' + urls: 'https://sindresorhus.com', + sizes: [ + '1000x1000', + '100x100' + ], + dest: 'temp' } }, multipleUrls: { options: { - urls: ['yeoman.io', 'google.com'], - sizes: ['1000x1000'], - dest: 'tmp' + urls: [ + 'https://github.com', + 'https://google.com' + ], + sizes: [ + '1000x1000' + ], + dest: 'temp' } } } diff --git a/package.json b/package.json index f6a4034..094d56b 100644 --- a/package.json +++ b/package.json @@ -1,75 +1,68 @@ { - "name": "grunt-pageres", - "version": "3.0.0", - "description": "Capture website screenshots", - "license": "MIT", - "repository": "sindresorhus/grunt-pageres", - "author": { - "name": "Sindre Sorhus", - "email": "sindresorhus@gmail.com", - "url": "sindresorhus.com" - }, - "maintainers": [ - { - "name": "Kevin Mårtensson", - "email": "kevinmartensson@gmail.com", - "url": "github.com/kevva" - } - ], - "engines": { - "node": ">=4" - }, - "scripts": { - "test": "xo && grunt && ava && trash tmp" - }, - "files": [ - "tasks" - ], - "keywords": [ - "gruntplugin", - "pageres", - "page", - "website", - "site", - "web", - "url", - "resolution", - "size", - "screenshot", - "screenshots", - "screengrab", - "screen", - "snapshot", - "shot", - "responsive", - "gulpfriendly", - "phantom", - "phantomjs", - "image", - "svg", - "render", - "html", - "headless", - "capture", - "pic", - "picture", - "png", - "jpg", - "jpeg" - ], - "dependencies": { - "arrify": "^1.0.0", - "pageres": "^4.1.0" - }, - "devDependencies": { - "ava": "*", - "grunt": "^1.0.1", - "grunt-cli": "^1.2.0", - "path-exists": "^3.0.0", - "trash-cli": "^1.1.0", - "xo": "*" - }, - "peerDependencies": { - "grunt": ">=0.4.0" - } + "name": "grunt-pageres", + "version": "3.0.0", + "description": "Capture website screenshots", + "license": "MIT", + "repository": "sindresorhus/grunt-pageres", + "author": { + "name": "Sindre Sorhus", + "email": "sindresorhus@gmail.com", + "url": "sindresorhus.com" + }, + "engines": { + "node": ">=8" + }, + "scripts": { + "test": "xo && grunt && ava && del-cli temp" + }, + "files": [ + "tasks" + ], + "keywords": [ + "gruntplugin", + "pageres", + "page", + "website", + "site", + "web", + "url", + "resolution", + "size", + "screenshot", + "screenshots", + "screengrab", + "screen", + "snapshot", + "shot", + "responsive", + "gulpfriendly", + "puppeteer", + "chrome", + "image", + "svg", + "render", + "html", + "headless", + "capture", + "pic", + "picture", + "png", + "jpg", + "jpeg" + ], + "dependencies": { + "arrify": "^1.0.0", + "pageres": "^5.0.1" + }, + "devDependencies": { + "ava": "^1.2.0", + "del-cli": "^1.1.0", + "grunt": "^1.0.1", + "grunt-cli": "^1.2.0", + "path-exists": "^3.0.0", + "xo": "^0.24.0" + }, + "peerDependencies": { + "grunt": ">=1" + } } diff --git a/readme.md b/readme.md index 524a2a5..ecb47fa 100644 --- a/readme.md +++ b/readme.md @@ -2,7 +2,7 @@ [](https://github.com/sindresorhus/pageres) -> Capture website screenshots using [pageres](https://github.com/sindresorhus/pageres) +> Capture website screenshots using [`pageres`](https://github.com/sindresorhus/pageres) *Issues should be opened on the pageres [issue tracker](https://github.com/sindresorhus/pageres/issues).* @@ -15,27 +15,36 @@ $ npm install --save-dev grunt-pageres ``` -*PhantomJS, which is used for generating the screenshots, is installed automagically, but in some [rare cases](https://github.com/Obvious/phantomjs/issues/102) it might fail to and you'll get an `Error: spawn EACCES` error. [Download](http://phantomjs.org/download.html) PhantomJS manually and reinstall this task if that happens.* +Note to Linux users: If you get a "No usable sandbox!" error, you need to enable [system sandboxing](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#setting-up-chrome-linux-sandbox). ## Usage ```js -require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks +require('load-grunt-tasks')(grunt); grunt.initConfig({ pageres: { screenshot: { options: { - urls: 'yeoman.io', - sizes: ['1200x800', '800x600'], + urls: 'https://sindresorhus.com', + sizes: [ + '1200x800', + '800x600' + ], dest: 'dist' } }, multipleUrls: { options: { - urls: ['todomvc.com', 'google.com'], - sizes: ['800x1000', '400x1000'], + urls: [ + 'https://sindresorhus.com', + 'https://google.com' + ], + sizes: [ + '800x1000', + '400x1000' + ], dest: 'dist', crop: true } @@ -52,14 +61,14 @@ grunt.registerTask('default', ['pageres']); ### urls *Required*
-Type: `string`, `array` +Type: `string | string[]` One or more URLs or local paths to the websites you want to screenshot. ### sizes *Required*
-Type: `array` +Type: `string[]` Use a `x` notation or a keyword. @@ -81,6 +90,13 @@ 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`
@@ -94,25 +110,30 @@ Type: `string` Apply custom CSS to the webpage. Specify some CSS or the path to a CSS file. -### cookies +### script -Type: `array` of `string`, `object` +Type: `string` -A string with the same format as a [browser cookie](http://en.wikipedia.org/wiki/HTTP_cookie) or an object of what [`phantomjs.addCookie`](http://phantomjs.org/api/phantom/method/add-cookie.html) accepts. +Apply custom JavaScript to the webpage. Specify some JavaScript or the path to a file. -#### Tip +### cookies -Go to the website you want a cookie for and copy-paste it from Dev Tools. +Type: `Array` + +A string with the same format as a [browser cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) or [an object](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetcookiecookies). + +Tip: Go to the website you want a cookie for and [copy-paste it from DevTools](https://stackoverflow.com/a/24961735/64949). ### filename Type: `string` -Define a customized filename using [Lo-Dash templates](http://lodash.com/docs#template). For example `{{date}} - {{url}}-{{size}}{{crop}}`. +Define a customized filename using [Lo-Dash templates](https://lodash.com/docs#template).
+For example `<%= date %> - <%= url %>-<%= size %><%= crop %>`. Available variables: -- `url`: The URL in [slugified](https://github.com/ogt/slugify-url) form, eg. `http://yeoman.io/blog/` becomes `yeoman.io!blog` +- `url`: The URL in [slugified](https://github.com/sindresorhus/filenamify-url) 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` @@ -120,17 +141,24 @@ Available variables: - `date`: The current date (Y-M-d), eg. 2015-05-18 - `time`: 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. +Capture a specific DOM element matching a CSS selector. ### hide -Type: `array` +Type: `string[]` -Hide an array of DOM elements. +Hide an array of DOM elements matching CSS selectors. ### username @@ -146,9 +174,10 @@ Password for authenticating with HTTP auth. ### scale -Type: `number` +Type: `number`
+Default: `1` -Scale webpage `n` of times. +Scale webpage `n` times. ### format @@ -164,18 +193,18 @@ Type: `string` Custom user agent. -### transparent +### headers -Type: `Boolean`
-Default: `false` +Type: `Object` -Set background color to `transparent` instead of `white` if no background is set. +Custom HTTP request headers. -### headers +### transparent -Type: `object` +Type: `boolean`
+Default: `false` -Custom HTTP request headers. +Set background color to `transparent` instead of `white` if no background is set. ## License diff --git a/tasks/pageres.js b/tasks/pageres.js index 64ea81e..f851914 100644 --- a/tasks/pageres.js +++ b/tasks/pageres.js @@ -7,13 +7,8 @@ module.exports = grunt => { const done = this.async(); const options = this.options(); - // Legacy - if (options.url) { - throw new Error('The `url` option is no longer available. Use the `urls` option.'); - } - if (!options.urls || !options.sizes || !options.dest) { - grunt.warn('url|sizes|dest are required'); + grunt.warn('The `url`, `sizes`, and `dest` options are required'); done(); return; } @@ -25,19 +20,20 @@ module.exports = grunt => { const pageres = new Pageres(options); - arrify(options.urls).forEach(url => { + for (const url of arrify(options.urls)) { pageres.src(url, options.sizes); - }); + } - pageres.dest(options.dest) - .on('warn', grunt.verbose.writeln); + pageres.dest(options.dest); - pageres - .run() - .then(() => { + (async () => { + try { + await pageres.run(); pageres.successMessage(); done(); - }) - .catch(grunt.warn); + } catch (error) { + grunt.warn(error); + } + })(); }); }; diff --git a/test.js b/test.js index 5e39851..a8e864a 100755 --- a/test.js +++ b/test.js @@ -2,11 +2,11 @@ import test from 'ava'; import pathExists from 'path-exists'; test('pageres', t => { - t.true(pathExists.sync('tmp/yeoman.io-1000x1000.png')); - t.true(pathExists.sync('tmp/yeoman.io-100x100.png')); + t.true(pathExists.sync('temp/sindresorhus.com-1000x1000.png')); + t.true(pathExists.sync('temp/sindresorhus.com-100x100.png')); }); test('multiple URLs', t => { - t.true(pathExists.sync('tmp/yeoman.io-1000x1000.png')); - t.true(pathExists.sync('tmp/google.com-1000x1000.png')); + t.true(pathExists.sync('temp/github.com-1000x1000.png')); + t.true(pathExists.sync('temp/google.com-1000x1000.png')); });