@I_want_to_know

Gulp сборка, изображения при автоматическом переносе в dist не читабельные, как исправить?

Уважаемые знатоки, всем привет!
Суть проблемы:
Делаю сборку 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')
));

Как поправить эту проблему?
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
inkShio
@inkShio
//Таск для изображений
gulp.task('images', function(){
    return gulp
        .src('./src/img/**/*', { encoding: false })
        .pipe(imagemin({verbose: true}))
        .pipe(gulp.dest('./dist/img/'));
})

Если я правильно понял проблему
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы