Самый простой способ оптимизировать скорость страницы, не нарушая всего
Я пообещал себе, что больше не буду участвовать в учебных курсах по Gulp; Task Runners - не самая сексуальная тема в мире, и есть вероятность, что если вы добрались до этого блога, вы либо укрепили конвейер CI / CD для запуска программного обеспечения, либо он вам просто не нужен . На этот раз мы сделаем исключение, потому что gulp-imagemin особенно хорош.
Imagemin - это отдельная библиотека Node, которая также поставляется с CLI и, конечно же, с плагином Gulp. Короче говоря, imagemin сжимает изображения в заданном каталоге и достаточно умен, чтобы распознавать уже сжатые изображения. Это огромно, потому что мы можем опрометчиво сказать imagemin сжимать одну и ту же папку с изображениями сотни раз, и каждое изображение будет сжато только один раз.
В этом руководстве мы возьмем gulp-imagemin и создадим задачу для сжатия изображений в сложных структурах папок.
Использование Imagemin для сложных структур папок
Мы, вероятно, уже упоминали об этом один или два раза раньше, но этот блог является темой, работающей в стеке Призраков. Особенность Ghost (и, вероятно, любой другой платформы для ведения блогов) заключается в том, что он хранит контент в иерархии папок на основе даты. / images выглядит так:
/images ├─ /2017 │ └─ 01 │ └─ 02 │ └─ 03 │ └─ 04 │ └─ 05 │ └─ 06 │ └─ 07 │ └─ 08 │ └─ 09 │ └─ 10 │ └─ 11 │ └─ 12 └─ /2018 └─ 01 └─ 02 └─ 03 └─ 04 └─ 05 └─ 06 └─ 07 └─ 08 └─ 09 └─ 10 └─ 11
Imagemin не работает рекурсивно, поэтому нам придется обрабатывать цикл через эту файловую структуру самостоятельно.
Запуск нашего Gulpfile
Давайте начнем с изучения основных библиотек, необходимых для этого:
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
fs = require('fs'),
path = require('path');
gulp-imagemin - это основной плагин Gulp, который нам нужен для сжатия наших изображений, но на самом деле он бесполезен сам по себе - нам также нужно импортировать plugins-for-a-plugin; gulp-imagemin требует отдельного плагина для каждого типа изображения, которое нам нужно выразить.
Здесь также требуются fs и путь, которые позволят нам программно перемещаться по структурам папок.
Плагины Imagemin
Как уже упоминалось, у самого imagemin есть плагины для каждого типа изображения: требуются только те, которые, по вашему мнению, вам понадобятся:
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
imageminWebp = require('imagemin-webp'),
imageminJpegtran = require('imagemin-jpegtran'),
imageminPngquant = require('imagemin-pngquant'),
imageminGifSicle = require('imagemin-gifsicle'),
imageminOptiPng = require('imagemin-optipng'),
imageminSvgo = require('imagemin-svgo'),
fs = require('fs'),
path = require('path');
Чтобы не усложнять этот урок, мы ограничим наш вариант использования файлами JPG.
Особо следует отметить WebP: сжатие изображений следующего поколения для Интернета, которое якобы предлагает наилучшее качество изображения при наименьшем доступном размере файла.
Давайте начнем
Некоторым людям (в том числе и мне) нравится указывать пути к своим активам как одну переменную в своем Gulpfile. Это еще более актуально в случае использования Ghost, когда изображения находятся в файловой структуре, совершенно отличной от той, в которой находится наш Gulpfile.
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
imageminJpegtran = require('imagemin-jpegtran'),
fs = require('fs'),
path = require('path');
var paths = {
styles: {
src: 'src/less/*.less',
dest: 'assets/css'
},
scripts: {
src: 'src/js/*.js',
dest: 'assets/js'
},
html: {
src: 'views/*.hbs',
dest: 'assets/'
},
images: {
src: '/var/www/my-theme/content/images/2018/',
dest: '/var/www/my-theme/content/images/2018/'
}
};
Цикл по папкам
Нам нужно заглянуть в нашу папку / images, чтобы рекурсивно найти все папки, содержащие изображения. Ссылаясь на путь к изображению, который мы указали в путях, мы создадим массив целевых папок:
function image_loop() {
var folder_arr = []
fs.readdir(paths.images.src, function(err, folders) {
for(var i =0; i < folders.length; i++){
var folder_path = path.join(paths.images.src, folders[i]);
folder_arr.push(folder_path);
}
for(var i =0; i < folder_arr.length; i++) {
images(folder_arr[i]);
}
});
}
fs.readdir() - это метод, который возвращает содержимое любого каталога. Мы создадим функцию под названием image_loop, которая перебирает все папки в целевом каталоге, а затем вызовет другую функцию для сжатия содержимого:
function image_loop() { fs.readdir(paths.images.src, function(err, folders) { for(var i =0; i < folders.length; i++){ var folder_path = path.join(paths.images.src, folders[i]); images(folders[i]); } }); }Сжатие изображений в каждой папке
image_loop вызывает функцию images один раз для каждой папки для сжатия содержимого каждой папки. Вот где мы на самом деле можем использовать imagemin:
function image_loop() {
fs.readdir(paths.images.src, function(err, folders) {
for(var i =0; i < folders.length; i++){
var folder_path = path.join(paths.images.src, folders[i]);
images(folders[i]);
}
});
}
Достаточно просто, все, что мы делаем, это:
- Поиск файлов с расширением .jpg в каждой папке.
- Запуск imageminJpegtran для сжатия каждого файла JPG
- Укажите подробный, который выводит результат на консоль (например: «Минимизировано 0 изображений»).
- Запись файлов в место назначения (которое совпадает с источником, таким образом перезаписывая наши файлы)
Положил все это вместе
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
imageminJpegtran = require('imagemin-jpegtran'),
fs = require('fs'),
path = require('path');
var paths = {
styles: {
src: 'src/less/*.less',
dest: 'assets/css'
},
scripts: {
src: 'src/js/*.js',
dest: 'assets/js'
},
html: {
src: 'views/*.hbs',
dest: 'assets/'
},
images: {
src: '/var/www/my-theme/content/images/2018/',
dest: '/var/www/my-theme/content/images/2018/'
}
};
function images(folder_path) {
return gulp.src(folder_path + '/*.jpg')
.pipe(imagemin(
[imageminJpegtran({progressive: true})],
{verbose: true}
))
.pipe(gulp.dest(paths.images.dest));
}
function image_loop() {
fs.readdir(paths.images.src, function(err, folders) {
for(var i =0; i < folders.length; i++){
var folder_path = path.join(paths.images.src, folders[i]);
images(folders[i]);
}
});
}
var build = gulp.parallel(styles, scripts, image_loop);
gulp.task('default', build);
И вот оно; Gulpfile, который сжимает ваши изображения, не требуя повторного связывания.
Если вас интересует imagemin или дальнейшая оптимизация своего сайта, я настоятельно рекомендую недавно анонсированную Google бета-версию https://web.dev. Это отличный ресурс для проверки возможностей вашего сайта в скорости, поисковой оптимизации и многом другом.
Первоначально опубликовано на сайте hackersandslackers.com 19 ноября 2018 г.
