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

BowerのCSSコンポーネントを加える場合の注意

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
BowerのCSSコンポーネントをHTMLドキュメントに加えるときは注意が必要です。
講師:
06:46

字幕

このレッスンでは プラグインの grunt-wiredep を使って Bower が依存する CSS を html ドキュメントに 差し込む時のやり方と 注意をご説明します 今開いている gruntfile.js には grunt-wiredep を使って ファイルを差し込むための 設定が既にできています そのための設定としては先ずは grunt-wiredep を読み込む事 そしてタスクを定義ですね ここに wiredep というタスクがあります その中にタスクとして プロパティ task です 差し込み先 index.html がある パスを指定します その上で デフォルトのタスクとして 加えてあります 後もう一つは html ドキュメントの方の設定が必要です index.html に切り替えますと 既に JavaScript が差し込まれています そのためには コメント行で bower:js その下に 依存する Bower が依存している JavaScript ファイルの スクリプト要素が書き込まれます そして最後には endbower と この二つを書き込んでおくと この二行が自動的に入る訳です CSS についても同じ様に この様なコメント行を書き加えれば良いと いうのが使用なんですけれども ちょっと試してみましょう CSS は ここに一つ読み込まれていますから その上に 差し込む事にしましょう やはり コメント行で bower: の CSS です CSS を差し込む訳ですから そして endbower は 同じです コメント行終わりという事で保存をします 本来これで Grunt を実行すれば この間に bower: css と endbower の間に CSS が差し込まれるべきです 試してみましょう wiredep の差し込みは Grunt のデフォルトの タスクとして入っていますので コマンドラインツールのターミナルで まずディレクトリを切り替えます プロジェクトの gruntworkflows と そして wiredep による差し込みは Grunt のデフォルトの タスクとして加えられていますから grunt で実行されます タスクは問題なく実行されていますし その中に wiredep のタスクも入っています index.html に戻ってみても CSS は差し込まれていません これは実は bootstrap のバージョンに 問題がある様です bower.json を開いてみると dependencies の中の bootstrap が 3.3.5 になっています ところがこのバージョンで CSS を差し込もうとすると どうも上手く差し込めない様です ですから 3.3.5 以降が出てくるまでは 3.3.4 でないと CSS の差し込みができません では 3.3.4 に バージョンを落とす設定をやってみましょう ターミナルでは watch が かかっていますので これは一旦コントロール C で中断します そしてクリアにしましょう Bower のアンインストールのコマンドで bootstrap を削除します Bower の アンインストールですね そして jsonfile への記述も削除しますので --save bootstrap です これで インストールが削除されます アンインストールされました では改めてバージョンを指定した アンインストールです 矢印キーを運用して 今入力したばかりのアンインストールの コマンドを出しました これをインストールに切り替えるんですが バージョンを指定したい場合には そのモジュール パッケージの後に 入れたマークですね そして 3.3.4 にしたいので この様に入れてから uninstall の un を取ります これで 3.3.4 指定のインストールになります インストールが 済んだ様です Dreamweaver に戻ると bower.json の設定が 変えられたので リロードしますかという警告が出てきますから ここは はい で リロードします そうするとバージョンの指定が 3.3.4 固定になりました 後は何も設定を変えていません index.html の方に 一旦切り替えておきましょう もちろん未だ Grunt のコマンドを 実行していませんから 何も変わっていません 改めてターミナルに戻りましたので Grunt のコマンドを実行します デフォルトでの実行です 特に枝は出ていませんね では index.html の方を見てみましょう さて Dreamweaver から index.html が書き換わったという 警告が出ています この警告はちょっと嬉しいですね はい をクリックしますと 確かに bootstrap の CSS が 組み込まれました このレッスンでは grunt-wiredep を使って Bower の依存する CSS のファイルを html ドキュメントに 差し込む方法についてご説明しました その方法というのは JavaScrip と特に変わらず grunt-wiredep を読み込み タスクを指定して そのパスを指定すると html ドキュメントの場所ですね それからデフォルトに タスクを入れました その上で index.html で ここに CSS を差し込んで下さいという bower:css endbower この指定をして Grunt のコマンドを 実行すれば良いんですが 唯今現在 収録の時に確認できている事としては bootstrap のバージョンは 3.3.5 ではダメで 3.3.4 或いは 3.3.5 以降に 変更する必要があるという事でした

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

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

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

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

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

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