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

複数のタスクを順に実行する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数のタスクをあらかじめ定めた順序で実行します。
講師:
06:32

字幕

このレッスンでは複数のタスクを予め決めた順序で実行する方法についてご説明をします。今開いている gulpfile.jsなんですけれども二つのタスクが定義されていて一つが imagemin というものでassets というフォルダの中にある画像ファイルなんですけれどもそれを圧縮したうえでimagemin というプラグインを使っているんですけれどもそれをimages というフォルダを作ってその中にコピーすると。これが imagemin のタスクの内容です。もう一つタスクが定めてあります。minjs こちら、今度はJavaScript ファイルです。それを一つにまとめた上でconcat というプラグインを使っているんですがさらに、uglifyそのファイルサイズを小さくしてその上で上の images と似ていますけれどもjs というフォルダを作って一つの JavaScript ファイルとしてコピーをするという処理を行っています。そして、実はもう一つタスクがありましてこれはminall というタスクなんですが上の二つのタスクを同時に実行するということになっています。ですから、 minall で同時に実行されます。 但し、本当に同時ですので終わりが同時かどうかは確かではありません。例えば、画像がたくさんあった場合imagemin が実行されてそれがされ終わる前にJavaScript ファイルの圧縮コピーが行われるということがあり得ます。画像ファイルと、それからJavaScript ファイルでしたらそれぞれあまり関係があることはありませんけれどももし関係がある場合こちらの処理を必ず実行し終えてからこちらの処理を行いたいという場合にはこの書き方では保証がされません。では、どうやって順序立ててタスクを実行したらよいかということがポイントになります。gulpfile.js の書き換えを行う前にプロジェクトファイルの中を一旦確かめておきましょう。二つの処理がありましたね。assets という中にある画像ファイルを処理してこれをコピーする。コピー先はimages というフォルダを作ります。それからもう一つ、今度はJavaScript ファイルの方なんですがsrc という中にある二つのJavaScript ファイルを一つにまとめて圧縮した上で今度は js というフォルダを新たに作ってそこに、まとめた一つの、しかも圧縮したファイルを保存するということになります。 ここではimagemin を実行し終えてからminjs を実行したいと。どうしたらいいかということですね。この書き方では、同時並行で進んでしまうということなのでまず、minjs を行う前にimagemin を実行したいという場合には実は、この書き方にもう一つオプションがあります。function の前にもう一つ引数が置けるんですね。どういう引数かというとここに、配列で先に実行しておきたいタスクを書きます。その上でfunction と書いてあげるとminjs を実行した時にimagemin を実行し終えてからこちらの処理を行うことになります。ですから、minall の方はこれでいいということになるわけですね。もっとも、この場合は画像は、もう特に変更は加えてないのでminjs だけ実行したいといった時ですね。この書き方では、必ずimagemin が実行されてしまいます。画像を変更していないのに。ではどうしたらいいかということでここは、復帰してしまいましょう。元に戻します。変更をしなくていいので「はい」ということでこういう時は仕方がないのでこれをコピーしましょう。「コピー」した上で「ペースト」します。 もちろん、タスク名は同じではいけません。minsub にしましょう。そして、先ほど見た通り引数をもう一つ加えてそこに imagemin を持っていくと。配列は閉じます。そして、ここではminjs ではなくてminsub ですね。これを呼び出すと。このようにすればminjs だけ実行したかったらminjs全部まとめて、しかも順序を決めてimagemimn の後に minjs と同じ処理を行いたいという場合にはminallを呼べばいいということですね。では、これを保存してminall で確かめてみましょう。「コマンドラインツール」の「ターミナル」を開きました。ここで先ほどの minall を実行します。gulp minallそうすると、imagemin が先に実行されます。その上で、minsub が実行されて結果として、minall が全て終わりました、ということですね。ちゃんと処理が行われたということになります。imagemin の方は画像を圧縮したために約8.1%画像が小さくなったという表示が出ています。プロジェクトのフォルダも確かめておきましょう。確かに、assets の画像ファイルがimages という中にコピーされています。 サイズが8.1%小さくなったということなのでそれを信じましょう。それから、src にある二つの JavaScript ファイルこれを一つにまとめて小さくした上でjs というフォルダの中にscript.js という名前でまとまったファイルが保存されています。このレッスンでは複数のタスクを予め決めた順序で実行するという方法についてご説明しました。その場合に使うのは.task のライン引数ですね。そこに配列で先にやっておきたい処理を置いておくとそれが終わってからこの function 内の処理が行われるということでした。

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

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

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

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

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

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