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

More than 3 years have passed since last update.

自分がHTML5サイトを制作する時の環境をテンプレート化し公開してみます。

レガシーブラウザ(IE7、IE8など)もカバーすることを考えているので今のフロントエンドの流行からすると古い技術を使っているかと思います。

JavaScriptのフレームワークにBackbone.jsを使っていましたがプロトタイプベースなのが書きにくくてやめて、モジュールパターン+MVCパターンで直に書いています。


データ一式

Github

ダウンロード


準備


  1. コマンドライン(Terminalなど)でダウンロードした解凍ファイルのROOTディレクトリに移動

  2. 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

deployrelease共通タスク

deploy
開発用

release
納品用


grunt-requirejs

requireJSのモジュールファイルを結合圧縮します。

Grunt標準のgrunt-contrib-requirejsもありますが、

almondというAMD部分を削除してファイルサイズを削減してくれる機能が最初からついているのでgrunt-requirejsにしています

参考

勉強会資料シェア Getting Started with RequireJS


grunt-contrib-jade

HTMLをモジュール化します。詳しくは↓

参考

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画像を圧縮します。

解像度の高い画像は画像の劣化が目立ちやすいので注意が必要です。