Hnoss

Hnoss

さーてと。GitLabランナーのインストール編終了です!
カレンダー

文書タグ

フノス(訳者)(156) IT(128) 解説記事(83) オープンソース(49) GitLab CI(35) Linux(32) メディア(32) ウェブ制作(23) DTM(19) HTML5(19) Libre Music(18) コンテナ(18) おすすめ オープンソース・ソフトウェア(17) 百科事典(14) プラグイン(13) 文化(12) ソフトウェア(11) 録音(11) ミキシング(11) MIDI(10) 西アジア/中東(10) グルジア(9) 東ヨーロッパ(9) 料理(9) ジョージア(9) セキュリティ(8) シーケンス(8) 芸能(8) 音楽編集(8) 音楽(7) マスタリング(7) 経済(6) WordPress(5) アプリ(5) 業務効率化(5) JACK(5) コマンド(5) Google(4) Windows(4) 映像制作(4) Android(4) GNU(4) 音楽プレーヤー(4) マイクロサービス(4) 北米(3) アニメ(3) ホームオートメーション(3) アニメーション(3) IoT(3) Ardour(3) 社会(3) Java(3) ワークフロー(3) ソーシャルメディア(3) DAW(3) 欧州(3) Ubuntu(3) Python(3) 牛(2) ニュース(2) GNOME3(2) 歴史(2) 仮想通貨(2) マーケティング(2) PlayStation(2) 古代エジプト(2) 有角神(2) ERPシステム(2) 電子ブック(2) エジプト(2) ALSA(2) OS X(2) トヨタ(2) Krita(2) 電子書籍(2) ERP(2) バト(2) ウィッカ(2) Twitter(2) GPL(2) オカルト(2) ロスレス音源(2) iOS(2) スマホ(2) 魔女宗(1) アクティブSETI(1) バイノーラル(1) アップストリーム・パッケージング(1) 画像(1) 意味(1) コシディウス(1) インド(1) ユーコン(1) サウンドフォント(1) UNIX(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) 観光案内(1) ツイッター(1) Youtube(1) パキスタン(1) CC(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) リグ・ヴェーダ(1) F-Droid(1) 教育(1) bi-modal IT(1) ムネヴィス(1) ネオペイガニズム(1) コミュニティ放送(1) アンビソニック(1) Papagayo(1) 写真(1) 元ネタ(1) ケルヌンノス(1) ナイジェリア(1) 聖書(1) 任天堂 DS(1) 学校(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)

GitLab CI push output to GitHub | Leow Kah Man - Tech Blog
 今僕は、GitLabでウェブサイトを公開するためにGitLab CIランナーを使っています。でも、今度はそれをGitHub pagesでも公開できるようにしてみたい...
Hugo Static Site Generator with CI Deployment using GitLab | Leow Kah Man - Tech Blog
 週末にかけて、GitHubに構えていた私のブログをGitLabに移転しました。GitLabだとCIビルドが自動的にできるところが便利です。  僕はGitLabのレポ...
Install GitLab Runner
GitLab Runner > GitLab Runnerをインストールする  GitLab Runnerは、GNU/Linux、 macOS、 FreeBSD、 Windowsでインストールと使用すること...
GitLab Runner bleeding edge releases
GitLab Runner > GitLab Runnerをインストールする >nightly版をインストールする 警告: この操作でインストールされるランナーは、まだテ...

新着文書

Revisit to resist: Histories of the movement to end gender-based violence
抵抗のための再検討:ジェンダーに基づく暴力を終わらせるための活動の歴史 2017年11月8日 記憶は抵抗である。あなたの話が沈黙させられ挑まれたな...
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国際調査が戻ってきた! もしあなたが、インターネットを自ら...

新着Wikipedia翻訳

Air gap malware
エアギャップ・マルウェア エアギャップ・マルウェアとは、様々なエアギャップの隠されたチャネルを使い、安全なコンピュータ・システムのエアギャッ...
Air gap (networking)
エアギャップ(ネットワーク関係) エアギャップ(air gap:空隙)またはair wall(空気壁)、エア・ギャッピング[1]とは、ネットワーク・セキュリ...
HTTP Public Key Pinning
HTTP公開鍵ピニング HTTP公開鍵ピニング(HPKP: HTTP Public Key Pinning)[1]とは、HTTPヘッダによって実現されるセキュリティの仕組みであり、HT...

更新履歴

※文書量によっては処理に数十秒かかる場合があります
バージョン 比較対象 更新日時 更新者
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 ※文書を「公開」にした場合、一般に公開されます。

言語選択

 →