npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

grunt-snapster

v0.0.3

Published

A grunt task to get automated snapshots of websites in several browsers using browserstack.

Downloads

6

Readme

grunt-snapster

A grunt task to get automated snapshots of websites in several browsers using the Browserstack service.

Getting Started

If you haven't used grunt before, be sure to check out the Getting Started guide.

From the same directory as your project's Gruntfile and package.json, install this plugin with the following command:

npm install grunt-snapster --save-dev

Once that's done, add this line to your project's Gruntfile:

grunt.loadNpmTasks('grunt-snapster');

Inside your grunt.js file add a section named snapster. This section specifies the tasks. Each task takes the following options.

Browserstack

You need a Browserstack Account. There is a free trial version available.

Options

credentials

This is an Object with your browerstack credentials. The credentials are important to connect to your browserstack account. It contains a username and key property. Each value must be specified as String.

Be aware to not store any secure data in a file which will be published. For this case you can store your data in an extra JSON file and link it through the file property of the credentials object. This file should be ignored in your VCS. The JSON should look like this:

{
	"username": "your-username",
	"key": "your-access-key"
}

tunnel

This option specifies your if a tunnel between browserstack and your system should be opened to enable testing of your local servers. By default, this option is set to false.

Keep in mind, when using the host property with values like 'localhost' you have to enable this option.

host

This defines the host of the site where the snapshot should be taken from. Default value is 'github.com' ;-)

port

This defines the port of the site where the snapshot should be taken from. Dafault value is 80.

pathname

This is the pathname of the site where the snapshot sould be taken from. Default value is '/'.

ssl

Defines whether to use ssl or not. By default this value is set to false.

browsers

This is an array of all browers which should be snapshooted through this task. By default its an empty array ([]). Each item in this array represents a specific browser/os/version configuration. To get a list of browser you can click here to view the BROWSERS.md.

If you want to snapshoot all currently available browsers through browserstack, change the value of this property to 'all'.

delay

Defines the time to wait between the initial request and the final snapshot. Default value is set to 2000

output

Defines the output directory were the snapshot will be saved. It supports the grunt template functions. The default value is '.grunt/snapster/<%= grunt.template.today("yyyy mmmm dS - h:MM:ss TT") %>/'.

filename

This is the schema of a filename for each snapshot. The files will be genrated with this name inside the output folder. This option supports the grunt template functions. Each property defined inside the browser object can be used in the filename. By default the filenames will use this schema: '<%= browser %><%= version %>_<%= device %>_<%= os %>-<%= osVersion %>.png'

Example

snapster: {
	credentials: {
		file: 'snapster.credentials'
	},
	tunnel: true,
	host: 'localhost',
	port: 9000,
	ssl: false,
	pathname: '/index.html',
	browsers: [
		{
			browser: 'chrome',
			browser_version: '23.0',
			device: null,
			os: 'Windows',
			os_version: '8'
		},
		{
			browser: 'firefox',
			browser_version: '7.0',
			device: null,
			os: 'OS X',
			os_version: 'Mavericks'
		}
	]
}

Browsers

You can find a list of all browsers here. To generate your own list you can call grunt snapster-browsers. This will put a BROWSERS.md inside .grunt directory in your project dir.

License

LICENSE (MIT)