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

BowerのコンポーネントをHTMLドキュメントに加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインgrunt-wiredepでBowerのコンポーネントをHTMLドキュメントに加えます。
講師:
06:06

字幕

このレッスンでは プラグインの grunt-wiredep を使って Bower が使う jsfile JavaScript ファイルを html ドキュメントの中に 組み込んでみましょう Bower をインストールすると プロジェクトのフォルダの中に bower_compornents という フォルダが入ってきて その中に JavaScript や CSS その他のファイルがあります それらを必要に応じて Bower が使う訳ですけれども 一つだけではありません 例えば 今回は bootstrap と jquery が入っていますけれども bootstrap の中には dist js というフォルダの中に js ファイルが含まれていますし それから jquery の中には 同じく js ファイルがあります これらを Bower は使って 処理をする訳ですけれども それを html ドキュメントの中に 差し込みます html ドキュメントというのは builds の中の development の中にある この idex です index.html ここに差し込む様に 設定をしたいと思います Dreamweaver で gruntfile.js を開きました grunt-wiredep のインストールは 既に済んでいますし この gruntfile.js で loadNpmTasks で grunt-wiredep の 読み込みができています 後はタスクとして 設定をする訳なんですが タスクの場所なんですけれども watch の上の コネクトの上あたり ちょっと畳んでおきましょう 見易い様に ここに加える事にします タスクの名前は wiredep にしましょう コロンの 中括弧始まり中括弧閉じで カンマ区切りですね そしてこの中に タスクの設定を入れます task で中括弧始まり 中括弧閉じ この中に Bower がどの jsfile を 使うのか分かっていますから html ドキュメントがど こにあるのかという事を指定します それがソース src ですね そして文字列でパスを指定します builds の中の development ですね そして フォルダはどこでも良いので それから ファイル名は何でも良くて html という事で設定を行います これで保存をしておきましょう もう一つ差し込み先の html ドキュメントの方にも どこに何を差し込むのかという 指定をしなければなりません コードの方でスクロールをしていって JavaScript ファイルは 一番下の方ですね この辺で 入れている様ですので その上に 入れる様にしましょう ここにはコメントの形で ここに差し込むんだよという事を伝えます ですからコメントを無記号で Bower の JavaScript ファイル gs ファイルを ここに入れて欲しいと コメント終わりなんですが この間に差し込むんだという風に 指定するのでコメントを二行入れます ここで end bower と この間に入れて下さい という意味になります ではファイルを保存します endbower の w が抜けてますね end bower 綴りを一応確認しておきましょうね bowerコロンの js です そして endbower 良さそうですので改めて保存します それから wiredep の タスクを grunt の デフォルトのタスクに加えましょう という事で先頭に加えます 文字列の形でカンマ区切りですね wiredep コピーを 持ってくる事にします そして保存をします コマンドラインツールの ターミナルを開きました grunt のデフォルトの 仕事に入れてありますので それを実行する事にしますが先ず ディレクトリを切り替えますね change directory で gruntworkflows と 切り替わりましたので デフォルトですから grunt で動きます wiredep の タスクも実行されたという風に出ていますね 確認してみましょう index.html の 内容を確認して行きましょう コードを下の方にスクロールして行きます ここですね bower:js から endbower の間に 二つ JavaScript ファイルが 読み込まれています jquery と bootstrap この様にして grunt-wiredep を使って Bower が依存する JavaScript ファイルを 差し込む事ができました このレッスンでは grunt-wiredep を使って Bower が依存する JavaScript ファイルを html ドキュメントに 差し込む方法について ご説明しました その場合 gruntfile.js の中で grunt-wiredep を読み込んだ上で タスクとして プロパティは task ですね その中のソースに どこに html ファイルがあるんだ という事を指定する そしてもう一つは その差し込み先の html ファイルの方に コメントで Bower の依存する 今回は JavaScript ファイルを この間に読み込むんだよという コメントを入れてあげるという事でした

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

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

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

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

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

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