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

タスクでファイルをコピーする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タスクによって、フォルダ内の複数のファイルをコピーしてみます。
講師:
04:37

字幕

このレッスンではgulp のタスクによって、フォルダの中の複数のファイルをコピーしてみます。今プロジェクトのフォルダを開いてるんですけれどもpackage.json とそれから、gulp のモジュールがnode_modules とフォルダの中あります。コピーするファイルはこちらで画像があって、大きい画像が一個また、サブフォルダに入っています。そして、どこにコピーするのかという事なんですがここに images というフォルダを作ってしまうという事です。その作るというのもタスクの中で行います。そして、gulpfile.jsここに書き込んでいくんですがまだこの中は簡単なテスト用のコードだけです。では、Dreamweaver で開いてみましょうか。こちらですね。まずは require でgulp のモジュールを読み込んでそれに対してタスクの登録をします。test とありますけれども今度は copy に変えましょう。そして、console.logこれはテスト用に入れただけですのでいりません。この後にタスクを実行するんですけれどもまず、タスクを task という事で変数に取っておいてgulp に対してコピーするソースです。 src という事で指定します。これは、複数のフォルダを指定できますので配列に入れる形になります。もっとも今回は、一つのディレクトリで足りる訳なんですけれどもassets という中でしたね。でも、その直下に小さい画像のファイルが二つあって更にサブフォルダがありましたね。サブフォルダも含めてという事なんでこの場合には「*」を二つです。そして「*」という風にするとサブフォルダまで含めてという事になります。それを全てソースとしてコピー元とします。次にコピー先です。この変数に取ったtask に対してpipe というメソッドでどんどんやりたいことを繋いでいきます。ここでまた gulp にたいしてこの gulp ですね。デスティネーションコピー先という事です。dest と。そしてここはコピー先は一つにしないとどれをどこにやっていいか分からなくなりますね。そして、まだフォルダがありませんでしたけれどもimages というフォルダを作ってという風にします。その中にコピー先をするという事になりますのでこれを保存しましょう。コマンドラインツールのターミナルを開きました。ここでgulp に対してタスク名copy に変更しましたよね。 これで実行します。そうすると、コピーを実行してますよと言ってあっという間に終わりましたけれども実際のフォルダの中を見てみましょう。先ほどまでなかった imagesというフォルダが作られました。その中には画像が小さいもの二つと更にサブフォルダ large の中に大きい画像が一つという事でコピーが作られました。ここでもう一つ説明を加えておきます。このタスクを実行する時にgulp のメソッドを実行してそれを変数に入れてその変数に対して「.pipe」という事で次の命令を実行した訳なんですけれどもこれは、一々変数に取らなくても大丈夫です。分かり易い様に、ステップが見易い様に一旦変数に取りましたが実際のところは取ってしまってこの「;」なしに直接「.pipe」もし、まだ続けるものがあれば更にここで改行して「.pipe」という事でどんどん、どんどん繋げる事ができます。ですから、慣れてきたらこの書き方の方が手っ取り早いという事が言えましょう。このレッスンではgulp のタスクを定義してファイルのコピーを行いました。その場合には、gulp のオブジェクトに対して、タスクを登録してその function の中で、gulp に対してソースを指定し(これは配列です)その戻り値に対して、「.pipe」で今度はコピー先ですね。 この様に指定をすると、複数のファイル或いはサブフォルダがあってもそのフォルダの中のファイルも含めてデスティネーションのフォルダに必要があれば作ってコピーをすることができるという事でした。

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

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

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

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

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

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