gulp-webshotで成果物のキャプチャをパシャパシャ取る

node-webshotをラップしたgulp-webshotを使って、静的HTMLのキャプチャをまとめて撮ってみました。

レンダリングはヘッドレスブラウザであるPhantomJSが行うので、IEやFirefoxとはまた違う結果になる可能性があります。

実際使う場合のサンプルをつくってみました。数行なので大したことないですが…。

PhantomJS をインストールして、npm install でセットアップすれば、キャプチャ環境が出来上がります。

大したサンプルではないですが、オプションを渡して、実行して上げるだけです。

var gulp = require('gulp');
var webshot = require('gulp-webshot');

var options = {
 root: 'public/',
 dest: 'capture/',
 defaultWhiteBackground: true
}

gulp.task('default', function(){
 gulp.src('public/**/*.html')
 .pipe(webshot(options));
});

gulpでキャプチャを撮るなんてのはもっとありそうなもんだったのですが、以外にgulp-webshotくらいしか無かった…。

WebDriverでブラウザを動かして撮るほうが実際の環境に近いので、確認ならそっちで行ったほうがいいかもしれませんが、

その環境を整えるよりは割と簡単にキャプチャを実行できるので、その点はおすすめです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする