Grunt plugin for phantomas
This plugin requires Grunt ~0.4.1
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-phantomas --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-phantomas');
You're looking for a tool that gives you detailed metrics about your site? Great!!!
This grunt plugin executes phantomas for you and visualizes the returned metrics in a generated index.html
for you. It will keep track of history, so that you can set it up and check reports after every deployment of your site.
Examples of rendered output:
- metrics for http://gruntjs.com -> here
I'm still at early stage, but I think you can already work with it. ;)
In your project's Gruntfile, add a section named phantomas
to the data object passed into grunt.initConfig()
.
grunt.initConfig( {
phantomas: {
gruntSite : {
options : {
indexPath : './phantomas/',
raw : [],
url : 'http://gruntjs.com/'
}
}
}
} )
Type: String
Default value: ./phantomas/
A string value that represents the relative path to the place where phantomas
will render your metrics. Inside of this folder an index.html
, a data folder and an assets folder will be created.
Type: 'Number'
Default value: 5
A numeric value that represents the number of times the phantomas
executable will be started. The more times it runs the more reliable metrics become.
Type: Array
Default value: []
An array that represents raw commands that can be passed to phantomas
executable. See usage examples later on.
Type: String
Default value: http://gruntjs.com/
A string value that represents the url of the site, which will be analyzed by phantomas
.
In this example, the default options are used to fetch metrics of http://gruntjs.com
and render the visualized metrics at ./phantomas
.
grunt.initConfig({
phantomas: {
yourSite: {}
},
})
In this example, custom options are used to fetch metrice of http://yoursite.com
and render the visualized metrics at ./yoursite/
.
grunt.initConfig( {
phantomas: {
yourSite : {
options : {
indexPath : './yoursite/',
raw : [],
url : 'http://yoursite.com/',
numberOfRuns : 10
}
}
}
} )
In this example, the raw option is used to set phantomas
execution parameters. In this case all external script except the defined ones are blocked by phantomas
, what can become really handy, when dealing with a lot of third party scripts that influence your site performance.
grunt.initConfig( {
phantomas: {
yourSite : {
options : {
indexPath : './yoursite/',
raw : [
'--no-externals',
'--allow-domain=cdn.yoursite.com.br,ajax.googleapis.com'
],
url : 'http://yoursite.com'
}
}
}
} )
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Please check release history at Github. :)