Gulp&gulp-imageminを使用して画像を縮小し、サイトのパフォーマンスを向上させる方法

画像はインターネットのいたるところにあります。なんらかの形で少なくとも1つの画像を含まない単一のページまたはアプリケーションを見つけるのは難しいでしょう。画像は、物語を語り、私たちの生活の重要な部分を強調するのに役立つ優れた方法です。

しかし、あなたが私のようであれば、大きな画像があるとサイト/アプリのパフォーマンスに深刻な影響を与える可能性があることをご存知でしょう。今日は、Gulpと、その場で画像のサイズを縮小するためにnpm呼び出されるパッケージの使用方法を説明しますgulp-imagemin

これらの言葉のすべてが何を意味するのかわからない場合でも、恐れることはありません!以下に、関連性のある重要なリンク/説明をいくつか示します。

  • 縮小化、または私がそれを呼んでいるように縮小化することは、サイズを縮小するためにソースコードの不要な部分を削除する行為またはプロセスです。
  • Gulpは、ワークフローの一部を自動化してプロセスを合理化できるJavaScriptビルドツールです。建物に集中できるように、ワークフローのそれほど面白くはないが重要な側面(画像サイズの縮小など)を処理します。ここでGulpを見つけることができます。
  • 利用npmするNode.jsには、開発者がサーバー(バックエンド)環境でJavaScriptコードを使用できるようにするフレームワークをインストールする必要があります。ここでノードを見つけることができます。
  • npm(ノードパッケージマネージャー)は、その名前が示すとおりに機能します。JavaScriptのパッケージマネージャーであり、「世界最大のソフトウェアレジストリ」です。npm開発者を支援する素晴らしいパッケージ/ユーティリティの巨大なストレージ領域と考えてください。npmはここにあります。
  • gulp-imagemin先ほど触れた素晴らしいパッケージの1つです。このパッケージを使用すると、保存が行われるたびに画像のサイズを自動的に縮小できます。ここでgulp-imageminを見つけることができます。

さて、説明が邪魔にならないので、楽しい部分に取り掛かりましょう:D

プロジェクトファイルの構造

選択したテキストエディタを開いてプロジェクトのディレクトリを作成することから始めます。既存のディレクトリがある場合は、ターミナルでそのディレクトリに移動し、[ノードとnpmのインストール]セクションにスキップします。

VS Codeを使用している場合は、を押すと組み込みターミナルを見つけることができますctrl + ` (tilde)

ターミナルでのプロジェクト構造は次のようになります。

そして、VSCode内のエクスプローラーでプロジェクトファイルの構造がどのように表示されるかを次に示します。

ご覧のとおり、ベースファイルと縮小ファイル用に別々のディレクトリがあります。プロジェクトディレクトリを確立したら、必要なものすべてのインストールを開始します。

Node&npmのインストール

さて、ディレクトリが稼働しているので、依存関係のインストールを開始しましょう。すでにNode & npmインストールしている場合は、Gulp&gulp-imageminのインストールセクションに進んでください

  1. まず、node --vターミナル内に入力して、ノードがインストールされているかどうかを確認します。そうした場合、あなたは次のようなものを取り戻すでしょうv8.9.3
  2. 何も戻らない、またはエラーが発生する場合は、ここからNodeをダウンロードしてインストールしてください。+数分かかる場合がありますので、しばらくお待ちください。
  3. 一度Node.jsインストールされている、あなたはしているだろうnpm、それが同梱されていますので、うまくとしてインストールNode。ターミナルにnpm入力すると、のバージョンを確認できnpm -vます。あなたは6.4.1戻ったようなものを手に入れるべきです。
  4. 次にpackage.json、プロジェクトのファイルを作成する必要があります。これを行うには、コマンドを使用しnpm initます(詳細はpackage.jsonこちらをご覧ください)。一連の質問が表示されますが、回答したくない場合はIs this OK? (yes)、表示されるまでEnterキーを押してから、Enter最後にもう一度押すと、このセクションが終了します。

このファイルは、私が始めたディレクトリとは別のディレクトリに作成されていることに気付くでしょう。これは、以前にこれらすべてを現在のプロジェクトディレクトリにインストールしたので、例を提供できるようにするためです。

Gulpとgulp-imageminのインストール

Node & npmインストールが完了するとGulp & gulp-imagemin、次の手順でインストールできます。

  1. まず、npm install --save-dev gulp端末を入力します。--save-devフラグが何をするのか知りたい場合は、このStackOverflowの投稿をチェックしてください。
  2. 繰り返しになりますが、Gulpのインストールには1分かかる場合がありますが、最終的には次のようになりますので、しばらくお待ちください。 [email protected] added 318 packages from 218 contributors and audited 6376 packages in 49.362s found 0 vulnerabilities
  3. gulp -vターミナルに入力してGulpのバージョンを確認すると、次のようなものが表示されます。[13:06:56] CLI version 2.0.1 [13:06:56] Local version 4.0.0
  4. 今度はgulp-imagemin入力npm install --save-dev gulp-imageminしてインストールしましょう。もう一度、次のようなものが返されます。 [email protected] added 232 packages from 97 contributors and audited 10669 packages in 39.103s found 0 vulnerabilities
  5. そして、このセクションの最後のステップは、ファイルを作成するgulpfile.jsことです。ファイルがこの正確な名前を持ち、プロジェクトのフォルダー構造の最も外側のレベルにあることが非常に重要です。

コードを書く—ついに楽しい!

さて、すべてを正しい場所にインストールする処理が完了したので、開いて、gulpfile.jsすべてのハードワークを実行する実際のコードを記述しましょう。

  1. まず、gulp-&g t; const gulp = require('gulp');を要求します。基本的に、ノードのモジュールシステムを利用して、さまざまなファイルにあるコードを使用します
  2. 今必要gulp-imagemin-&g t; const imagemin = require('gulp-imagemin'); ここでも、モジュールシステムを利用して、プロジェクトでこのコードを使用しています。
  3. 次に、すべての画像押しつぶしを実行する関数を作成する必要があります。

    function imgSquash() {

    return gulp .src("./img/*")

    .pipe(imagemin())

    .pipe(gulp.dest("./minified/images"));

    }

  4. 私の後にディレクトリを設定すると、上記のコードが機能します。ディレクトリが異なって見える場合.src & .destは、ファイルが配置されている場所と、ファイルが縮小された後にパイプで転送する場所に一致するように行を変更する必要があります。
  5. Gulpタスクに基づいて動作し、忙しくするためにたくさんのタスクを提供できます。重労働を行うための実際の関数を定義Gulpしたら、その関数をどうするかを指示する必要があります。gulp.task("imgSquash", imgSquash);
  6. ここで、Gulp指定されたディレクトリで変更(新しい画像)を監視し、変更が検出されたときに、imgSquash関数を自動的に実行して画像を縮小し、設定した宛先にパイプ処理するようにします。これは、ディレクトリを監視する別のタスクを定義することで実現します。

    gulp.task("watch", () => {

    gulp.watch("./img/*", imgSquash);

    });

  7. コードを書くための最後のステップは、私たちimgSquashwatchタスクを連続して呼び出す最後のタスクを定義することです。ここで、「デフォルト」という単語はターミナル内の単語を指し、関数が実行され、Gulpがディレクトリを監視した直後に変化します。 gulp.task("default",gulp.series("imgSquash","watch"));gulpgulp.seriesimgSquash

完成したファイルは次のようになります。

このファイルを保存し、ターミナルを開いて、gulpEnterキーを押します。次のようなものが表示されます。

ご覧のとおり、新しいファイルがベースディレクトリに追加さimgSquashれるたびに、Gulpが監視していたため、タスクが開始され、すぐに関数を実行して画像を縮小しました。Gulpの使用が終了したらctrl + c、ターミナルを押して監視プロセスを終了できます。

今、あなたはあなたのウェブサイト/アプリであなたの縮小された画像を使い始めて、パフォーマンスのその新しく発見されたブーストを楽しむことができます!

要約

Gulpは非常に強力なJavaScriptビルドツールであり、プロジェクトのビルドの面倒ですが重要な側面のいくつかを自動化するのに役立ちます。1時間未満の作業で画像を縮小することができたため、読み込み時間が短縮され、ウェブサイト/アプリのパフォーマンスが向上しました。それは素晴らしいです、そしてあなたはあなた自身を誇りに思うべきです!

これは、Gulpのようなツールを構築するのに役立つ多くの方法の1つにすぎません。それが役立つ方法は他にもたくさんあります(CSS / JSファイルの縮小/連結)。これらのすばらしいオプションのいくつかを試してみてください。

この記事を楽しんだら、他の人が私の作品を見つけるのに役立つので、拍手を寄付することを検討してください。また、コメントをドロップして、あなたが取り組んでいることと、Gulpが建物に集中するのにどのように役立つかを教えてください。

そして最後に、この記事はもともと私の個人的なブログに投稿されました。あなたがいる間、私のブログページの右上隅にあるニュースレターにサインアップすることを忘れないでください。私は毎月それを送ります(私はあなたの受信箱をスパムしないことを約束します)そしてそれはあなたが役に立つと思うウェブ中からの素晴らしい記事でいっぱいです。

いつものように、愛、幸福、そしてコーディングに満ちた素晴らしい一日を過ごしましょう!