Gulp-optimizing-images

Gulp-画像の最適化

この章では、画像を最適化する方法を学びます。 最適化すると、画像のサイズが小さくなり、読み込みが速くなります。

プラグインをインストールしてイメージを最適化する

コマンドラインから「work」ディレクトリに移動し、次のコマンドを使用して「gulp-changed」および「gulp-imagemin」プラグインをインストールします。

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

Copy

依存関係の宣言とタスクの作成

設定ファイル gulpfile.js で、最初に次のコマンドに示すように依存関係を宣言します。

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

Copy

次に、次のコードに示すように、画像を最適化するタスクを作成する必要があります。

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';

   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});

Copy

*imagemin* タスクは、_src/images/_フォルダーからpng、jpg、およびgifイメージを受け入れ、宛先に書き込む前にそれらを縮小します。 * changed（）*は、最小化するたびに新しいファイルのみが渡されるようにします。 _gulp-changed_プラグインは新しいファイルのみを処理するため、貴重な時間を利用します。

Copy

タスクを実行する

構成ファイルがセットアップされ、実行する準備ができました。 次のコマンドを使用して、タスクを実行します。

gulp

Copy

上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます。

C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)

Copy