Grunt.jsを使ったWeb制作のワークフロー

Bowerのコンポーネントをひとつのファイルにまとめる

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインgrunt-bower-concatで、BowerのJavaScriptとCSSコンポーネントをそれぞれひとつのファイルにまとめます。
講師:
07:23

字幕

このレッスンでは プラグイン grunt-bower-concat を使って Bower が依存する JavaScript ファイルとか CSS のファイルを其々 一つのファイルに まとめてしまいたいと思います 現在の gruntfile.js を開きました 今は Bower が使う js や CSS のファイルは其々個別に html ドキュメントに差し込んでいます それをやっているのが grunt-wiredept という プラグインです そのタスクが この上の方にありまして これですね 依存するファイルを html ドキュメントの方に タグで差し込むという処理が行われています では index.html を確認しましょう そうすると CSS は これは今の所一個ですね wiredep によって差し込まれていて 最後の方には js ファイル JavaScript のファイルが二つ 差し込まれています 二つでしたらまだ良いんですが プロジェクトがだんだん膨れてきて 進行が進んで行くと 差し込むファイルの数が どんどん増えていきます そうすると サーバーに対するリクエストが増えて 負荷が上がってしまう事になりますので 最終的にビルドする JavaScript や CSS のファイルは 一つにまとめてしまいたい所です それをやってくれるのが bower-concat のプラグインです プロジェクトのフォルダ gruntworkflows を開きました Bower が使う 依存するコンポーネントというのは bower_components の中に 入っている訳ですけれども これを取り出して 最終的にビルドするのは builds という フォルダの方です その中の development に 今の所 style.css と script.js があるんですが ここに其々 Bower の CSS と JavaScript Bower の js ファイルを 一つにまとめて 保存してみたいと思います gruntfile.js の方に戻りました 先ず プラグインのロードは 既に loadNpmTasks の中で grunt-bower-concat が 入っていますから ロードは済んでいます ですから後はタスクを 加えるだけなんですけれども では wiredep の上の sass の上の この辺りに タスクを加える事にしましょう 名前は bower_concat とします そして中括弧始まり中括弧閉じで カンマ区切りという事ですね この中に まとめたファイルを どこに送るのかと しかもどれをまとめるのかという事も 指定しますので 全部だよという事で all 中括弧始まり中括弧閉じで この中に まとめるファイルを js ファイルと CSS と其々指定します 先ず destination dest で パスを文字列で 設定します builds の development そして JavaScript は js でしたね その中の _bower という風にしましょう JavaScript ファイルですから 拡張子は js という事で 今度は CSS ですが 似ている所が多いので コピーを使ってしまいます そして ペースト カンマ区切りですね 後 プロパティの名前がちょっと変わります cssDest D が大文字です 後は builds の development の js が CSS に代わり拡張子 js が CSS になります これで保存しましょう 後もう一つ タスクをデフォルトに加えますので wiredep の 後で良いでしょうかね この後にカンマ区切りで 文字列で タスクの名前 bower_concat これをコピーを持ってきます 改めて保存をします そして html の方の修正ですね index.html ここで 保存される保存先は ビルドの中の CSS のフォルダの中ですから ここと同じなんで ここと同じ形で ファイル名が _bower になるという事なので これをコピーしてしまいます そして wiredep による差し込みが 必要なくなりますので ここを上書きペーストして スタイルを _bower にしましょう この名前で ファイルが一つにまとまって 作られるはずですので では今度は スクリプトのファイルの方ですね これも同様に この同じパスに作られるはずですので こちらをコピーして そして上書きペーストです wiredep の差し込みは 消してしまいますので上書きでペースト ファイルの名前が _bower になっているはずです ではこれで保存しましょう ファイルを保存です コマンドラインを ターミナルから打ち込みます 先ずディレクトリを プロジェクトの gruntworkflows に切り替えます そしたらデフォルトのタスクを 入れましたので Grunt だけで良いという事ですね そうすると bower-concat のタスクも実行されて このファイルが作られました と出てきます ではフォルダの方を確認してみましょう プロジェクトのフォルダ gruntworkflows の builds の中の development の中の CSS と js のフォルダに其々 _bower.css _bower.js が出来上がったと これで Bower が使う コンポーネントのファイルが増えてしまっても 一つにまとめて保存されるという事が 確かめられました このレッスンでは Bower が依存する js や CSS のファイル 複数あってもそれを一つにまとめて 保存するという事を grunt-bower-concat の プラグインで行いました そのためには loadNpmTasks で プラグインのロードを行い そしてタスクとして定めるのが 全部まとめて良ければ all で js ファイルと CSS ファイルの其々の 保存先ですね まとめ先 それを指定した上で 今回はデフォルトの タスクに登録して Grunt を実行しました

Grunt.jsを使ったWeb制作のワークフロー

Gruntは開発におけるコンパイルやビルドを自動化するツールです。これを使えば煩わしい作業の繰り返しから解放されます。このコースではGruntのインストールや定義ファイルの作り方、JavaScriptファイルの連結やSASSによるスタイルシートの生成などを実際に使いながら説明します。またフロントエンド用のパッケージマネージャBowerについても紹介します。

2時間05分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年02月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。