laoshu133 / gulp-css-spritesmith Goto Github PK

[email protected]: pngjs2 has now taken over the original pngjs package on npm. Please change to use pngjs dependency, version 2+.

是否可以添加一个标识来按需合并图片，没有添加标识的不合并，例如以下：
background: url("css/index.png?__sprite");

最后，感谢您的插件！

/* 自动 sprite /
gulp.task('sprite', function() {
gulp.src('build/css/.min.css')
.pipe(cssSprite({
imagepath: './images/sprite',
imagepath_map: null,
spritedest: './images/sprite',
spritepath: '../images/',
padding: 0,
useimageset: false,
newsprite: false,
spritestamp: true,
cssstamp: true
}))
.pipe(gulp.dest('./'))
.pipe(notify({message: '雪碧图生成完成.'}));
});

配置如上，就是gulp.src()方法里面这样配置多级目录不会成功。如果把这个目录换成 gulp.src(sass/*/.scss) 就会有效果，感觉很奇怪，目录是没配错误的呀～

因为我的需求是

sass -> 编译并压缩 -> build/css/**.min.css

gulp工具生成后的结果我认为是生产环境，所以 autosprite是在sass编译完成后的css文件。请问有朋友遇到过？

问题是这样的，现在我的项目想要按以下的目录结构进行重构，其中每个目录代表一个网页：

└─ src/
    ├─ index/
         ├─ img/
             └─ sprite
                 ├─ 1.png
                 └─ 2.png
         ├─ index.html
         └─ index.css
    └─ other/
         ├─ img/
             └─ sprite
                 ├─ 3.png
                 └─ 4.png
         ├─ other.html
         └─ other.css

其中我用到了 gulp-css-spritesmith 是这样的：

gulp.task('autoSprite', function() {
  return gulp.src(config.tmp + '*/*.css')
    .pipe(plugins.cssSpritesmith({
      imagepath: config.tmp + '*/img/sprite',
      spritedest: config.tmp + '*/img',
      spritepath: 'img/sprite',
      padding: 2
    }))
    .pipe(gulp.dest('./'));
});

但是其中的 imagepath 和 spritedest 是不识别 * 的，而我的页面可能随时增加（即增加一个目录），请问要如何解决这个问题？

这边没有生成@2x图是什么原因呢

只有style.png 没有 [email protected]
1倍图的时候没关系

2倍图的时候找不到图片 导致页面显示空白

gulp.task('moveFile',function(){

    gulp.src('./public/css/*')
        .pipe(gulp.dest('./output/css/'));

    gulp.src('./public/imgs/*/*')
        .pipe(gulp.dest('./output/imgs/'));


})

gulp.task('build',['moveFile'],function(){
    gulp.src('./output/css/*.css')
        .pipe(plugins.cssSpritesmith({
            imagepath: './output/imgs/slice/',
            spritedest: './output/imgs/sprite/',
            spritepath: '../imgs/sprite/'
        }))
        .pipe(gulp.dest('./'));
});

首次执行gulp build无法生成雪碧图

问题重现代码

css写了图片路径的，为什么还要指定这个参数？