Gulp-optimizing-images
提供:Dev Guides
Gulp-画像の最適化
この章では、画像を最適化する方法を学びます。 最適化すると、画像のサイズが小さくなり、読み込みが速くなります。
プラグインをインストールしてイメージを最適化する
コマンドラインから「work」ディレクトリに移動し、次のコマンドを使用して「gulp-changed」および「gulp-imagemin」プラグインをインストールします。
npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev
依存関係の宣言とタスクの作成
設定ファイル gulpfile.js で、最初に次のコマンドに示すように依存関係を宣言します。
var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
次に、次のコードに示すように、画像を最適化するタスクを作成する必要があります。
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(){
});
*imagemin* タスクは、_src/images/_フォルダーからpng、jpg、およびgifイメージを受け入れ、宛先に書き込む前にそれらを縮小します。 * changed()*は、最小化するたびに新しいファイルのみが渡されるようにします。 _gulp-changed_プラグインは新しいファイルのみを処理するため、貴重な時間を利用します。
タスクを実行する
構成ファイルがセットアップされ、実行する準備ができました。 次のコマンドを使用して、タスクを実行します。
gulp
上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます。
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%)