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

Grunt.jsで何ができるか

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タスクランナーと呼ばれるツールのGrunt.jsがどのような働きをするのか、簡単に試してご説明します。
講師:
07:02

字幕

このレッスンでは Grunt.js が どういう働きをしてくれるツールなのか ということについて 簡単にご説明をします Grunt は開発における コンパイルやビルドを 自動化してくれる タスクランナーと呼ばれるツールです プラグインのモジュールが沢山あって それを使いビルド用の JavaScript ファイルで タスクを定義します Dreamweaver で開いたのが タスクを定義してくれるという Gruntfile.js です 余り細かいことは気にせずに 大まかに 役割を知って下されば結構です このファイルの 下の方に モジュールと呼ばれますけれども タスクを実行するために 必要なプラグイン これをネットから ダウンロードして使うことができます それを宣言したら 今度はそれぞれの モジュール プラグインを使って どんな仕事をさせたいのか というのが上の方に オブジェクトとプロパティーの形で 定義してあります 例えば上を見てみると concat というのは まとめると言う意味なんですが ファイルをまとめてくれる ためのタスクというのが定義されています この三つ辺りは JavaScript ファイルや sass CSS のファイルですね それらを開発用の ファイルに基づいて ビルド用のファイルに まとめてくれるという役割を果たします プロジェクトを収めている gruntworkflows という ファイルフォルダを開きました まず モジュールを ダウンロード インストールすると この node_modules と言う所に 必要なツールのファイルが 保存されます それから これは開発で どんどん作っている という前提なんですけれども CSS を作る sass ですね sass という拡張子ですが そのファイルがここに作ってあります 或いは JavaScript ファイルが今 たった三つですけれども 作ってあるんですけれども これは開発用にどんどん 作っていって数が増えていくと そういう想定です そして実際にサーバーにあげる 最終的にサーバーに上げるビルドが この builds というフォルダーの development の中に入っています トップには index.html がありますね そして css, js という フォルダーがあってここに最終的に ビルドする CSS や JavaScript の ファイルが収められています これは自動的に作られます ですから CSS 二つを 削除してしまいます それから JSON は これは必要なんで 自動的に生成したものではないので 除けておいて この二つの JavaScript ファイルを やはり削除してしまいます Grunt のタスクは コマンドラインツールと 呼ばれるツールから実行します ここではターミナルを開いていますけれども ここから Grunt のコマンドを打ち込みます まず当然そのフォルダーに 移らなければいけませんので cd というコマンド change directory なんですが gruntworkflows 先ほど開いていた フォルダーに移りましたので ここで grunt と言う名前で デフォルトのタスクが定義してありますから それを実行します そうするとタスクが実行されました というメッセージが表示されています プロジェクトの gruntworkflows に もう一度戻ってみますと 先ほど消したはずの CSS や JavaScript ファイルですね 復活しています 正確には 復活しているのではなくて 正確には 復活しているのではなくて components 等の中から 開発に作った CSS や JavaScript のファイルを 統合して一つにまとめて 書き出しているんですね ですから開発元の ファイルの方に修正が入れば このコマンドを実行すれば 直ちにその修正が ビルドの方に反映されるということになります 設定の JavaScript ファイル Grunt.js の方をもうちょっと下に スクロールしてみますと connect というタスクが 定義されています これはローカルに サーバーを設定してくれます しかも livereload true となっていて これは ファイルに変更がされると 自動的にその変更を ブラウザで開かれている ローカルサーバーのファイルの方に 変更をアップデートするということです その変更がされたかされないかを チェックしているのがこの watch という タスクになるんですけれども ではちょっとブラウザで index.html を開いてみましょう ブラウザで index.html を開いてみました ただこれは ローカルにあるファイルを ローカルのまま開いています このページの一番下まで スクロールしてしまいますと Speakers on tour とあります 実はこの下に スピーカー 喋ってくれる人たちですね その人たちの 情報や写真が出てくるはずなんですけれども ここでは JSON ファイルを使っているために ローカルでは確かめられません けれども 先ほどの Grunt のタスクの中には けれども 先ほどの Grunt のタスクの中には ローカルにサーバーを設定するという 設定が入っています ですからローカルでアクセスするのではなくて localhost で 3000 というポートが当ててあるんですが そこで読み込んでみます 同じページですけれども 今度一番下までスクロールすると 先ほど言いました通り 人の 写真や名前 経歴らしき 情報が入っていて Speakers on tour と下に 挿入されています JSON ファイルを読み込んで 自動的にページを ページの要素を生成するという JavaScript が動いているからです ページトップに戻りましょう Dreamweaver で index.html を開きました Dreamweaver で index.html を開きました 先ほどこちらで 変更すると それがブラウザ上のページ サーバーに設定したページに 直ちに反映されるという風に言いましたので 試してみましょう 少しスクロールをして 一番わかりやすいコネのタイトル Contemporary Conference とありますが このコードの方で Art Conference という風に設定します もちろん Dreamweaver の中では 直ちに反映されますけれども ブラウザは別問題ですね サーバーの方に反映されるかどうかなので これを保存します 保存すると反映される設定ができています ブラウザに切り替えました 特にリロードは行っていません けれども Grunt のタスクで 常に監視をして index.html が もし修正されたら この severed ページに直ちに 直ちに反映されるようにと という設定が生きているので すぐに反映されてしまいます このレッスンでは Task Runner ツールと呼ばれる Grunt.js が どの様な働きをするのか 簡単に試してお見せしました

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

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

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

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

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

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