自分がHTML5サイトを制作する時の環境をテンプレート化し公開してみます。
レガシーブラウザ（IE7、IE8など）もカバーすることを考えているので今のフロントエンドの流行からすると古い技術を使っているかと思います。
JavaScriptのフレームワークにBackbone.jsを使っていましたがプロトタイプベースなのが書きにくくてやめて、モジュールパターン+MVCパターンで直に書いています。
準備
- コマンドライン（Terminalなど）でダウンロードした解凍ファイルの
ROOTディレクトリに移動 npm install
#説明
JSプラグイン
Lo-Dash(underscore build)
underscoreよりLo-Dashのがパフォーマンスがいいのですが
Backbone.jsがunderscoreを採用しているのでLo-Dashのunderscoreビルドを使用してます
_.template()
HTMLをテンプレート化
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の参照問題を解決
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()
繰り返し処理
var num = 0;
_.each([1,2,3], function(el, i){
num += el;
})
console.log(num);//6
jQuery
trigger()とカスタムイベントで
以下のようにクラス間のやりとりをするときのオブザーバパターンにも使います
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()のかわりに以下のように使用します。
$(.elem).velocity({left:0}, {duration:1000});
Modernizr.js
ブラウザの機能判定プラグインです。
Modernizr.load()でCSSなどを非同期で読み込む機能もあります。
↓ /src/js/apps/Main.js（grunt-grunticonで書き出した画像埋め込みCSSを非同期で読み込み）
Modernizr.load(
[{
test:Modernizr.svg,
yep:'css/icons.data.svg.css',
nope:'css/icons.data.png.css'
}]
);
cssua.js
ユーザーエージェントによるブラウザ判定プラグインです。
Modernizrと同じくhtmlタグにブラウザ毎の
クラス名をつけてくれるので、CSSハックの代わりになります。
また、htmlタグにIEのクラス名をつけるのに以下の様な記述が出回っていますが
<!--[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の使用例
if(cssua.ua.ie && cssua.ua.ie <= 8){
//IE8以下
} else {
//それ以外
};
requireJS
JSファイルを編集するたびにコンパイルすることなく
分割したままでプレビューすることができます。
grunt-requirejsを使用することで
納品時には記述を変えることなく圧縮結合されたJSにまとめることができます。
text.js(requireJS)
htmlファイルとして用意したテンプレートを文字列として読み込むことができるようになります。underscore.jsの_.template()と一緒に使います
参考
RequireJSで、テキストファイルを依存関係として指定する方法
Grunt
| タスク名 | 説明 |
|---|---|
| commonBefore |
deploy、release共通タスク |
| deploy | 開発用 |
| release | 納品用 |
grunt-requirejs
requireJSのモジュールファイルを結合圧縮します。
Grunt標準のgrunt-contrib-requirejsもありますが、
almondというAMD部分を削除してファイルサイズを削減してくれる機能が最初からついているのでgrunt-requirejsにしています
参考
勉強会資料シェア Getting Started with RequireJS
grunt-contrib-jade
HTMLをモジュール化します。詳しくは↓
grunt-contrib-compass
SCSS + Compassの書き出しと、スプライト画像の生成を可能にします。
SCSSファイル構成はFLOCSSガイドラインに準拠したものとなっています。
参考
FLOCSS
grunt-webfont
単色のSVG画像をアイコンフォント化します。
書き出しは
https://github.com/cognitom/symbols
のsymbol.aiをテンプレートにするとうまくいきます
参考
HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ
grunt-grunticon
SVG画像をCSSに埋め込みデータで書き出します。
grunt-pngmin
PNG画像を圧縮します。
解像度の高い画像は画像の劣化が目立ちやすいので注意が必要です。