咕嘟咕嘟的文件夹

问题描述：

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

我需要做什么精灵 - {文件夹名称} .scss。 SCSS放入SCSS src文件夹中，png放入build img sprite文件夹。

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

答

这样的任务完成：

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); 

}));

插件：路径，gulp.spritesmith，合并流，imagemin，imagemin-pngquant

咕嘟咕嘟的文件夹

相关推荐