「みんなの翻訳」は、世界中の文書をみんなで協力して翻訳するサイトです。

みんなの翻訳ロゴ
ブクタブ
翻訳サイト

カテゴリ一覧

このサイトについて 新規登録はこちら お試し翻訳

一覧

2015/07/07

復旧のお知らせ

2015/06/08 ~ 2015/07/07 の期間、サーバ障害によりサービスが利用できない状況になっておりました。 現在は復…

List

Hnoss

English⇒Japanese

shikimi

English⇒Japanese

tkkobe

English⇒Japanese

K0hei22

English⇒Japanese

ホームみんなの本棚一覧 > みんなの本棚

みんなの本棚

おすすめ度:

Brunch | 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でこのページを編集する

PDF
更新日:2017-06-08 16:17:46 Hnoss 0  del.icio.usに追加   はてなブックマークに追加   twitterに投稿   facebookでshare
[ 原文URL ] http://brunch.io/docs/using-plugins Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス
翻訳者ページをみる

この記事の翻訳者

Hnoss さんの翻訳記事

オープンソース・ホームオートメーションシステム5選 | from Opensource.com

  「 ユビキタス・ネットワーク(Internet of Things) 」と聞いても、みなさんピンとこないでし…2017-07-19 15:08:40

実際このように使う。Linux検索コマンド35選 | from Tecmint.com

 検索コマンドはLinuxシステムを管理する上でかなり重要な、使用頻度も高いコマンドだ。検索コマ…2017-07-16 18:02:39

オープンソースな「マーケティング・スタック」を7つ紹介 | from Opensouce.com

 マーケティングで便利なオープンソースソフトウェアを紹介します。人によっては、プロプライエ…2017-07-14 12:56:07

ラズパイを電子書籍サーバーにする方法があります! | from Opensource.com

 Calibreという電子書籍管理ソフトウェアがありますが、セットアップの方法次第では、Raspberry …2017-07-14 12:55:02