ドキュメント > プラグインを使う

法律: IT HTML5 フノス(訳者)

 

  Node.jsは、/linting/を編集し、機能の最適化をはかるためにあります。

  Brunchのプラグインはツールがたくさんあろうと、相互に連携しあってきちんと動きます。詳しくは、plugin APIをご覧ください。

  たとえば、プロジェクトの中のJavaScriptファイルを使っていたとして、そこにさらにJS対応プラグインを入れたとしても大丈夫です。
 スタイル言語にも、テンプレートにも、ファイル圧縮にも、リンターにも同じことが言えます。

 プラグインの種類

  Brunchのプラグインは、主に3つのタイプに分類できます。(中には複数のタイプにあてはまるプラグインもあります)

 コンパイラ - ソースファイルをブラウザに認識される形式にコンパイルするプラグインです。 例: CoffeeScript ( JS) compiler, Stylus ( CSS) compiler.

 

 リンター - ある種の失敗や、ビルド時点で偏ったコーディングスタイルに固執することを防ぎます。

 オプティマイザ - その名の通り、JSやCSSファイルを最適化するプラグインです。例: a JavaScript uglifier(CSSプレフィクサー、ファイル圧縮プラグイン)
 

  具体的なプラグイン名などは、「プラグイン」のページでご覧になれます。

 インストール方法

  プラグインをインストールするには、プラグインを開いて次のコマンドを入力するだけです。

 npm install --save-dev プラグイン名 
 たとえば、この「プラグイン名」の部分を「sass-brunch」とすれば、そのプラグインがbrunchアプリのpackage.jsonに追加されます。
 

  時には、NPMに載っていないプラグインをつかいたいときがあるかもしれません。そのときは、「--save-dev」のうしろにURLを入力してください。ただし、入力できるURLはGitのURLのみです。
 例: --save-dev brunch/sass-brunch

 

  プラグインを削除するには、package.jsonから任意の項目をデリートするだけです。

 パッケージについてさらに詳しく知りたい方は、 npm docs をご覧ください。

 環境設定

  プラグインの使い道はとても幅広いものですが、アプリケーションの種類によっては、その動作を設定する必要が出てきます。
  詳しい設定方法はREADMEのプラグインの項目をご覧いただきたいのですが、ここではその簡単な方法をご紹介します。

  まずは、config.plugins.<plugin>に移動してください。そこで、

module.exports = {
  plugins: {
   babel: {
    presets: ['react']
   }
  }
}


などと入力してください。

  プラグインは特定のpackage.jsonに適用させられます。それから、同じファイル内にあるプロジェクトには、同じプラグインが反映されます。
 これは便利な反面、欠点もあります。
 たとえば、groundskeeper-brunchというプラグインはファイル圧縮の前に使って欲しいプログラムです。そうしないと、圧縮時のコード検出に混乱をきたしてしまい、うまく動作しません。
 このようなミスが他のプロジェクトに反映されてしまう場合があるのです。
 

 プラグインにさらなる機能を追加する

  プラグインに少し手を加えることで、開発がはかどるかもしれません。たとえば、

 「スタイルシートからJSを書き出す」などです。

  CSSコンパイラ・プラグインでJSのソースファイルに、スタイルシートの指令を付け足すことができます。

  たとえば、こんな指令を入れると何かと便利です。

 .button
 margin: 0


 実際はこういう使い方になるでしょう

 ._button_xkplk_42 {
  margin: 0;
}


  JSコンポーネントに実クラス名をつけることは、cssファイルにクラス名の情報を付加させることで可能です。

const style = require('./button.styl');
// ...

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

注:この設定は実際に使えます。一部のスタイルシート・コンパイラは設定オプションとして、CSSモジュールに対応しています。
主な対応プラグイン[stylus-brunch, sass-brunch, css-brunch]

 ファイルの編集

  別言語のファイルを翻訳して使う場合に注意して欲しいのが、JS/CSS/templateが正しく訳されない場合があることです。
 その1つが、JadeをHTMLにコンパイルすることでした。しかしこれは、Brunch2.8以降は専用プラグインで可能になりました。

 注意

 プログラム言語あるいはその他技術プラグインの導入は最小限にしましょう。余計なプラグインがあると、ビルドに時間がかかる可能性があります。

Brunchの特色

JSモジュールとNPMを使う

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

2017-05-10 21:26:05 / Hnoss
原文サイトを表示
[ 原文 ] http://brunch.io/docs/using-plugins
Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス