@dragonesis

Как решить проблему Gulp с переносом и оптимизацией изображений?

Приветствую. Уже давно существует проблема у меня в сборщике, связанная с изображениями. При достижении определенного количества их в проекте перестает перекладывать из папки папку новые. Иногда люто подвисает на оптимизации. Отключение оптимизатора не решает проблему
Код таска
gulp.task('image:build', function () {
    for (var i = 0; i < typeProject; i++) {
        gulp.src(path.src.media)
        // .pipe(imagemin({
        //     progressive: true,
        //     svgoPlugins: [{removeViewBox: false}],
        //     use: [pngquant()],
        //     interlaced: true
        // }))
        .pipe(gulp.dest(path.build.media[i]))
        .pipe(reload({stream: true}));
    }
});

Код gulpfile.js
'use strict';

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    cssmin = require('gulp-clean-css'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    rimraf = require('rimraf'),
    rename = require('gulp-rename'),
    order = require('gulp-order'),
    concat = require('gulp-concat'),
    browserSync = require('browser-sync'),
    plumber = require('gulp-plumber'),
    include = require('gulp-include'),
    gcmq = require('gulp-group-css-media-queries'),
    svgstore = require('gulp-svgstore'),
    inlinesource = require('gulp-inline-source'),
    svgmin = require('gulp-svgmin'),
    pathFnc = require('path'),
    rev = require('gulp-rev-append'),
    babel = require('gulp-babel'),
    reload = browserSync.reload;

var typeProject = 1; //  1 - only create folder 'build', create folders 'build' and 'public' (public - default name)
var prodactionFolder = 'public';
var path = {

    build: {
        html: 'build/',
        js: ['build/js/', '../'+prodactionFolder+'/js/'],
        json: ['build/json/', '../'+prodactionFolder+'/json/'],
        css: ['build/css/', '../'+prodactionFolder+'/css/'],
        media: ['build/img/', '../'+prodactionFolder+'/media/'],
        fonts: ['build/fonts/', '../'+prodactionFolder+'/fonts/'],
        inlineStyle: 'src/html/templates/parts/',
    },
    src: {
        html: 'src/html/*.html',
        jsManual: 'src/js/parts/[^_]*.js',
        jsLibs: 'src/js/libs/*.js',
        json: 'src/json/**/*.json',
        style: 'src/style/**/*.scss',
        inlineStyle: 'src/inline/**/*.scss',
        media: 'src/media/**/*.*',
        svgIcons: 'src/media/sprite/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    watch: {
        html: 'src/**/*.html',
        js: 'src/js/**/*.js',
        json: 'src/json/**/*.json',
        style: 'src/style/**/*.scss',
        inlineStyle: 'src/inline/**/*.scss',
        media: 'src/media/**/*.*',
        svgIcons: 'src/media/sprite/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    clean: './build'
};

var config = {
    server: {
        baseDir: './build'
    },
    // tunnel: true,
    tunnel: false,
    host: 'localhost',
    port: 9000,
    logPrefix: 'NameProject'
};


gulp.task('webserver', function () {
    browserSync(config);
});

gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

gulp.task('html:build', function () {
    gulp.src(path.src.html)
    .pipe(include())
    .pipe(rev())
    .pipe(gulp.dest(path.build.html))
    .pipe(reload({stream: true}));
});

gulp.task('js:build', function () {
    for (var i = 0; i < typeProject; i++) {
        gulp.src(path.src.jsManual)
        .pipe(plumber())
        .pipe(include())
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest(path.build.js[i]))
        .pipe(uglify())
        .pipe(rename('scripts.min.js'))
        .pipe(gulp.dest(path.build.js[i]))
        .pipe(reload({stream: true}))

        gulp.src(path.src.jsLibs)
        .pipe(plumber())
        .pipe(concat('libs.js'))
        .pipe(gulp.dest(path.build.js[i]))
        .pipe(uglify())
        .pipe(rename('libs.min.js'))
        .pipe(gulp.dest(path.build.js[i]));
    }

});

gulp.task('json:build', function() {
    for (var i = 0; i < typeProject; i++) {
        gulp.src(path.src.json)
        .pipe(gulp.dest(path.build.json[i]))
        .pipe(reload({stream: true}))
    }
});

gulp.task('style:build', function () {
    for (var i = 0; i < typeProject; i++) {
        gulp.src([path.src.style, '!'+path.src.style+'/inline/**/*.scss'])
        .pipe(plumber())
        .pipe(order([
            'base/_setting.scss',
            'base/_mixin.scss',
            'base/normalize.scss',
            'vendors/**/*.scss',
            'ui/**/*.scss',
            'layout/**/*.scss',
            'page/**/*.scss'
        ]))
        .pipe(sourcemaps.init())
        .pipe(concat('style.scss'))
        .pipe(sass({
            includePaths: ['src/style/style.scss'],
            outputStyle: 'expanded',
            sourceMap: false,
            errLogToConsole: true
        }))
        .pipe(prefixer({browsers: ['last 16 versions']}))
        .pipe(gcmq())
        .pipe(gulp.dest(path.build.css[i]))
        .pipe(reload({stream: true}))
        .pipe(cssmin())
        .pipe(rename('style.min.css'))
        .pipe(gulp.dest(path.build.css[i]));
    }
});

gulp.task('inline-css:build', function () {
	gulp.src(path.src.inlineStyle)
	.pipe(plumber())
	.pipe(concat('inline.scss'))
	.pipe(sass({
		includePaths: ['style/inline.scss'],
		outputStyle: 'compact',
		sourceMap: false,
		errLogToConsole: true
	}))
	.pipe(prefixer({browsers: ['last 16 versions']}))
	.pipe(gcmq())
	.pipe(cssmin())
	.pipe(rename('inline.html'))
	.pipe(gulp.dest(path.build.inlineStyle))
	.pipe(reload({stream: true}));
});

gulp.task('svg:build', function () {
    for (var i = 0; i < typeProject; i++) {
        return gulp.src(path.src.svgIcons)
        .pipe(svgmin(function (file) {
            var prefix = pathFnc.basename(file.relative, pathFnc.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '-',
                        minify: true
                    }
                }]
            }
        }))
        .pipe(rename({prefix: 'icon-'}))
        .pipe(svgstore())
        // .pipe(rename('sprite.html'))
        .pipe(gulp.dest(path.build.media[i]))
        .pipe(reload({stream: true}));
    }
});

gulp.task('image:build', function () {
    for (var i = 0; i < typeProject; i++) {
        gulp.src(path.src.media)
        // .pipe(imagemin({
        //     progressive: true,
        //     svgoPlugins: [{removeViewBox: false}],
        //     use: [pngquant()],
        //     interlaced: true
        // }))
        .pipe(gulp.dest(path.build.media[i]))
        .pipe(reload({stream: true}));
    }
});

gulp.task('fonts:build', function() {
    for (var i = 0; i < typeProject; i++) {
        gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts[i]))
        .pipe(reload({stream: true}))
    }
});

gulp.task('build', [
    'image:build',
    'svg:build',
    'js:build',
    'json:build',
    'style:build',
    'inline-css:build',
    'fonts:build',
    'html:build',
]);

gulp.task('watch', function(){
    watch([path.watch.media], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.style], function(event, cb) {
        setTimeout(function () {
            gulp.start('style:build');
        }, 1000);
    });
    watch([path.watch.inlineStyle], function(event, cb) {
		setTimeout(function () {
			gulp.start('inline-css:build');
		}, 1000);
	});
    watch([path.watch.js], function(event, cb) {
        setTimeout(function () {
            gulp.start('js:build');
        }, 1000);
    });
    watch([path.watch.svgIcons], function(event, cb) {
        setTimeout(function () {
            gulp.start('svg:build');
        }, 1000);
    });
    watch([path.watch.json], function(event, cb) {
        setTimeout(function () {
            gulp.start('json:build');
        }, 1000);
    });
    watch([path.watch.html], function(event, cb) {
            gulp.start('html:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        setTimeout(function () {
            gulp.start('fonts:build');
        }, 1000);
    });
});

gulp.task('default', ['build', 'webserver', 'watch']);
gulp.task('prod', ['clean', 'build', 'watch']);

  • Вопрос задан
  • 171 просмотр
Пригласить эксперта
Ваш ответ на вопрос

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

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