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

gulp-imageminをインストールする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像を圧縮するプラグインgulp-imageminをインストールします
講師:
02:52

字幕

このレッスンでは画像を圧縮するプラグインであるgulp-imagemin のインストールについてお説明します。今開いているのは gulp のサイトです。gulpjs.com ですね。そこにプラグインのページがありますのでここに来まして検索です。今回はイメージを圧縮するという事でこの検索のフィールドの中にimage と入れると、先頭に来ましたね。gulp-imageminこれが今回使うプラグインです。インストールのし方はすぐ書いてあります。npm installそして、オプションが開発用という事で開発用にモジュールをプロジェクトのフォルダの中にインストールするという事ですね。そして、package.json の中にもその設定を書き込む。プラグインの名前はgulp-imagemin です。イメージを minify するという事ですね。これもコピーしちゃいましょう。コピーをします。コマンドラインツールのターミナルを開きました。まずは、プロジェクトのフォルダにインストールしますのでディレクトリをプロジェクトのフォルダに cd、変更します。gulp_project と。そして、正しくディレクトリが変わったことを確認した上で先ほどのコピーしておいたコマンドをペーストします。 このワーニングは気にしなくて結構です。「こういうことなってないけど、いいの?」と確認してるだけですね。そして、モジュールのインストールには少し時間が掛かってしまいます。インストールが進んでる訳です。メッセージが少し出てきますのでそれも見ておきましょう。そしてここですね。gulp-imagemin のインストールが済んだという事が確認できました。念のため、package.json の中も確認しておきましょう。imagemin をインストールする時にオプションとして「--save-dev」という指定をしましたのでdevDependencies の中にgulp-imagemin が入っています。このレッスンではgulp の画像を圧縮するプラグインであるgulp-imagemin のインストールについてお説明しました。gulp のページからプラグインを検索してそしてimagemin のページに行ってインストールはもうコピーアンドペーストですね。ただし、インストールするプロジェクトのディレクトリに変更するという事は忘れないで下さい。

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

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

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

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

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

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