Поддерживаемые форматы:
- jpg
- png
- gif
- svg
Перед использованием необходимо установить node-js
Откройте папку OPTIMG в консоле и запустите:
$ npm installПосле окончания следуйте инструкции ниже начиная с пункта 5
Если gulp уже установлен то необходимо удалить, npm rm --global gulp
что бы избежать конфликты с gulp-cli.
$ npm install --global gulp-cli$ npm init$ npm install --save-dev gulp gulp-imagemin imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo gulp-loggervar gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var optipng = require('imagemin-optipng');
var jpegtran = require('imagemin-jpegtran');
var gifsicle = require('imagemin-gifsicle');
var svgo = require('imagemin-svgo');
var logger = require('gulp-logger');
gulp.task('default', () =>
gulp.src('src/images/**/*')
.pipe(logger({
before: 'Стартуем OPTIMG!',
after: 'OPTIMG завершен!',
// extname: '.js.gz',
showChange: true
}))
.pipe(imagemin({ progressive: true }, [
imagemin.gifsicle(),
imagemin.jpegtran(),
imagemin.optipng(),
imagemin.svgo()
]))
.pipe(gulp.dest('dist/images'))
);5. Создайте папку src и поместите в нее ваши картинки. Помещать можно папкой с поддиректориями и сторонними файлами(не картинками, в таком случае они будут перезалиты без изменений).
$ gulpПосле окончания задачи, результаты будут скопированы в папку dist полностью повторяя структуру исходной папки с картинками.
Можно запустить другую задачу с другими картинками, для этого надо почистить папки dist и src, залить необходимые файлы картинок для оптимизации в папку src и повторить команду gulp
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent