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

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

カテゴリ一覧

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

一覧

2017/07/28

メンテナンス終了のお知らせ

2017/7/25-2017/7/28に実施したメンテナンスは、2017/7/28/14:20に終了いたしました。 ご協力をいただき、ありが…

List

Hnoss

English⇒Japanese

shikimi

English⇒Japanese

sysInfo

English⇒Japanese

tkkobe

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 さんの翻訳記事

【GitLab Pages 公式 を訳してみた】GitLab Pages 説明書 

GitLab Documentation > User documentation > Projects >GitLab Pages 説明書 …2017-09-23 12:10:55

SSGを知る②:最近の静的サイト・ジェネレータ事情 | from about GitLab.com

 引き続き、静的サイト・ジェネレータ特集です。  前回は、「静的サイトとは何か」というような…2017-09-23 11:58:35

SSGを知る①:静的 vs 動的 ウェブサイト | about GitLab.com

 ウェブサイトは静的なものと、動的なもの2つに分かれますが、それらにはどのような違いがあっ…2017-09-23 11:23:00

【GitLab Pages 公式 を訳してみた】GitLab Pages のこと全部教えます!①

GitLab Documentation > User documentation > Projects > GitLab Pages 説明書 >GitLab P…2017-09-23 11:17:34