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

デフォルトのタスクを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ファイルの修正に応じたタスクを、デフォルトのコマンドで行うようにします。
講師:
05:13

字幕

このレッスンではファイルの修正に応じたタスクをデフォルトのコマンドで行うようにしています。今開いている gulpfile.jsこれには四つのタスクが指定されています。先ず、imagemin というのはプラグイン imagemin を使ってassets という画像フォルダの中の画像を圧縮をしたうえでimages というフォルダの中にコピーしています。二つ目、minjs というのは今度は concat と uglifyという二つのプラグインを使っています。その上で、src というフォルダの中にあるjavascript ファイルをconcat で複数あるものを一つにまとめuglify で圧縮したうえでjs というフォルダにその一つのファイルを入れるという形になっています。三つ目、minall というのは上の二つですよねこれを同時に実行できるようにしています。もっとも、minall というコマンドを打たないと実行されません。そこで、最後に watch というタスクを指定してその中でメソッド watch を呼び出しています。そして、assets 画像のフォルダとsrc/*.js のフォルダどちらかの中身を修正して保存したらminall を実行すると。 ですから、両方を実行するわけですね。ということで自動化をしました。けれども、よく考えてみるとちょっとブラがありますよね。例えば、javascript のファイルを修正しただけなのにimagemin のタスクも実行されてしますわけですね。minall を呼んでいますから。出来れば、画像を修正した時にはimageminjavascript を修正した時にはminjs を呼ぶという風にしたい。これは、watch を一回で済まそうとするかいけないですね。もう一回こっちを実行します。コピーしてしまいましょう。そして引数は二つの配列ですね。先ず、watchする対象のディレクトリをまげるわけですね。こちらは後のほうのこっちに移動します。ですから、カンマは消すと。そして、minnall でなく画像が修正されたときにはimagemin を呼ぶわけですね。実行します。コピーしてペースト。それから、javascript のファイルが修正されたときにはminjs だけ実行すればいい。これもコピーします。これで watch で実行されるんですがここをさらに defaultこれはキーワードになっていてこの default という指定をするとgulp の後にタスク名を入れる必要がありません。 試してみたいのでファイルを保存しましょう。コマンドラインツールのターミナルで gulpそしてタスク名無しです。実行してしまいます。これで、watch の処理がスタートしました。では、ちょっと修正して見ましょうね。フォルダ src の中の vector というjavascript ファイルを開きました。この最後にテスト用にconsole.logでは、クラス名でも入れることにしましょう。コピーを持ってきます。そして、今までは実習ですけれども保存をします。ファイルを保存ですね。ターミナルを見て見るとデフォルトのタスクが実行されました。けれども、minjs しか動いていないですね。ですから、imagemin は実行されていないということになります。ここはいったん、ctrl+C で止めておくことにしましょう。念のため、プロジェクトのフォルダのほうも確かめます。先ずわかることは、js というフォルダが出来ていますけれどもimages ないですね。なぜかというとimagemin は実行されていないのでコピーが行われていません。更に確認のためにこの圧縮した script.js ですねこれを開くことにしましょう。 見難いですけれども今度はここに console.logそして、クラス名が来ていますので修正が反映された minfile が出来上がったということが確認できました。このレッスンではファイルの修正に応じたタスクをデフォルトのコマンドで行うようにしました。その場合、タスクの名称はdefault と決まっていてディレクトリごとに実行したいタスクが違う時にはwatch を分けて、そのディレクトリとタスクの組み合わせですねこれを指定してあげればいいということでした。

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

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

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

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

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

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