今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。
当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。
今回はその環境を使ってみるまでの手順を書いていきたいと思います。
必要なものをインストール
- NodeJS
- Gulp
- WebPack
- Bower
- PhantomJS
NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。
WebPackのインストール
WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。
- WebPack
http://webpack.github.io/
インストールはnpmを使って簡単にできます。
npm install webpack -g※ macはsudoをつけて実行します。
Bowerのインストール
フロントエンドで使用するライブラリには、一番充実しているBowerを利用しています。またnpmは開発に必要なパッケージ管理に特化させたかったので、分けるという狙いもあります。
こちらもnpmで簡単にインストールできます。
npm install bower -g※ macはsudoをつけて実行します。
- Bower
http://bower.io/
PhantomJSのインストール
Karma/Jasmineでユニットテストを実行させるのに使用しています。毎回ブラウザが立ち上がるのではなく、裏側でテストをこっそりやってくれる幽霊のような存在です。ヘッドレスブラウザと呼ばれます。
npmが便利ですね。
npm install phantomjs -g※ macはsudoをつけて実行します。
- PhantomJS
http://phantomjs.org/ - Karma
http://karma-runner.github.io/0.12/index.html - Jasmine
http://jasmine.github.io/
環境の構築
必要な環境が整ったところでテンプレートを導入します。
下記URLのリポジトリから、ファイルをクローンするかダウンロードしてきます。
- frontplate
https://github.com/frontainer/frontplate
それらのファイルを適当なディレクトリに展開してください。
環境の初期化
ターミナル/コマンドラインを起動して、cdで作成したディレクトリへ移動します。
そして以下のコマンドを実行します。少し時間がかかるので、お菓子でも食べながら待ちましょう。
npm i && bower i gulp build開発開始
すべての処理が終わったら開発環境構築は完了です。app/pcディレクトで開発を開始します。
gulp
spディレクトリを開発対象とする場合は、
gulp -d=sp-dオプションにディレクトリ名を指定すると、ディレクトリ名を開発ディレクトリとしてファイルの監視が行われます。
EJSで共通マークアップ部分を使い回し
<%include common/header %>保存すると1つのHTMLにして出力されるとともに、HTMLのバリデーションチェックが実行されます。
例えばdivタグの閉じ忘れなどがあった場合には以下のように表示されます。
[10:38:41] [L33:C1] Tag must be paired, Missing: [ </div> ] (tag-pair)33行目が閉じられていなかったようです。
スプライト画像をつくろう
source/app/pc/sprite/ディレクトリに、作りたいスプライトのディレクトリを作ります。今回はiconsというスプライトを作ってみるとします。
souce/app/pc/sprite/icons
iconsディレクトリにバラバラのアイコンを入れます。
souce/app/pc/sprite/icons/setting.png souce/app/pc/sprite/icons/logo.png souce/app/pc/sprite/icons/twitter.png souce/app/pc/sprite/icons/facebook.png
そしてコマンドを実行します。
gulp spriteするとscss/spriteに_icon.scssとimages/にicon.pngが出来上がります。
スプライトを使う場合は_icon.scssを@importで読み込み、
<a class="icons setting"></a>などと「ディレクトリ名 ファイル名」とclassに書くだけで表示させることができます。
SASSを使ってCSSを作る
SASSの使い方や応用については過去の記事があるので参考にしてみてください。
- 「目指せSassマスター！デザイナーがすぐ実践できる基本テクニック12連発」
- 「これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)」
- 「Sassを使ったコーディングの強い味方に！便利なextend＆mixin集を作ってみた」
この環境ではgulpタスク実行中にSCSSファイルを変更すれば、CSSが自動で書き出されるようになっています。
また、Autoprefixerが入っているので、ベンダープレフィックス（-webkit-）の記述は不要です。こちらも自動的に付与されるようになっています。
- Autoprefixer
https://github.com/postcss/autoprefixer
JavaScriptを結合しよう
この環境ではJavaScriptをモジュールごとに細分化し、requireを使って1つに結合することができます。
例えばHogeというクラスがあるHoge.jsを作ってあるものとします。
modules/Hoge.js
function Hoge(){};
Hoge.prototype = {
init: function() {
}
}
module.exports = Hoge;module.exportsに値を渡すことで、外部でrequireされたときにその値を渡すことができるようになります。
続いてHogeを利用したいJSを作ります。
var Hoge = require('./modules/Hoge');
// ↑外部のJSを読み込み
var hoge = new Hoge();require（パス）とすることで、module.exportsした値を取ることができます。
このrequireは同じスクリプトの場合、何度書いても1つにまとめられるため、同じHogeを別のJSでrequireしても最終的には1つしか書き出されないようになっています。
ムダも省けるし、このJSでどのモジュールを使っているかすぐわかるようになりますね。
ユニットテスト
testディレクトリに**Spec.jsを作ると、Karma/Jasmineでユニットテストが実行できます。ユニットテストについてはまた別の記事で紹介できればと思います。
書き出し先やオプションの設定
config.jsに書き出し先のパスやオプションの設定が書かれています。パスを書く際には%type%という記述をすると、-dオプションで入力されたディレクトリに置き換わるようになっています。
現在の環境にあわせて出力先を変えたいときに使ってください。
最後にリリース作業
ひと通り開発が終わったらリリースです。
以下のコマンドを実行します。
gulp build -min gulp build -d=sp -min-minオプションをつけると、JSとCSSを圧縮してファイルを書き出します。
app/public/以下に、圧縮されたJSやらCSSやら画像やらを含んだファイルが生成されます。これでパフォーマンスも簡単に向上させられます。
FTPでアップロードや納品データを作る際はこのpublic以下のファイルを使えば即終了です。CIを使っている場合も、public以下のものを公開ディレクトリに移すか、publicディレクトリをそのまま公開ディレクトリにしてしまえば終わりですね。
まとめ
これだけでもかなりの作業が短縮されます。altJSは好みのものを使った方が良いと思うので、特に入れていません。
最近なにかと変化の激しいフロントエンド界隈ですので効率化をどんどん進めていきたいと思います。
ぜひカスタマイズして自分なりのテンプレートを作ってみてください。
【LIGのフロントエンドエンジニア先生】
※ フロントエンド開発を裏から支えるデバッグアプリケーション4選
※ Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ
※ 業務で安心して使える厳選AngularJSモジュール8選＋α
※ ECMAScript6で書こう！WebPackとES6-loaderで環境を作り、ES6を先取り体験する方法
※ AngularJSで作成したシングルページアプリケーションをGoogleアナリティクスでトラッキングさせる方法
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
