Question

这是img路径结构

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

我需要的是：make gulp任务为每个文件夹制作单独的精灵，文件名：sprite- {文件夹名称} .png，sprite- {文件夹名称} .scss。 SCSS放入SCSS src文件夹，png进入build img sprite文件夹。

也许有人已经完成了这样的任务？目前，我尝试使用gulp-sprite-generator + gulp-folders个插件。如果你推荐，可以切换到另一个插件。

Answer 1

完成了这样的任务：

    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

Gulp - 按文件夹制作精灵

1 个答案: