0

Добрый день.

Структура папки изображения:

img
|-sprites
  |- sprite 1 folder
  |- sprite 2 folder

Задача: сделать task для gulp чтобы брать изображения из каждой папки спрайта и на каждую папку создавать отдельный файл sprite-{foldare name}.png, sprite-{foldare name}.scss.

Может быть у кого-то уже есть готовая задача и он готов поделиться, можно на базе других gulp плагинов.

1 ответ 1

0

Закончил с таким решением:

    gulp.task(
    'sprites', folders(path.src.sprites, function (folder) {
        // Generate our spritesheet
       var spriteData = gulp.src(npmpath.join(path.src.sprites, folder, '*.png'))
           .pipe(spritesmith({
                imgName: 'sprite_' + folder + '.png',
                cssName: 'sprite_' + folder + '.scss'
            }));

        // Pipe image stream through image optimizer and onto disk
        var imgStream = spriteData.img
            .pipe(imagemin({
                progressive: true,
                interlaced: true,
                optimizationLevel: 7,
                svgoPlugins: [{removeViewBox: false}, {removeUselessStrokeAndFill: false}],
                use: [pngquant({quality: '65-80', speed: 4})]
            }))
            .pipe(gulp.dest(path.build.sprites))
            .pipe(notify({message: 'SPRITE IMG task complete', onLast: true}));
        // Pipe CSS stream through CSS optimizer and onto disk
        var cssStream = spriteData.css
            .pipe(gulp.dest(path.src.sassFolder + 'module/sprites'))
            .pipe(notify({message: 'SPRITE SCSS task complete', onLast: true}));

        // Return a merged stream to handle both `end` events
        return merge(imgStream, cssStream);

}));

плагины: path, gulp.spritesmith, merge-stream, imagemin, imagemin-pngquant

4
  • А код функции folders можно увидеть?
    – pepel_xD
    16 апр 2017 в 7:28
  • это node package 17 апр 2017 в 8:24
  • не совсем понял о чем вы. Несколько дней уже бьюсь над подобной задачей
    – pepel_xD
    17 апр 2017 в 12:34
  • А все дошло, но вот печалька gulp-folders не понимает glob шаблонов..... Уже несколько дней бьюсь над тем, что-бы вытащить попавший в gulp.src путь......
    – pepel_xD
    17 апр 2017 в 14:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.