雪碧图求助

[fex-team]

雪碧图求助

[oxUnd]

大概看了下，我感觉你对 FIS3 的使用理解有误。

1. 你源码只有 less 和图片
2. 你想把 less 编译后的 css 进行图片合并

记住，FIS3 只处理源码，不要试图去把 FIS3 当成一个 task 工具，第一步 less -> css，第二部 css -> 图片合并。这样的操作是有问题的。

FIS3 的构建不是 TASK 机制，一个 TASK 完了处理下一个 TASK，下一个 TASK 使用的是上一个 TASK 的输出。

FIS3 是成体系构建，你的 less 在构建完成后会自动被改成 .css 后缀，并且内部的图片全都合并了。那么你还有必要再去处理一次 css 进行合并吗？

[oxUnd]

x,y,z 其实就是 x 方向 repeat，y方向 repeat，和 z 混排。

[yolio2003]

好，不考虑名字，路径呢？
额最重要的是，
手写源文件的 css/x.css 下才正确生成 x_z.png
现在是 less/y.less 下 生成了 publish/css/y.css 但是木有 y_z.png 的雪碧图

[oxUnd]

fis.match('publish/{less/*.less,css/*.css}', {
  optimizer: fis.plugin('clean-css', {}),
  useSprite: true,
})

[yolio2003]

感谢，但是无效，难道是跟 deploy 设置有关吗？
现在所有的文件

less/g.less

slice/n个.png 雪碧图之前小图片

img/n个.png

publish/css/g.css less生成的包含了 ?__sprite

fis-conf.js:

  fis.match('less/(*.less)', {
    parser: fis.plugin('less-2.x'),
    rExt: '.css',
    release: 'css/$1',
  })

  fis.match('publish/{less/*.less,css/*.css}', {
    optimizer: fis.plugin('clean-css', {}),
    useSprite: true,
  })
  fis.match('::package', {
    spriter: fis.plugin('csssprites')
  })

[oxUnd]

match 源码

在 2015年7月9日，上午10:38，tcdona [email protected] 写道：

感谢，但是无效，难道是跟 deploy 设置有关吗？
现在所有的文件

less/g.less
slice/n个.png 雪碧图之前小图片
img/n个.png
publish/css/g.css 包含了 __sprite
fis-conf.js:
fis.match('less/(*.less)', {
parser: fis.plugin('less-2.x'),
rExt: '.css',
release: 'css/$1',
})

fis.match('publish/{less/.less,css/.css}', {
optimizer: fis.plugin('clean-css', {}),
useSprite: true,
})
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
—
Reply to this email directly or view it on GitHub.

[oxUnd]

fis.match('less/(*.less)', {
    parser: fis.plugin('less-2.x'),
    rExt: '.css',
    release: 'css/$1',
    useSprite: true
  })

  fis.match('publish/css/*.css', {
    optimizer: fis.plugin('clean-css', {}),
    useSprite: true
  })
  fis.match('::package', {
    spriter: fis.plugin('csssprites')
  })

[yolio2003]

无效

fis.match('less/(*.less)', {
  parser: fis.plugin('less-2.x'),
  rExt: '.css',
  release: 'css/$1',
  // optimizer: fis.plugin('clean-css', {}),
  useSprite: true,
})

// fis.match('publish/css/*.css', {
//   optimizer: fis.plugin('clean-css', {}),
//   useSprite: true,
// })

fis.match('::package', {
  spriter: fis.plugin('csssprites')
})


fis.match('{less/**,map.json}', {
  deploy: fis.plugin('local-deliver', {
    to: './publish',
    // url: './publish/$0',
  })
})

deploy 改为了 less/** ，可以了，现在我可以理解为：
读取 less/*.less 生成了雪碧图 publish/less/x_z.png 这里的 less 路径是不能改的对吗？
release 设置了 css/$1 并没有被雪碧图考虑

[oxUnd]

怎么说呢，deploy 跟构建无关，你应该摒弃掉它来理解构建过程。

[oxUnd]

• show me 你的文件结构
• 告诉我你最终的产出路径结构是什么

[yolio2003]

[oxUnd]

@tcdona 图破了

[yolio2003]

这是 test.zip(.png) 请手动改名。。。
雪碧图我了解的实现方式种类太多，

fis 默认的 img > publish/less
我们是slice > `publish/img```

gulp-tmtsprite 是 slice > sprite

有时候还有一个项目生成 >=2 个 no-repeat 雪碧图的需求
虽然大而全不被推荐，我觉得这里我应该是自己写插件靠谱点

[yolio2003]

源码只有 less 和图片 为了测试呀，这里没什么问题吧？

是的，我领会到了，所以去除了 match('publish/css/*css')
这里一直没发觉的是
1 雪碧图的生成路径在 publish/less，这样和 deploy 配合下才出现？
2 不能配置

[oxUnd]

雪碧图图片产出的路径是当前处理文件（less）产出的，不过呢这个我感觉可以做一下调整。比如获取处理文件的 release 进行设置。不过你可以用一个很容易的方式进行修改产出路径。

fis.match(/.*_[xyz]\.png$/, {
  release: 'image/$0'
});

为什么能实现转移呢，因为查出的图片被用作虚拟源码文件，match 又是可以作用到源码上的。

[yolio2003]

fis.match('**/(*_[xyz]).png', {
  release: 'img/$1'
})

这样子就好多了
只是我期待能有个表示虚拟文件的标准接口，
不然太黑魔法了，不靠谱的感觉，比如__cache __virtual 什么的

fis.match('__cache/(*_[xyz]).png', {
  release: 'img/$1'
})

这里依赖遗留了 deploy 的 match 中 必须写上 less/** 的问题，
我现在可以理解，但是毕竟最终是没有任何文件生成的，这里写 less/** 不好理解

本来以为是增加一个 spriterelease 配置才能比较好解决，不过总算是解决了，
希望能更多的考虑雪碧图的这些情况。