Gulp 4로 더 빠르게 빌드하세요

Gulp 버전 4가 나왔습니다! 마이그레이션은 매우 간단하며 최소한의 주요 변경 사항을 포함하는 동시에 작업을 병렬화할 수 있는 매우 유용한 기능을 제공합니다.

3에서 4로 업그레이드

성공적인 전환을 위해 가장 인기 있는 것Medium post 중 하나를 따를 수 있습니다.

Sam은 또한 전환을 쉽게 만드는 방법에 대한 레시피를 작성했습니다.

더 이상 사용할 수 없는 기사

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 작업이 모든 이미지를 하나씩 처리해야 한다는 것입니다.

생각해 보면 프로세스를 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() 를 사용하여 병렬 작업을 수행하는 것은 식은 죽 먹기입니다!

더 나아가

지금은 이게 더 나아졌지만 여전히 저를 괴롭히는 한 가지 작은 점이 있습니다. 눈치채셨다면 사진에 사용된 블롭입니다.

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

그러나 webp blob에 svg가 없습니다.

".{png,jpg,jpeg}"

SVG 파일을 WebP로 변환하고 싶지 않기 때문에 일부러 이렇게 했습니다. 높은 품질을 유지하면서 응답성에 완벽하게 대응하므로 이 기능을 놓치고 싶지 않습니다.

이는 또한 해당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.

결론

나는 훌륭한 사용자 경험을 위해 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 };

이러한 새로운 기능에 대해 저만큼 놀라셨기를 바랍니다. 즐거운 번들링!