Gulp 循环以按文件夹生成精灵

Question

我是 Gulp 新手，经过多次研究后，我没有找到解决问题的方法。我的目标是通过文件夹生成精灵，精灵的名称将是文件夹的名称。

文件夹结构为：

-assets
   -images
      -icon
          -image-1.png
          -image-2.png
          -image-3.png
          -image-4.png
          -image-5.png
      -header
          -image-1.png
          -image-2.png
          -image-3.png
          -image-4.png
          -image-5.png
      -etc...

而且我希望在另一个文件夹子资产中有一个按文件夹排列的精灵：

-subassets
   -images
      - sprite-icon.png
      - sprite-header.png

感谢您的帮助

Answer 1

使用gulp-folders包，你可以做到，例如：

gulp.task('sprites', folder('assets/images', function (folder) {
    // your gulp task to create sprites...
    return gulp.src([
        path.join('assets/images', folder, '*.png')
        ], {
           base: './'
        })
        // sprite creation plugin stuff goes here...
        .pipe(gulp.dest('subassets/images/sprite-' + folder + '.png'));
}));

Gulp 循环以按文件夹生成精灵

Gulp loops for generate sprite by folder

css-sprites

gulp