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

複数のタスクを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Gulpに複数のタスクを定めて、同時に実行します。
講師:
07:23

字幕

このレッスンではgulp に複数のタスクを定めてその複数のタスクを同時に実行してみます。プロジェクトのフォルダを開きましたけれどもこの中には gulpfile.js がありません。というはやりたいことが二つあります。この imagemin というタスクを定めたgulpfile.jsこれは画像を圧縮すると、そしてコピーをする、というタスクです。画像はこの assets の中に入っています。それを圧縮した上で、別のフォルダを作ってそこにコピーするというタスクになっています。それからminjs というタスクなんですけれどもこれは JavaScript のファイルsrc という中に入っているんですがこの二つを一つに纏めて、そしてこちらも圧縮して、別のフォルダにコピーするというタスクが定めてあります。もっとも、サブフォルダの中にあったのではgulp のタスクとして実行できません。ですから、このプロジェクトフォルダの直下にgulpfile.js を新たに設けてその中に、この二つのタスクを定めしかも、それを同時に実行するというタスクも加えたいと思います。二つのサブフォルダに入れておいたgulpfile.js の内容がこの二つです。 まず、imagemin のタスクの方なんですがassets というフォルダの中に入っている画像ファイルこれを、gulp-imageminというプラグインで圧縮した上でimages というフォルダを作ってその中にコピーするという風にしてあります。次に、今度はminjs の方ですね。こちらはプラグインを二つ使ってあるんですがgulp-concat とgulp-uglifyまず、これもソースを定めていますね。src という中に入っている「.js」のファイルを concatこれは一つに纏めます。その上でuglify というプラグインでこれを圧縮した上で小さくした上でそれを js というフォルダを作ってその中にコピーするという事になっています。これを一つに纏めたいと思いますのででは、まずこの imagemin のタスクですね。これをプロジェクトのフォルダ直下に保存したいと思います。「別名で保存」にしてサブフォルダじゃなくて、この直下ですね。gulp_project というプロジェクトファイルの直下に、このまま保存します。リンクは更新しません。そうしたら今度は minjs の方ですね。こちらを、今直下に保存したgulpfile.js の方にコピーします。 もっとも、gulp の require ですね読み込みの方は、これは共通ですのでこの二行目からですねこちらをコピーしてルートの直下にあるgulpfile.js の方にペーストします。これでもいいんですが、やはり var 宣言変数は纏めた方が見やすいでしょう。これで、二つのタスクが一つのgulpfile.js の中に定められました。ですからそれぞれを実行することができます。gulp imagemin でこちらの処理を実行する、タスクを実行するそれから gulp minjs でこちらの処理を実行するという事ができます。ですから、こうしておけばそれぞれをコマンドは別にして実行することができるんですが折角ですから、同時に実行するタスクもここに加えたいと思います。タスクを加えるには「gulp.task」ですね。そしてタスク名を付けましょう。minall としましょう。そして、今度はfunction は定めません。というのは既にここに定めてあるのでこれを両方使いましょうという事です。二つのタスクを一緒に定めたいという場合には、それを配列に入れます。その上でこのタスク名ですね。まず、imagemin の方をコピーして持ってきます。 そして、配列ですから、「,」区切りで幾つでもタスクを加えられるんですけれどもその後に、今度は minjs ですね。こちらをコピーして持ってきます。ここです。そうすると、今度は minall でこの二つのタスクを同時に実行すると。ですから、minall という新たなタスク同時実行のタスクが、これで出来上がったという事です。では、ファイルを保存しましょう。コマンドラインツールのターミナルを開きましたので同時実行のタスクですねminall を実行してみたいと思います。まず、プロジェクトのフォルダの方にディレクトリを変更しておかなければいけません。既に変更されています。ですから ここで gulp minall ですね。これで、同時実行のタスクが実行されます。ファイルの数が多くないんですぐに実行が終わってしまいましたけれどもimagemin の方が実行されそれから minjsその二つのタスク実行する minall が結果として、実行されましたという事です。二つのタスクが実行されています。プロジェクトのフォルダを見てみるとフォルダが増えていますね。まずは、imagemin で実行されたものはimages という中にこの assets と同じ内容が圧縮された画像がここにコピーされています。 圧縮されたかどうか、ちょっとサイズの方は確認しませんけれども、大丈夫です。圧縮されています。それから、今度は minjs の方ですね。src に入っているこの二つの JavaScript ファイルこれを一つに纏めた上で、更に圧縮をしてjs の中に入っています。そして、script.jsという名前にしてあるんですがこれが圧縮されたJavaScript ファイルです。この様に、二つのタスクが同時に実行されたという事です。このレッスンではgulpfile.js に複数のタスクを定義した上でそれらを同時に実行するタスクを更に新たに加えました。その場合にはまずタスクは gulp.task で幾つでも設定することができます。そして、纏めて実行したい場合にはその gulp.task の中でタスク名の後、配列でタスク名を含めてあげればそれらのタスクを纏めて同時に実行するという事ができるという事でした。

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

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

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

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

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

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