Hnoss

Hnoss

記事数がいつの間にか100になっていました。
カレンダー

文書タグ

フノス(訳者)(110) IT(82) オープンソース(48) 解説記事(38) Linux(29) DTM(19) HTML5(19) Libre Music(18) メディア(16) おすすめ オープンソース・ソフトウェア(16) 百科事典(14) プラグイン(13) 文化(12) ミキシング(11) コンテナ(11) ソフトウェア(11) 録音(11) MIDI(10) 西アジア/中東(10) 料理(9) ジョージア(9) グルジア(9) 東ヨーロッパ(9) 音楽編集(8) シーケンス(8) 芸能(8) マスタリング(7) ウェブ制作(7) 音楽(7) 経済(6) JACK(5) セキュリティ(5) 業務効率化(4) 音楽プレーヤー(4) コマンド(4) マイクロサービス(4) 映像制作(4) ソーシャルメディア(3) アプリ(3) GNU(3) DAW(3) 欧州(3) Ubuntu(3) 北米(3) アニメ(3) ホームオートメーション(3) アニメーション(3) IoT(3) Google(3) Ardour(3) 社会(3) Windows(3) WordPress(3) Android(3) エジプト(2) ALSA(2) OS X(2) トヨタ(2) Krita(2) ERP(2) バト(2) ウィッカ(2) Twitter(2) GPL(2) オカルト(2) ロスレス音源(2) Python(2) スマホ(2) 牛(2) ニュース(2) GNOME3(2) 歴史(2) 仮想通貨(2) マーケティング(2) PlayStation(2) 古代エジプト(2) 有角神(2) Java(2) ERPシステム(2) ワークフロー(2) 出エジプト記(1) 観光案内(1) ツイッター(1) Youtube(1) パキスタン(1) CC(1) ハトホル(1) パン(1) 地方(1) 電子書籍(1) 羊神(1) ギリシャ(1) 高速道路情報無線(1) ゲーム(1) 法律(1) 中南米(1) モヘンジョ=ダロ(1) 悪魔(1) ラジオ(1) OpenToonz(1) 電子教材(1) アレクサンドロス大王(1) ローマ(1) ポッドキャスト(1) パシュパティ(1) アピス(1) 宗教(1) テレビ(1) BountySource(1) 船乗りの柱(1) シリア(1) GPS(1) アフリカ(1) リグ・ヴェーダ(1) F-Droid(1) 教育(1) bi-modal IT(1) ムネヴィス(1) ネオペイガニズム(1) コミュニティ放送(1) アンビソニック(1) Papagayo(1) 写真(1) 元ネタ(1) ケルヌンノス(1) ナイジェリア(1) 聖書(1) 任天堂 DS(1) 学校(1) 日本(1) 魔女宗(1) アクティブSETI(1) バイノーラル(1) アップストリーム・パッケージング(1) 画像(1) 意味(1) コシディウス(1) インド(1) ユーコン(1) サウンドフォント(1) ヤーウェ(1) CD(1) タブレット(1) 羊(1) ベルゼブブ(1) デジタルサイネージ(1) VR(1) ポータブルソフトウェア(1) 由来(1) グンデストルップの大釜(1) カナン(1) カナダ(1) 詩篇(1) チップチューン(1) バ・ネブ・デデト(1) コットン・マザー(1) クラウドキャスティング(1) VST(1) リーナス・トーバルズ(1) エリファス・レヴィ(1) マサチューセッツ(1) 考古学(1) 申命記(1) スタジオジブリ(1) クヌム(1) 魔女裁判(1) オンデマンド(1) 政治(1) バフォメット(1) 国際(1) クリエイティブ・コモンズ(1) 黙示録(1) Synfig(1) 独占(1) アモン(1) セイラム魔女裁判(1) ねじ巻きラジオ(1) 3D(1) EU(1) イボ人(1) 国際公文書館会議(1) マイナビ(1) キリスト教(1) レビ記(1) アマナイ(1) 広告(1) KXStudio(1) 絵文字(1) サンフランシスコ(1) イケンガ(1) リクルート(1) ユダヤ教(1) ウルガタ聖書(1) 科学技術(1) Blender(1) 電子ブック(1)
リファレンス

first-time visitors
user guide
謝辞

「みんなの翻訳」は情報通信研究機構言語翻訳グループ東京大学図書館情報学研究室による共同プロジェクトであり、三省堂国立情報学研究所連想情報学研究開発センターが開発に協力しています。三省堂には「グランドコンサイス英和辞典(36万項目収録)」の使用を許可していただきました。

連携研究グループはこちらをご覧ください。

「みんなの翻訳」を使っている翻訳グループについてはこちらをご覧ください。

バナー

logo

ポスター

poster

フライヤー

poster poster
Mozilla Firefox ブラウザ無料ダウンロード
本サイトはブラウザ「Mozilla Firefox」推奨です。
Firefox3で動作確認しています。

Valid XHTML 1.0 Transitional

site_image
Brunch: Plugin API
http://brunch.io/docs/plugins
Hnoss Hnoss     最終更新:2017-06-08 16:00:45    PDF


とめページで見る

 Brunchプラグインはコンフィグで設定されたプレーンJSクラスです。

解説

プラグインは「ファイル・エンタイトル」という方式で動いています。

{
  "data": "var hello = 42;\n",
  "path": "app/file.js"
}

このように、ファイルは単純なJSオブジェクトで構成されているのがわかります。オブジェクトには以下の4種類が挙げられます。

  • path - ファイルへのシステムパス 
  • data -JSストリングをのデータを入れたファイル 
  • map - ソースマップ 
  • その他すぐさまプラグインとして使えるもの全般

パイプライン
Brunchのパイプラインは次のように実行されます。

// [内部] Chokidarによってファイルの監視は常に行われている
// ファイルの追加、あるいは改変が行われ次第、パイプラインが開始される

watch(files)
|
// ファイルの追加、あるいは改変が行われ次第、パイプラインが開始される
// どのファイルに修正があったかを確認する
lint(file): Boolean
|
// ファイルの依存関係を洗い出す
getDependencies(file): Array[Path]
|
// ファイルコンテンツをjs, cssなどに変える
compile(file): File
|
// [内部] モジュール定義に従いファイルをラップする
wrap(file): File
|
// [内部] たくさんのファイルを1つに連結する
concat(files): File
|
// output JS / CSS をdifferent JS / CSS に変換する
optimize(file): File
|
// コンパイル終了
onCompile(files, assets)



Method: getDependencies(file): Array[Path]

ファイルを受け取り次第、依存関係にあるファイルのパスを一通り確認する

Method: lint(file): Promise(ok, Error)

どのファイルに修正があったかを確認する

Method: compile(file): File

ソースファイルをJSかCSSにコンパイルする

CSSコンパイラには、exportキーを使って結果報告を作成するオプションがある。キーは(モジュールで書き出される)JavaScriptコードのストリングである。このJSコードはプロジェクトコードがスタイルシートを必要とした場合にバンドルに追加される。

Method: compileStatic(file): File

静的アセットをコンパイルする

Method: optimize(file): File

compiled JS / CSS をoptimized JS / CSS に変換する

Hook: preCompile

最初のコンパイルの前にのみ呼び出される

Hook: onCompile

パイプラインのコンパイルが終わるたびに呼び出される

Hook: teardown

ウェブサーバーや長時間運用エンティティの停止を許可する。Brunchのプロセスが終了する前に実行される

Property: type

ストリング。プラグインを適用するファイルの種類を指定する。JavaScript、スタイルシート、テンプレートに適用させることができる。

Property: include

アレイ。ビルドに含まれることになる追加ファイルを指定する

Property: extension

ストリング。プラグインによって処理されるファイル拡張子を指定する

Property: pattern

正規表現。拡張子よりも融通が利き、複数の拡張子を処理することもできる。この部分が指定されると、拡張子が無視されるようになるからだ。コンパイラとリンターにとってパターンや拡張子は必要なものだが、オプティマイザーには必要がない。

Property: targetExtension

ストリング。コンパイラのチェーン作成に便利。処理対象のファイルの拡張子を指定する。たとえば、postcss-brunch が拡張子でファイルを識別できるように、less-brunch を .less や .cssに変更することができる。

Property: staticExtension

ストリング。オプション。extensionと機能は大体同じだが、静的アセットを処理する時に拡張子の変更を許可する。変更が指定されなかった場合、代わりの拡張子が適用される。

Property: staticPattern

ストリング。オプション。patternと機能は大体同じだが、静的アセットを処理する時に拡張子の変更を許可する。変更が指定されなかった場合、代わりの正規表現が適用される。

Property: staticTargetExtension

ストリング。スタティック・コンパイラを使うにはこれが必要。静的アセットの処理に新しく拡張子を指定する。拡張子が先に指定されていた場合は、それをそのまま使用する。正規表現が指定されていた場合、すべてのパターンマッチがstaticTargetExtensionに差し換えられる。

Samples

Boilerplate plugin

ボイラープレートプラグインのメカニズムは次の通りです。これを参考に、ご自身のプラグインづくりにお役立てください。

'use strict';

// Brunchプラグインの説明は下のページに記されています:
// https://github.com/brunch/brunch/blob/master/docs/plugins.md

// 必要のないプラグインを削除します

class BrunchPlugin {
  constructor(config) {
// 'plugin'の部分は、これから使うプラグイン名に置き換えてください。 // コンフィギュレーション・キーに'brunch' や 'plugin'という単語を入れないでください。
  this.config = config.plugins.plugin || {};
  }

  // 以下はオプションです。必要に応じて入れてください。
  // ビルドに含まれる追加ファイルを指定するには
 // get include() { return ['path-to-file-1', 'path-to-file-2']; }

 // file: File => Promise[Boolean]
 // 各コンパイルの前に呼び出されるものを指定します。 エラーが発生すると停止します。
 // 例: ESLint, JSHint, CSSCheck.
 // lint(file) { return Promise.resolve(true); }

 // file: File => Promise[File]
 // ファイルデータを他のファイルに変換します。 これによりソースマップなどが変換できます。
 // 例: JSX, CoffeeScript, Handlebars, SASS.
 // compile(file) { return Promise.resolve(file); }

 // file: File => Promise[Array: Path]
 // Brunch に ファイルの依存関係の算出を許可し、それらのファイルをリコンパイルさせる
 // 例: SASS '@import's, Jade 'include'-s.
 // getDependencies(file) { return Promise.resolve(['dep.js']); }


 // file: File => Promise[File]
 // 通常は、 圧縮(minify)か 最適化(optimize)を the end-resultに呼び出します。
 // 例: UglifyJS, CSSMin.
 // optimize(file) { return Promise.resolve({data: minify(file.data)}); }

 // files: [File] => null
 // 各コンパイルが終了すると実行されます  
 // 例: Hot-reload (a websocket pushを送る).  
 // onCompile(files) {}

 // ウェブサーバーとその他 long-running entitiesの停止を許可します
 // Brunchプロセスが閉じられる前に実行されます
 // teardown() {}

}

// すべてのBrunch pluginに必要です
BrunchPlugin.prototype.brunchPlugin = true;

// コンパイラ、リンター、オプティマイザ に必要です
// 'javascript', 'stylesheet', 'template' のいずれかを選択できます
// BrunchPlugin.prototype.type = 'javascript';



// コンパイラとリンターに必要です
// 処理から除外されるファイル・リストを指定します
// BrunchPlugin.prototype.extension = 'js';
// BrunchPlugin.prototype.pattern = /\.jsx?$/;
// `extension`よりも`pattern` のほうが推奨されます
// どちらの方式をとるかを選択してください


// プラグインが動作する環境を指定します
// デフォルトでは「 '*' 」 に設定されており、たいていのプラグインが動作します
// オプティマイザを使うには'production'に設定する必要があります
// BrunchPlugin.prototype.defaultEnv = 'production';

module.exports = BrunchPlugin;

CSS compiler example

このプラグインは単に読み込まれコンテンツとして反映されます。

class CSSCompiler {
 compile(file) {
  return Promise.resolve(file);
 }
}

CSSCompiler.prototype.brunchPlugin = true; CSSCompiler.prototype.type = 'stylesheet'; CSSCompiler.prototype.extension = 'css';

module.exports = CSSCompiler;

Minifier example

ソースマップで使われるファイル圧縮のメカニズムは以下のとおりです。

class UglifyOptimizer {
  constructor(config) {
   this.config = config.plugins.uglify;
   this.isPretty = this.config.pretty;
  }

  optimize(file) {
   try {
   const optimized = minifier(file.data, {
    fromString: true,
    inSourceMap: file.map,
    pretty: this.isPretty
   });
   return Promise.resolve(optimized);
  } catch (error) {
   return Promise.reject(error);
  }
 }
}

UglifyOptimizer.prototype.brunchPlugin = true;
UglifyOptimizer.prototype.type = 'javascript';
UglifyOptimizer.prototype.extension = 'js';

module.exports = UglifyOptimizer;

 プラグインのリストは「プラグイン」に掲載されています。plugins.json を編集してリクエストを送っていただければそのリストに新しいプラグインを載せられます。


スタイルシートからJSを書き出す

 Brunch 2.6を開始時点では、non-JSコンパイラにJavaScriptモジュールをアウトプットさせるためには設定が必要です。

 よくある例が、CSSモジュールに対応したスタイラス・コンパイラに、次のような設定を行うことです:

.button
 margin: 0


const style = require('./button.styl');
// ...
// style.button will return the obfuscated class name (something like "_button_xkplk_42" perhaps)
<div className={style.button}>...</div>

どのコンパイラにも、exportsの項目で {data, map}:の情報を追加する必要があります。

class MyCompiler {
 compile({data, path}) {
  const compiled = magic(data);
  const mapping = mappingMagic(data);
  const exports = `module.exports = ${JSON.stringify(mapping)};`;

  return Promise.resolve({ data: compiled, exports });
 }
}

注意:書き出したJSファイルのコンパイルやリンター付けは、他のどのプラグインでも行われません。それらの項目はすべて手動で設定する必要があります。書き出したJSファイルはご自分で収容してください。

静的ファイルコンパイラ(Static file compilers)

 たまにですが、Brunchの「コンパイルに加える設定」に直接記述しても適用されないファイルがあります。
 HTML用Jadeテンプレートがその一種です。.jadeファイルを.htmlファイルにコンパイルさせるときには、あらかじめ、onCompileにhookをかけさせなければ.jadeファイルは認識されません。お手数ですが、手動でコンパイルしてください。

Brunch 2.8.0の場合、次のように設定するのがよいと思われます。

class JadeCompiler {
  compileStatic({data, path}) {
   return new Promise((resolve, reject) => {
   toHtml(path, data, (err, data) => {
    if (err) reject(err);
     else resolve(data);
   });
  });
 }
}
JadeCompiler.prototype.brunchPlugin = true;
JadeCompiler.prototype.type = 'template';
JadeCompiler.prototype.extension = 'jade';
// 静的ファイルの拡張子は`extension`のかわりに次のように変更できます:
// JadeCompiler.prototype.staticExtension = 'static.jade';
// この拡張子は、静的コンパイルを行ったあとに、Brunchがファイルを識別するために使われます

JadeCompiler.prototype.staticTargetExtension = 'html';

 通常のコンパイラではコピーするだけで終わるところを、静的コンパイラはアセットフォルダ(デフォルト:app/assets)からファイルを処理します。
 これにより、app/assets/index.jadeはpublic/index.htmlに変換されるのです。

getDependenciesが「regularファイル」と「アセットファイル」の両方を呼び出すでしょう。

NPMの公開

 開発したプラグインを皆さんにお使いいただけるように、「新NPMパッケージ」として公開することができます。

 それから、プラグイン一覧にあなたのプラグインを掲載すれば、さらにその存在を皆さんに知らせることができるでしょう。

ヒント

Brunchのプラグインは極力シンプルに構成されています。GruntやGulpなど、他のタスクランナーが使っているプラグインをコピーして使用してはいけません。

コンフィグ

トラブルシューティング

Githubでこのページを編集する

原文:http://brunch.io/docs/plugins
Creative Commons License
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス外部リンク
新着文書(Hnoss)

Pluguins - Brunch
プラグイン    ➡ まとめページで見る  新しくプラグインを導入したいときは、「npm install --save-dev プラグイン名」でインスト...
How to create a blog with AsciiDoc | Opensource.com / Andrew Thornton
 AsciiDocマークアップ言語とHugoパブリッシング・プラットフォームを組み合わせると、動作が軽く、メンテナンスが簡単なウェブサイトやブログを作...
Hugo Static Site Generator with CI Deployment using GitLab | Leow Kah Man - Tech Blog
 週末にかけて、GitHubに構えていた私のブログをGitLabに移転しました。GitLabだとClビルドが自動的にできるところが便利です。  僕はGitLabのレポ...
Skeletons ― Brunch
スケルトン     ➡ まとめページで見る  Brunchのスケルトンは基本的に、アプリケーションの定型文セットになっています。アプリケ...

新着文書

What do women’s rights have to do with the SDGs and the internet?
女性の権利はSDGsとインターネットにどのような関係があるか? 2017年8月2日、スリランカ 女性は均質な集団ではなく、科学技術へのアクセスもまた、...
Sexual rights and the internet: Third EROTICS global survey now launched!
性的権利とインターネット:第3回EROTICS国際調査、現在開始! 2017年7月19日 EROTICS国際調査が戻ってきた! もしあなたが、インターネットを自ら...
An ongoing conversation on feminist autonomous infrastructure: Erika Smith and Kéfir
フェミニストの自律的な基盤に関する継続中の会話:エリカ・スミスとKéfir 2017年8月2日、メキシコ 2017年7月に始動した小さな資金調達とし...

新着Wikipedia翻訳

aplay
 aplayとは ALSA sound card driver 用の コマンドライン オーディオファイルプレーヤーである。復数種類の ファイル形式 、様々なデバイスのサ...
End-to-end encryption
終端間暗号化 終端間暗号化(E2EE: End-to-end encryption)は、通信中のユーザのみがメッセージを読むことのできる通信方式である。原理的には、潜...
Trust on first use
Trust on first use その他の用法については「 Tofu(曖昧さ回避) 」をご覧ください。 Trust On First Use (TOFU)または Trust Upon First...

更新履歴

※文書量によっては処理に数十秒かかる場合があります
バージョン 比較対象 更新日時 更新者
1(最新) 2017-06-08 16:00:43 Hnoss
2 2017-05-17 14:35:06 Hnoss
3 2017-05-17 14:30:02 Hnoss
4 2017-05-17 14:27:53 Hnoss
5 2017-05-17 13:06:53 Hnoss
6 2017-05-17 13:06:17 Hnoss
7 2017-05-17 12:36:21 Hnoss
8 2017-05-17 12:33:30 Hnoss
9 2017-05-17 12:31:48 Hnoss
10 2017-05-16 22:49:32 Hnoss

    
ブックマーク登録

タグを「;(半角セミコロン)」区切りで入力して下さい(例)tag1;tag2;tag3
10タグまで登録可能。各タグ30文字まで

履歴
状態 作業中 作業予定あり 作業予定なし 作業完了
テーマ 社会 政治 法律 経済 文化 芸能 科学技術 IT 健康/医療 スポーツ メディア 植物 動物 菌類 地方 国際
地域 日本 東アジア アフリカ 南アジア 東南アジア 西アジア/中東 太平洋 北米 中南米 欧州
ジャンル ニュース 解説記事 論文 日記 百科事典

コメントを入力して下さい
0 / 250
    
ブックマーク登録

ブックマークに登録しました。


言語選択

    
ファイルプロパティ

使用許諾条件
ファイル情報
あなただけがこのファイルを閲覧・編集できます。
みんながこのファイルを閲覧できますが、
編集ができるのはあなただけです。
あなたに加えて、指定された人やグループが
このファイルを自由に閲覧・編集できます。
公開設定
編集設定
グループ:0組 翻訳者:0人
    
アクセス属性
この文書は「非公開」設定になっています。
一般公開する場合は、編集ページの書誌情報で「公開」設定に変更して下さい。
翻訳者選択

※メニュー「翻訳者管理」で翻訳者、グループを追加することができます。


    
ノート

非公開ノート
0 / 2000 ※「公開・編集」権限を持つ翻訳者のみに公開されます。
公開ノート
0 / 2000 ※文書を「公開」にした場合、一般に公開されます。

言語選択

 →