ドキュメント > Brunchスターターガイド

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

8分でBrunchのことが9割がた分かる? 

Brunch スターターガイド

 

 

 まずは味見

  Brunchをインストールしたいということなら、すでにNode.jsはお持ちのはずですね。Brunchのインストールはコマンドラインから( npm install -g brunch)で行えます。
 でも、それだけじゃあ物足りません。もっと具体的な使い方をお教えしましょう。
 

  あるコミュニティが新しい「Skeletons」を作成してくれました。響きは恐ろしげでありますが、特にその中でも人気がある「ES6 スケルトン」はとても先進的で素晴らしいシステムです。
 ぜひアプリ作りにご活用ください!
 

 
大まかなレシピを紹介しましょう。

 $ brunch new proj -s es6

 とシェル・プロンプトで入力すると、
 次のプログラムが実行されます。
 


プロジェクトを作成したら、次はビルドをしてみましょう。
 

 $ brunch build
01 Apr 10:45:30 - info: compiled initialize.js into app.js, copied index.html in 857ms



さて、どんな出来栄えでしょう?
 

 このようにして出来上がったアプリの一例を見てみましょう。

README.md
app/
 assets/      // Files inside `assets` would be simply copied to `public` dir.
  index.html
 initialize.js
brunch-config.js   // Basic assumptions about the project, like paths & outputs.
node_modules
package.json     // Describes which dependencies and Brunch plugins your app uses.
public/       // The "output" Brunch will re-generate on every build.
 index.html      // This was simply copied from our `app/assets`
 app.js        // `app.js`, in turn, was generated from `initialize.js`.
 app.js.map     // Source mappings for simple debugging.

 



あとひと味足りない

 でも、まだ足りない。そんな時は後からファイルを追加してビルドすることもできます。

$ echo "body {font-family: 'Comic Sans MS'}" > app/main.css
$ echo "console.log('Hello, world')" > app/logger.js
$ brunch build
01 Apr 10:50:10 - info: compiled 3 files into 2 files, copied index.html in 947ms


 「public」にあるファイルの詳細を確認してみましょう


 


全体像やいかに

 

  手動でビルドし続けるというのも、骨折りなことだと思います。様子を見るだけなら、監視コマンド「 --server」を使いましょう。このコマンドはアプリを更新するたびに全自動でビルドして、その変更をHTTPサーバーに反映します。
 デフォルトのロケーションは、「http://localhost:3333」となっており、ブラウザでURLを指定すれば開くことができます。
 パブリックディレクトリ内のこの場所で、ビルドの様子を確認できます。
 

  シェル・コンソールで開くと大変に見づらいので、新しいウィンドウでご覧になることをおすすめします。


 

 サードパーティーで素材を追加

 BrunchはjQueryの追加に対応しています。操作は簡単です。

  まずは「npm install --save jquery」でインストール。その様子も監視コマンドで見ることができます。jQueryを入れることで動作が遅くなる心配はありません。jQueryは必要なところにだけ使います。
 

  jQueryは「initialize.js」内に記述します。

var $ = require('jquery');
console.log('Tasty Brunch, just trying to use jQuery!', $('body'));


その結果も簡易ウェブサーバー「localhost:3333」で確認できます。
もちろん、jQueryの動作確認だってできますよ。



 

 ちょっと凝った演出も

  ECMAScript 201Xを使って、ちょっとした細工ができます。最低でもOCDに66個のESLintルールを適用できます。それ以外にも、50個以上のプラグインが特殊な操作に対応します。

  Babelプラグインのインストールは「npm install --save-dev babel-brunch」で行えます。
 ですが…その前にぜひしてほしい工程があります。「index.jsファイル」を作成することです。

 $echo 'console.log([1, 2, 3].reduce((s, n) => s + n ** 2))' > app/index.js

 この設定をすることで、Babelプラグインを追加したら、自動的にアプリにコンパイルされるようになって楽です。もちろん、それにはindex.jsのコンパイルも含まれています。



 

 Branchの達人になるには

  さてと残りの10%…それは、Brunchガイドを見て学んでください。さらに詳しい使い方はこちらで解説しています。  それでは!

 主なコンセプト

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

 2017-05-10 13:32:27 / Hnoss
原文サイトを表示
公開ノート

注意)原文サイトをご覧いただくとわかりますが、このページはまだまだ説明の序章です。cc-byがついているページのみですが、続きを順次アップしていくつもりです。

[ 原文 ] http://brunch.io/docs/getting-started
Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス