脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

Nuxt.jsで画像をwebpで圧縮する

library install

npm install --save gulp-webp

gulpfile.js

vi gulpfile.js

const webp = require('gulp-webp')

gulp.task('webp', function() {
  return gulp.src("./precompile/img/**/*.{svg,gif,png,jpg,jpeg}")
             .pipe(webp())
             .pipe(gulp.dest("./assets/img/"));
});

実行コマンド

gulp webp

流れとしてはprecompile/imgという名前の画像ファイル置き場を作成し、ここにjpgやpngやらの画像を配置する
gulp webpコマンドで上記の画像ファイルをwebpファイルに変換してassets/img以下に配置する
(その後は通常通りnuxt generateでdist以下に画像ファイルが配置される)