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

画像を圧縮してコピーする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォルダ内の複数の画像ファイルを、圧縮してからコピーします。
講師:
04:58

字幕

このレッスンではフォルダ内の複数の画像ファイルを圧縮してからコピーします。その際に、圧縮のプラグインを使うんですが今回は、gulp-imageminというプラグインを使っています。このインストールは既に済んでいます。そして、圧縮するのはプロジェクトのフォルダ内のこの assets というフォルダに入っている画像なんですけれども三つありましていずれも PNG の画像です。こちらが約「390KB」。「398KB」大体同じくらいですね。そして、large という方はちょっと大きくて「1.6MB」。この assets というフォルダ内の画像を圧縮した上で新たに images というフォルダを作ってその中にコピーします。ですから、圧縮後の画像はすこしサイズが小さくなってると、そういう予定です。Dreamweaver で開いたgulpfile.jsこの中には既にコピーをするというタスクは作ってあります。まずgulp の読み込みをした上でそれに対して、タスクの登録copy という名前にしてありましてこちらが処理ですねfunction 内。その中で、まずソースを指定しています。assets の中のフォルダを含めて画像を全てという事になります。 そしてpipe で繋いだ上で今度はデスティネーションですねdest という事で保存先、コピー先はimages というフォルダになっています。この間に圧縮するという処理を入れる訳ですね。その時にプラグインを使いますのでプラグインをここで読み込みます。var imageminとしておきましょう。そしてrequire ですね。これはプラグインの名前を入れます。gulp-imageminという事ですね。では、ここはまた pipe で繋ぎます。「.pipe」処理を実行しましてこの場合は、この imageminという変数に入れたオブジェクトに対して実行という事で丸括弧です。タスク名変えましょうか。同じく imagemin にしましょう。タスク名も変数名と同じ imageminという事で、コピーします。これを一旦保存します。コマンドラインツールのターミナルを開きました。ここでまず、プロジェクトのフォルダにディレクトリを変更しなければいけません。change directory「cd gulp_project」そして、正しく変更ができたという事を確認した上で、タスクを実行します。gulp imageminという名前にしましたね。 実行します。少し時間がかかってますね。圧縮する手間がありますので若干時間が掛かっています。圧縮できました。成功しましたという事でminified と小さくしました。「3 images」これは画像ファイル三つですね。そして、「200KB」弱小さくできたとパーセンテージで言うと約「8%」という事です。プロジェクトのフォルダの方には確かに images というフォルダが出来上がってコピーができてる様です。これ両方開いてみましょう。今 images、圧縮後コピーされた方ですね。サイズを見てみると「353KB」。こちらは元々は「390KB」でしたね。もう一つは、やはり「390KB」ちょっと「398KB」という事なんですが圧縮後は「375KB」。large、確か「1.6MB」だったと思うんですが、「1.5MB」。確かに「1.6MB」だったものが小さくなったという事が確認できました。このレッスンではプラグインの gulp-imagemin を使って画像を圧縮した上でコピーするという方法について、お説明しました。その場合、まずプラグインを読み込みます。変数にオブジェクトを入れてそして、pipe で繋いでその変数に対して実行を行うとあとは、普通にソースからデスティネーションにコピーするとこの三つの処理を順番に行ってればいいという事でした。

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

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

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

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

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

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