Уважаемые знатоки, всем привет!
Суть проблемы:
Делаю сборку gulp, и столкнулся с такой ситуацией, когда при переносе из src/img (изображения открываются без проблем) в dist/img изображения переносятся, но становятся нечитабельными. Расширение изображений не меняется (но вес увеличивается).
Что делал:
Напрямую переносил из src/img в dist/img (копированием и вставкой с заменой файлов) всё сработало, при перезапуске gulp опять нечитаемые изображения.
Содержимое gulp.js:
const gulp = require('gulp');
const fileInclude = require('gulp-file-include');
const sass = require('gulp-sass')(require('sass'));
const server = require('gulp-server-livereload');
const clean = require('gulp-clean');
const fs = require('fs');
const sourceMaps = require('gulp-sourcemaps');
//const groupMedia = require('gulp-group-css-media-queries'); // Нарушает работу sourcemaps на время разработки стоит отключать. Плагин группирует медиа запросы
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const webpack = require('webpack-stream');
const babel = require('gulp-babel');
const imagemin = require('gulp-imagemin');
//const cssLoader = require('css-loader');
//const styleLoader = require('style-loader');
//-----------------------
// Функция вывода ошибок универсальная для всех
const plumberNotify = (title) => {
return {
errorHandler: notify.onError({
title: title,
message: 'Error <%= error.message %>',
sound: false
}),
};
}
//--------------------
// Сами таски
// Удаление папки dist
gulp.task('clean', function(done){
if (fs.existsSync('./dist/')){
return gulp.src('./dist/', {read: false})
.pipe(clean({force: true}));
}
done();
})
//--------------------
// собираем HTML
// Настройка самого таска
const fileIncludeSetting = {
prefix: '@@',
basepath: '@file',
};
gulp.task('html', function(){
return gulp
.src('./src/*.html')
.pipe(plumber(plumberNotify('HTML')))
.pipe(fileInclude(fileIncludeSetting))
.pipe(gulp.dest('./dist/'));
});
//-----------------------
// Компиляция стилей
// настройка самого таска
gulp.task('sass', function(){
return gulp.src('./src/scss/*.scss')
.pipe(plumber(plumberNotify('SCSS')))
.pipe(sourceMaps.init())
.pipe(sass())
//.pipe(groupMedia())
.pipe(sourceMaps.write())
.pipe(gulp.dest('./dist/css'))
})
//------------------------
//Таск для изображений
gulp.task('images', function(){
return gulp
.src('./src/img/**/*')
.pipe(imagemin({verbose: true}))
.pipe(gulp.dest('./dist/img/'));
})
//-----------------------
//Таск для Шрифты
gulp.task('fonts', function(){
return gulp.src('./src/fonts/**/*')
.pipe(gulp.dest('./dist/fonts/'))
})
//-----------------------
//Таск для Файлы
gulp.task('files', function(){
return gulp.src('./src/files/**/*')
.pipe(gulp.dest('./dist/files/'))
})
//-------------------------
// JS Вебпак Лоадер настройка
gulp.task('js', function(){
return gulp.src('./src/js/*.js')
.pipe(plumber(plumberNotify('JS')))
.pipe(babel())
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('./dist/js'))
})
//-------------------------
// Таск для сервера
const serverOptions = {
livereload: true,
open: true
}
gulp.task('server', function(){
return gulp.src('./dist/')
.pipe(server(serverOptions))
})
//-------------------------
// Слежение Watch
gulp.task('watch', function(){
gulp.watch('./src/scss/**/*.scss', gulp.parallel('sass'));
gulp.watch('./src/**/*.html', gulp.parallel('html'));
gulp.watch('./src/img/**/*', gulp.parallel('images'));
gulp.watch('./src/fonts/**/*', gulp.parallel('fonts'));
gulp.watch('./src/files/**/*', gulp.parallel('files'));
gulp.watch('./src/js/**/*', gulp.parallel('js'));
})
//------------------------
//Запускаем всю сборку
gulp.task('default', gulp.series(
'clean',
gulp.parallel('html', 'sass', 'images', 'fonts', 'files', 'js'),
gulp.parallel('server', 'watch')
));
Как поправить эту проблему?