grunt-lib-phantomjs
Grunt and PhantomJS, sitting in a tree.
Usage
The best way to understand how this lib should be used is by looking at the grunt-contrib-qunit plugin. Mainly, look at how the lib is required, how event handlers are bound and how PhantomJS is actually spawned.
Also, in the case of the grunt-contrib-qunit plugin, it's important to know that the page being loaded into PhantomJS doesn't know it will be loaded into PhantomJS, and as such doesn't have any PhantomJS->Grunt code in it. That communication code, aka. the "bridge", is dynamically injected into the html page.
An inline example
If a Grunt task looked something like this:
grunt.registerTask('mytask', 'Integrate with phantomjs.', function() {
var phantomjs = require('./lib/phantomjs').init(grunt);
var errorCount = 0;
phantomjs.on('mytask.ok', function(msg) {
grunt.log.writeln(msg);
});
phantomjs.on('mytask.error', function(msg) {
errorCount++;
grunt.log.error(msg);
});
phantomjs.on('mytask.done', function() {
phantomjs.halt();
});
var done = this.async();
phantomjs.spawn('test.html', {
options: {},
done: function(err) {
done(err || errorCount === 0);
}
});
});
And test.html
looked something like this (note the "bridge" is hard-coded into this page and not injected):
<!doctype html>
<html>
<head>
<script>
function sendMessage() {
var args = [].slice.call(arguments);
alert(JSON.stringify(args));
}
sendMessage('mytask.ok', 'Something worked.');
sendMessage('mytask.error', 'Something failed.');
sendMessage('mytask.done');
</script>
</head>
<body>
</body>
</html>
Then running Grunt would behave something like this:
$ grunt mytask
Running "mytask" task
Something worked.
>> Something failed.
Warning: Task "mytask" failed. Use --force to continue.
Aborted due to warnings.
Release History
- 2013-02-28 - v0.2.0 - Use PhantomJS 1.8.1.
- 2012-12-21 - v0.1.0 - Use PhantomJS 1.7.0.