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

ファイルの更新時にタスクを実行する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインgrunt-contrib-watcで、ファイルが更新されたときタスクを実行するように設定します。
講師:
09:03

字幕

このレッスンでは プラグインの grunt-contrib-watch を使って プロジェクトの中のファイルが 書き換わった時 タスクが実行される様に してみたいと思います 既にこのプラグインの インストールは済んでいます インストールは NPM のコマンドで install grunt-contrib-watch そして package.json を 書き換えたい時には --save 開発用の時には更に -dev という事で インストールができます それからもう一つ gruntfile.js の方ですが そこでタスクを実行できる様に読み込む loadNpmtasks という method で プラグインを指定すると ここまでは既に設定できています ではプロジェクトの中の どのファイルが変わったら タスクを実行するか というとその指定ができますので 確認しておきましょう プロジェクトの gruntworkflows というフォルダを開いてみます 先ず一つは 大事なのはこの index.html ですね これは最終的にサーバーに 上げるファイルですけれども これが書き換えられた時には タスクを実行したいと思います あとは開発用なんですけれども components の中に Sass のファイルがあります 拡張子はscss ですけれども これらが書き換えられた時も やはり状況は変わるので ビルドが必要です そして scripts ですね この jsfile が書き換えられた時も タスクを実行したい三つです builds の中の development の中の index.html それが一つです 二つ目は components の中の sass の中の scss ですね 三つ目は 同じ components の中の jsfileと この三つの書き換えの時に 実行するタスクというのを 定めてみたいと思います Dreamweaver で gruntfile.js を開きました loadNpmTasks で grunt-contrib-watch の 読み込みは済んでいます ですからここに タスクを書き換えれば良いという事ですね この sass の後に書き加えます ですからカンマ区切りで タスク名は watch にしましょう そして 中括弧始まり中括弧閉じと この中に幾つか指定されるんですが 最初は options にしましょう options という事で やはり中括弧始まり中括弧閉じ そして どんなオプションかと言うと spown という オプションがあります これは true か false か プール値で決めるんですが これを false にします grunt-contrib-watch のページで オプションの意味を 簡単に確認しておきましょう ページを下へ辿って この spown ですね これを false に設定すると ほんの少しだけ スピードが稼げると 0.5 秒ですね 500ミリ秒という事ですから 早くなります なぜかと言うと サブのタスクがある場合に その内容を シェアしてしまうと ちょっと手を抜く訳ですね と言う事で若干早くなるので 特にその事に問題が無ければ これを false に 設定しておけば良いでしょう 続けてタスク watch で行う 実際のタスクの内容ですね これを入れていきます options の後にカンマ区切りで scripts です 複数指定できますから 複数形と言う事になります そして中括弧始まり 中括弧閉じ ワンスーペース 入れておきましょう そしてこの中には どのファイルが書き換えられたかと 先ほど確認したパスを 配列に入れて行きます そしてプロパティ名は files です 配列で 先ず最初は index.html ですね パスを文字列で書いて行きます builds の development の フォルダーは何でも良いですよ という時には アステリスク二つです そして ファイル名は何でも良いという場合には 今度はアステリスクは一つです ですから index 以外にも html ファイルがあったら タスクを実行したいという事です 後二つパスを指定します 今度は components の中のファイルですね components そして JavaScript の方です scripts フォルダは何でもOK そして jsfileですね 拡張子も何でも良い場合には こう打てるんですが 一応ちゃんと指定した方が安心でしょう そうしたらこれをコピーしてしまいましょうか コピーして ペーストします ちょっとインデントがずれましたね カンマ区切りを入れて scripts ではなくて sass です そして 拡張子も scss ですね これで指定ができましたので 後は このデフォルトの タスクの中に加えましょう カンマ区切りで watch コピーして持ってきます ではこれで保存をします タスク名 watch の後に コロンが抜けてますね そして scripts の中の files に続けまして カンマ区切りで どのタスクを実行するのかと タスク名を指定します 勿論複数を指定できますから tasks と 複数形になり この中に 配列で 指定する訳なんですが concat とsass この二つを実行する事にしましょう whats の中で watch を実行したりすると 大変な事になりますので concat とsass を こちらからコピーしました これで保存をしましょう ターミナルを開きましたので ディレクトリを変更します cd の gruntworkflows ですね ディレクトリが変わりました Grunt のデフォルトの タスクに入れましたので grunt だけで大丈夫なはずです そして running watch という事で waiting 待ってますよという事になっています ではファイルを変更してみましょう Dreamweaver で html ドキュメントを開きました どこか文字 大きめの文字を これにしましょうか 変更したいと思います こちらにあるので Contemporary Art Conference としましょう そして保存します これで書き換えが行える訳です ターミナルに切り替えますと このファイルが 変わったよという事で タスクが実行されていますね そしてまた waiting になっていますから 相変わらず またタスクを監視しています では今度は JavaScript ファイルを変えてみましょう components の中の scripts の中の ちょっと小さめの JavaScript ファイルですね template.js というのを開きました コメントを 削除した場合でも ファイルの変更になりますので 削除してファイルをまた保存します ターミナルを見ますと components の中の scripts の中の template.js が変わったよ という事で タスクが実行されています もう監視しなくて良いよ という場合には キーボードからコントロール C で タスクを終了することができます このレッスンでは grunt-contrib-watch の プラグインを使って ファイルが書き換えられた時に タスクを実行するという事をやってみました タスク名を付けて options で spown を false を選択し scripts の中で これらのファイルが書き換えられた時に このタスクを実行するんだよ という指定を書けば良いという事でした

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

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

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

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

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

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