GruntベースのHTML5サイト制作テンプレート 2014年11月版

自分がHTML5サイトを制作する時の環境をテンプレート化し公開してみます。
レガシーブラウザ（IE7、IE8など）もカバーすることを考えているので今のフロントエンドの流行からすると古い技術を使っているかと思います。
JavaScriptのフレームワークにBackbone.jsを使っていましたがプロトタイプベースなのが書きにくくてやめて、モジュールパターン+MVCパターンで直に書いています。



#データ一式
[Github](https://github.com/nowri/grunt-html5full-nw)
[ダウンロード](https://github.com/nowri/grunt-html5full-nw/archive/master.zip)
## 準備
1. コマンドライン（Terminalなど）でダウンロードした解凍ファイルの`ROOT`ディレクトリに移動
1. `npm install`



#説明
## JSプラグイン
### Lo-Dash(underscore build)
underscoreよりLo-Dashのがパフォーマンスがいいのですが
Backbone.jsがunderscoreを採用しているのでLo-Dashのunderscoreビルドを使用してます
#### _.template()
HTMLをテンプレート化

```js
var str = "<h1>hoge<%- count %></h1>";
var template = _.template(str);
console.log(template({count:1}));//<h1>hoge1</h1>
console.log(template({count:2}));//<h1>hoge2</h1>
console.log(template({count:3}));//<h1>hoge3</h1>
```

#### _.bindAll()
thisの参照問題を解決

```js
var Hoge = function() {
  this.endStr = "end";
  _.bindAll(this, "delay0Func", "delay1000Func");
  setTimeout(this.delay0Func, 0);
  setTimeout(this.delay1000Func, 1000);
};
Hoge.prototype = {
  delay0Func: function() {
    console.log(this.endStr, 0);//end 0
  },
  delay1000Func: function() {
    console.log(this.endStr, 1000);//end 1000
  },
};
var hoge = new Hoge();
```

#### _.each()
繰り返し処理

```js
var num = 0;
_.each([1,2,3], function(el, i){
  num += el;
}) 
console.log(num);//6
```

### jQuery
trigger()とカスタムイベントで
以下のようにクラス間のやりとりをするときのオブザーバパターンにも使います

```js
var Event = {
  READY:"ready"
};
var Model = function(Event) {
  function construct() {
    setTimeout(function(){$(Event).trigger(Event.READY);}, 1000)
  }  
  construct();
}
var View = function(Event, el){
  function construct() {
    $(Event).on(Event.READY, function() {
       el.innerHTML = "START VIEW";
    });
  }  
  construct();
}
View(Event, document.body);
Model(Event);
```

### Velocity.js
jQueryの`$.animate()`を再実装してより高速に動作するアニメーションエンジンです。jQueryの`$.animate()`のかわりに以下のように使用します。

```js
$(.elem).velocity({left:0}, {duration:1000});
```

### Modernizr.js
ブラウザの機能判定プラグインです。
`Modernizr.load()`でCSSなどを非同期で読み込む機能もあります。

↓ /src/js/apps/Main.js（grunt-grunticonで書き出した画像埋め込みCSSを非同期で読み込み）

```js
Modernizr.load(
	[{
		test:Modernizr.svg,
		yep:'css/icons.data.svg.css',
		nope:'css/icons.data.png.css'
	}]
);
```

### cssua.js
ユーザーエージェントによるブラウザ判定プラグインです。
Modernizrと同じくhtmlタグにブラウザ毎の
クラス名をつけてくれるので、CSSハックの代わりになります。
また、htmlタグにIEのクラス名をつけるのに以下の様な記述が出回っていますが

```html
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

```
この記述をするとmetaで互換表示ボタンを非表示に設定しても表示されるようになってしまいます。cssuaを使えば記述の必要がなくなります。

jsの使用例

```js
if(cssua.ua.ie && cssua.ua.ie <= 8){
//IE8以下
} else {
//それ以外
};
```

### requireJS
JSファイルを編集するたびにコンパイルすることなく
分割したままでプレビューすることができます。
`grunt-requirejs`を使用することで
納品時には記述を変えることなく圧縮結合されたJSにまとめることができます。

### text.js(requireJS)
htmlファイルとして用意したテンプレートを文字列として読み込むことができるようになります。underscore.jsの_.template()と一緒に使います

参考
[RequireJSで、テキストファイルを依存関係として指定する方法](http://qiita.com/h_demon/items/60300367bd3a8c050796)

## Grunt

| タスク名 | 説明 |
|:-------------|:----------------------|
| commonBefore |`deploy`、`release`共通タスク |
| deploy       | 開発用 |
| release     | 納品用 |

### grunt-requirejs
requireJSのモジュールファイルを結合圧縮します。
Grunt標準のgrunt-contrib-requirejsもありますが、
almondというAMD部分を削除してファイルサイズを削減してくれる機能が最初からついているのでgrunt-requirejsにしています

参考
[勉強会資料シェア Getting Started with RequireJS](http://havelog.ayumusato.com/develop/javascript/e525-into_requirejs.html)
### grunt-contrib-jade
HTMLをモジュール化します。詳しくは↓

参考
[Jadeを使用した静的HTMLコーディング実践](http://qiita.com/nowri/items/242bc8a5d94e85d33a1e)
### grunt-contrib-compass
SCSS + Compassの書き出しと、スプライト画像の生成を可能にします。
SCSSファイル構成はFLOCSSガイドラインに準拠したものとなっています。

参考
[FLOCSS](https://github.com/hiloki/flocss)
### grunt-webfont
単色のSVG画像をアイコンフォント化します。
書き出しは
https://github.com/cognitom/symbols
のsymbol.aiをテンプレートにするとうまくいきます

参考
[HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ](http://t32k.me/mol/log/reduce-http-requests-webfont/)
### grunt-grunticon
SVG画像をCSSに埋め込みデータで書き出します。

### grunt-pngmin
PNG画像を圧縮します。
解像度の高い画像は画像の劣化が目立ちやすいので注意が必要です。