flyで画像減色プラグインを書いてみる
はじめに
flyのプラグインを適当に書いてみました。
flyってなんだよという方は
FlyでES6/7時代のJavaScriptビルドシステムとやらを体験してみた
Gruntやgulp等に続くタスク自動化ツール「Fly」の導入手順
などの分かりやすい記事があるので読んでみるとだいたい分かると思います。
公式のドキュメントにプラグインに関しての記述があります。(日本語版より英語版の方が詳しいので英語版をおすすめします)
あとyeomanでテンプレートも提供されています。
実際に作ったもの
pngquantを使って任意の画像を減色するプラグインを書いてみました。
const execFile = require('child_process').execFile;
const pngquant = require('pngquant-bin');
const imagemin = (options, cb) => {
execFile(pngquant, ['-ext', '.png', options.color, options.src, '--force'], (err) => {
cb(null);
});
};
// プラグインの定義
// imageがflyfile側で呼び出すメソッド名になる
// optionsにはsrc, colorが渡される
module.exports = function () {
this.image = (options) => {
return this.defer(imagemin)(options);
};
};
export default function* () {
yield this
.image({
src: 'img/test.png',
color: 256
})
}
感想
特に何も設定せずにES6で書けるのいいですね。
Fly.prototype.watchとか使えば任意のディレクトリを監視して画像が追加されたら減色とか出来そう？
今回はoptionに全て値を渡してしまったので、次はflyから提供されているメソッドをもう少し使って何か書きたいと思います。
あとimagemin関数にcbが渡されているのに気付かずfinish logが出力されずハマりました。
プラグインはまだ5,60ぐらいしかなさそうなので色々作るチャンスだと思います(・∀・)
Author And Source
この問題について(flyで画像減色プラグインを書いてみる), 我々は、より多くの情報をここで見つけました https://qiita.com/kus0tenpa/items/8c12304f9b2f1e7c82b3著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .