あなたのビルドをGulp

Gulpバージョン4です!マイグレーションはかなりまっすぐになり、1つの非常に便利な機能を持っている間に最小の変更を含みます.

3から4へのアップグレード

あなたは最も人気のあるMedium post 移行の成功について
サムはまた、どのように移行を風にするための彼のレシピに書いた.

もはや利用できない記事

Gulp 3で画像を圧縮する

Gulp 4の前に、これはあなたがイメージを圧縮するためにしたかもしれないものです.

const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const webp = require("gulp-webp");

gulp.task("pictures", function() {
  return gulp.src("src/img/**/*.{jpg,jpeg,png,svg}")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("webp", function() {
  return gulp.src("src/img/**/*.{jpg,jpeg,png}")
    .pipe(webp())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("img", ["pictures", "webp"]);

は

Compress my jpeg, png and svg files one by one, and wait before they are all compressed before converting them into webp.

しかし、主な警告は、あなたのpicture タスクを1つずつすべての画像を処理する必要があります.
考えてみると、ファイルの種類によってプロセスを分割できます.png , jpeg , svg . これは可能ですgulp-imagemin 別のライブラリを使用して画像を圧縮しますSVGO , PNGQuant , JPEGTran ).

Gulp 4で画像を圧縮する

まず、同じアルゴリズムを保ち、新しい gulp.series() メソッド.

const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const webp = require("gulp-webp");

gulp.task("picture", function() {
  return gulp.src("src/img/**/*.{png,jpg,jpeg,svg}")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("webp", function() {
  return gulp.src("src/img/**/*.{png,jpg,jpeg}")
    .pipe(webp())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("img", gulp.series("picture", "webp"));

あなたが走るならばgulp img コンソールでは、同じ出力を行います.今、我々は最新のGulpの4機能、かなりまっすぐ進む移行を使用してください!
別れましょうpicture タスク.

const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const webp = require("gulp-webp");

gulp.task("png", function() {
  return gulp.src("src/img/**/*.png")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("jpg", function() {
  return gulp.src("src/img/**/*.{jpg,jpeg}")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("svg", function() {
  return gulp.src("src/img/**/*.svg")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("webp", function() {
  return gulp.src("src/img/**/*.{png,jpg,jpeg}")
    .pipe(webp())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("img", gulp.series("png", "jpg", "svg", "webp"));

再び、何も変更され、それだけでより簡単に次の来る.
今楽しいパートは:3つの最初のタスクを並列に実行してみましょう.

const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const webp = require("gulp-webp");

gulp.task("png", function() {
  return gulp.src("src/img/**/*.png")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("jpg", function() {
  return gulp.src("src/img/**/*.{jpg,jpeg}")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("svg", function() {
  return gulp.src("src/img/**/*.svg")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("webp", function() {
  return gulp.src("src/img/**/*.{png,jpg,jpeg}")
    .pipe(webp())
    .pipe(gulp.dest("dist/img"));
});

gulp.task("img", gulp.series(gulp.parallel("png", "jpg", "svg"), "webp"));

これは

Compress all the png, jpg and svg files in whatever order you want, but wait for all before starting converting them into webp.

新しい使用 gulp.parallel() , これは、並列タスクを実行するためのケーキの一部です!

更なる

今、これはより良いですが、まだ私はバグを1つの小さなことがあります.あなたが気づいたならば、これは我々の絵のために使われるBlobです:

".{png,jpg,jpeg,svg}"

しかし、Webp BlobはSVGを欠落している.

".{png,jpg,jpeg}"

私は私がWebPに私のSVGファイルを変換したくないので、私は目的でこれをしました:私は、この機能を失うことはしたくないので、高品質を維持しながら応答性に対応するために最適です.
これも私たちのwebp タスクはSVGが圧縮される前に待つ必要はない.したがって、以下のような別の最適化層を追加することができました.

gulp.task('picture', gulp.parallel('png', 'jpg'));

gulp.task('img', gulp.parallel(gulp.series('picture', 'webp'), 'svg');

これは

Compress SVG files in the same time as compressing jpg and png files with webp waiting for jpg and png files before converting them into webp.

結論

私は、その大きなユーザー経験のために群れを愛しています.複雑なバンドルロジックを構築するだけでとてもきちんとしている.
チェックアウトthe documentation あなたがGulpとすべての機能についての詳細を知りたい場合は、ファイルの変更を見て、ファイルを更新するようにタスクを実行するなど、もっとたくさん.
Gulpも最新のJavaScript表記をサポートしていますので、以下のような空想的な作業を書きたいと思います.

const { src, dest, series, parallel } = require("gulp");
const imagemin = require("gulp-imagemin");
const webp = require("gulp-webp");

const png = () => src("src/img/**/*.png")
  .pipe(imagemin())
  .pipe(dest("dist/img"));

const jpg = () => src("src/img/**/*.{jpg,jpeg}")
  .pipe(imagemin())
  .pipe(dest("dist/img"));

const webp = () => src("src/img/**/*.{png,jpg,jpeg}")
  .pipe(webp())
  .pipe(dest("dist/img"));

const img = series(parallel(png, jpg), webp);

module.exports = { img };

閉じるこの動画はお気に入りから削除されています.ハッピーバンドル!