Gulp.jsを使ってWeb開発を効率化しよう

ファイルの保存を監視する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ファイルに修正が加わって保存されたとき、自動的にタスクを実行します。
講師:
06:38

字幕

このレッスンでは、ファイルに修正が加わって保存されたとき自動的にタスクを実行します。先ず、今開いてる gulpfile.jsなんですけれども三つのタスクが定義されています。始めの二つはこの imagemin とminjs というタスクなんですがやっていることは少し似ていてimagemin のほうは画像ファイルです。フォルダは assets の中に入っていますのでそれを全て一旦プラグインのgulp-imagemin で圧縮した後コピー先なんですけれどもdest で images というフォルダに保存しています。minjs は今度は javascriptファイルに対する処理なんですけれどもこちらは、元が src というフォルダに入っている javascript ファイルです。それを concatこれはプラグインですけれども複数の javascript ファイルを一つにまとめます。その上で、今度はuglify というプラグインなんですがそれを使って圧縮、できるだけ小さくしてその上で、指定したフォルダjs というフォルダにコピーをする。その圧縮したファイルを保存するということになります。三つ目はこの二つのタスクを同時に実行するために二つのタスクを新たにminall という名前でタスクとして定義したという形になっています。 このタスクの minall は二つ一遍実行出来て便利は便利なんですけれども修正した後一一、やはりコマンドを打たなければなりません。これを、ファイルが修正されて保存されたら自動的に実行出来ればいいという風に指定することはできます。その場合 watch というベストを使うですけれどもここに新たにタスクを定義します。gulp ですね。タスクの定義ですから task です。そしてこの中に、新たにタスク名は watch にしましょう。そしてこの中に、二番目の引数としてfunction ですね。これは最初の二つのタスクの定義と同じ形です。そして、この function の中でwatch というメソッドを使います。gulp に対して watch ですね監視するということです。引数が二つあります。二つとも配列です。そしてこの配列の一つ目はどのファイルを監視するのかとどこのファイルが変更されたら実行するのかという監視する対象のディレクトリですね。例えはここではimagemin を実行したいときに見るのはここですね。この中が修正されたときに実行したいわけですからそしたら、コピー持ってきますけれどこうですね。 そして、今度はタスクはこちらをコピーしましょうかimageminこうすれば、画像が修正されたら自動的にタスク imagemin が実行されます。でも、同士だった両方実行したいなということでしたら配列にしたらこのためでカンマで今度は、javascript のファイルのほうですね。そのディレクトリを追加に指定することができます。今度はこちらも imagemin の後にminjs を指定してもいいんですがこれがその二つをまとめて呼ぶタスクでしたね。ですから、これをコピーしてペーストすればいいと。この新たに定義したタスク watch はファイルの修正をして保存をすると自動的に実行されます。ではまず、こちらを保存しておきましょう。コマンドラインのターミナルでタスクを実行します。gulp の watch でしたね。実行されました。プロンプトが何時まで経っても出てきません。というのは、 watch をしていますので保存されたらすぐに処理をするように今待ってるわけですね。では、ファイルを修正して見ましょう。javascript のフォルダsrc に入っているjavascript ファイルの内の一つpoint.js を開けました。 この先頭に何か加えましょう。テストですからconsole.log でいいでしょう。そして、クラス名で「不明」しましょう。point になっていますのでpoint と。まだ終わっちゃ動きません。ここで、保存をします。それて実行されます。ターミナルの表示が変わりました。watch が働いて、imageminminjs の二つが実行されて要するに、 minall が行われましたということですね。プロジェクトのフォルダを開きました。この js ですねコピー先のフォルダの script.jsという名前にしたんですがここに修正されて圧縮された技術が入ってるはずです。では、開けてみましょう。dreamweaver で開いてみます。そうするとちょっと分かりにくいですけれどもここですねconsole.logそして、括弧の中に文字列で point とあって修正が反映されています。ターミナルのほうではまた監視が続いています。もういいよという場合にはこのプロンプト状態でctrl+C を押します。これでブレックということでwatch のタスクが終了しました。このレッスンではファイルに修正が加わって保存されたとき自動的にタスクを実行する watchというメソッドをご紹介しました。 これは gulp にたいして.watch ですね引数は二つで監視するディレクトリこれを配列でいくつでもゆらえます。それから、二番目の引数も配列ですがその中に実行したいタスクを指定するということでした。

Gulp.jsを使ってWeb開発を効率化しよう

GulpはWeb開発におけるコンパイルやビルドを自動化してくれるタスクランナーツールです。モジュールやプラグインなどを使って、ビルド用のJavaScriptファイルでタスクを定義します。このコースではGulpとプラグインのインストール、タスクの定義や画像ファイルの圧縮、JavaScriptファイルの連結やSASSによるスタイルシートの生成などを学べます。

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

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

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

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