<commit_before># grunt-photobox

[![Build Status](https://travis-ci.org/stefanjudis/grunt-photobox.png?branch=master)](https://travis-ci.org/stefanjudis/grunt-photobox) [![NPM version](https://badge.fury.io/js/grunt-photobox.png)](http://badge.fury.io/js/grunt-photobox) [![Dependency Status](https://gemnasium.com/stefanjudis/grunt-photobox.png)](https://gemnasium.com/stefanjudis/grunt-photobox) [![Code Climate](https://codeclimate.com/github/stefanjudis/grunt-photobox.png)](https://codeclimate.com/github/stefanjudis/grunt-photobox)

![image](https://raw.github.com/stefanjudis/grunt-photobox/master/tasks/assets/img/photoBox.png)

> Plugin to prevent your project of broken layout via screenshot photo sessions of your site.

## Getting Started
This plugin requires Grunt `~0.4.1`

If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

```shell
npm install grunt-photobox --save-dev
```

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

```js
grunt.loadNpmTasks('grunt-photobox');
```

## The "photobox" task

### Overview
In your project's Gruntfile, add a section named `photobox` to the data object passed into `grunt.initConfig()`.

```js
grunt.initConfig({
  photobox: {
  	task : {
      options: {
      	// Task-specific options go here.
      }
    }
  },
})
```

Photobox helps you to not deploy any broken layout to production. It takes screenshots of you current site.

**Additionally you got the feature, to keep the last photosession and to overlay old and new screenshots, to see even better if something is broken or not. BE ALWAYS SURE, THAT YOU HAVEN'T BROKEN LAYOUT THE EASY WAY.**

#### Default representation (no diff generation but overlay option):

![image](https://raw.github.com/stefanjudis/grunt-photobox/master/tasks/assets/img/default.png)

#### ImageMagick representation (generated diff):

![image](https://raw.github.com/stefanjudis/grunt-photobox/master/tasks/assets/img/imageMagick.png)

### Options

#### options.indexPath
Type: `String`

Default value: `photobox/`

A string value that is used to set the path to the generated images and **index.html**.

Per default a ```photobox``` folder will be generated and inside of that folder an index.html is located to check for broken layout.

#### options.screenSizes !changed since version 0.5.0
Type: `Array`

Default value: `[ '800' ]`

An array containing strings, that represents the wished width of the taken pictures. The height will be calculated automatically depending on the given site.

E.g. **'800'** -> width: 800px;

**NOTE: Values like '800x600' are deprecated since version 0.5.0.**

#### options.urls
Type: `Array`

Default value: `[ 'http://google.com' ]`

An array containing strings, that represents the wished urls for the photosession.

#### options.userName
Type: `String`

Default value: ``

A string representing the username in case of HTTP-Authentification.

#### options.password
Type: `String`

Default value: ``

A string representing the password in case of HTTP-Authentification.

#### options.useImageMagick
Type: `Boolean`

Default value: false

Switch on the usage of imageMagick to see the difference of old and new images even clearer.
**make sure imageMagick and included commands are installed on your system:**
Check the following commands in your environment:

```
$ which covert
/opt/local/bin/convert
```
```
$ which composite
/opt/local/bin/composite
```

#### options.highlightColor !deprecated since version 0.5.0
Type: `String`

Default value: `crimson`

If you switched on the usage of ImageMagick you have got the possibility to set the highlight color for the generated diff images to make it fit for your project. Choose a color of this [list](http://www.imagemagick.org/script/color.php).

**NOTE: This option is not suported anymore since version 0.5.0.**

### Usage Examples

#### Default Options
In this example, the default options are used to do just show what is possible. Run ```grunt photobox``` without any custom options and you will get a new file at ```photobox/index.html```.

It will consist of a screenshot for the default url ( http://google.com ) in the default width 800px.

```js
grunt.initConfig({
  photobox: {
  	task: {
	  options: {}
	}<commit_msg>fixed type in readme<commit_after># grunt-photobox

[![Build Status](https://travis-ci.org/stefanjudis/grunt-photobox.png?branch=master)](https://travis-ci.org/stefanjudis/grunt-photobox) [![NPM version](https://badge.fury.io/js/grunt-photobox.png)](http://badge.fury.io/js/grunt-photobox) [![Dependency Status](https://gemnasium.com/stefanjudis/grunt-photobox.png)](https://gemnasium.com/stefanjudis/grunt-photobox) [![Code Climate](https://codeclimate.com/github/stefanjudis/grunt-photobox.png)](https://codeclimate.com/github/stefanjudis/grunt-photobox)

![image](https://raw.github.com/stefanjudis/grunt-photobox/master/tasks/assets/img/photoBox.png)

> Plugin to prevent your project of broken layout via screenshot photo sessions of your site.

## Getting Started
This plugin requires Grunt `~0.4.1`

If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

```shell
npm install grunt-photobox --save-dev
```

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

```js
grunt.loadNpmTasks('grunt-photobox');
```

## The "photobox" task

### Overview
In your project's Gruntfile, add a section named `photobox` to the data object passed into `grunt.initConfig()`.

```js
grunt.initConfig({
  photobox: {
  	task : {
      options: {
      	// Task-specific options go here.
      }
    }
  },
})
```

Photobox helps you to not deploy any broken layout to production. It takes screenshots of you current site.

**Additionally you got the feature, to keep the last photosession and to overlay old and new screenshots, to see even better if something is broken or not. BE ALWAYS SURE, THAT YOU HAVEN'T BROKEN LAYOUT THE EASY WAY.**

#### Default representation (no diff generation but overlay option):

![image](https://raw.github.com/stefanjudis/grunt-photobox/master/tasks/assets/img/default.png)

#### ImageMagick representation (generated diff):

![image](https://raw.github.com/stefanjudis/grunt-photobox/master/tasks/assets/img/imageMagick.png)

### Options

#### options.indexPath
Type: `String`

Default value: `photobox/`

A string value that is used to set the path to the generated images and **index.html**.

Per default a ```photobox``` folder will be generated and inside of that folder an index.html is located to check for broken layout.

#### options.screenSizes !changed since version 0.5.0
Type: `Array`

Default value: `[ '800' ]`

An array containing strings, that represents the wished width of the taken pictures. The height will be calculated automatically depending on the given site.

E.g. **'800'** -> width: 800px;

**NOTE: Values like '800x600' are deprecated since version 0.5.0.**

#### options.urls
Type: `Array`

Default value: `[ 'http://google.com' ]`

An array containing strings, that represents the wished urls for the photosession.

#### options.userName
Type: `String`

Default value: ``

A string representing the username in case of HTTP-Authentification.

#### options.password
Type: `String`

Default value: ``

A string representing the password in case of HTTP-Authentification.

#### options.useImageMagick
Type: `Boolean`

Default value: false

Switch on the usage of imageMagick to see the difference of old and new images even clearer.
**make sure imageMagick and included commands are installed on your system:**
Check the following commands in your environment:

```
$ which covert
/opt/local/bin/convert
```
```
$ which composite
/opt/local/bin/composite
```

#### options.highlightColor !deprecated since version 0.5.0
Type: `String`

Default value: `crimson`

If you switched on the usage of ImageMagick you have got the possibility to set the highlight color for the generated diff images to make it fit for your project. Choose a color of this [list](http://www.imagemagick.org/script/color.php).

**NOTE: This option is not supported anymore since version 0.5.0.**

### Usage Examples

#### Default Options
In this example, the default options are used to do just show what is possible. Run ```grunt photobox``` without any custom options and you will get a new file at ```photobox/index.html```.

It will consist of a screenshot for the default url ( http://google.com ) in the default width 800px.

```js
grunt.initConfig({
  photobox: {
  	task: {
	  options: {}
	}
{'fraction_non_alphanumeric': 0.11852175814563744, 'fraction_numerical': 0.007216269407391209, 'mean_word_length': 4.5168878166465625, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 20, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2508428', 'n_tokens_mistral': 2925, 'n_tokens_neox': 2736, 'n_words': 1001}