Comments (16)
大概看了下,我感觉你对 FIS3 的使用理解有误。
- 你源码只有 less 和图片
- 你想把 less 编译后的 css 进行图片合并
记住,FIS3 只处理源码,不要试图去把 FIS3 当成一个 task 工具,第一步 less -> css,第二部 css -> 图片合并。这样的操作是有问题的。
FIS3 的构建不是 TASK 机制,一个 TASK 完了处理下一个 TASK,下一个 TASK 使用的是上一个 TASK 的输出。
FIS3 是成体系构建,你的 less 在构建完成后会自动被改成 .css 后缀,并且内部的图片全都合并了。那么你还有必要再去处理一次 css 进行合并吗?
from fis3.
x,y,z 其实就是 x 方向 repeat,y方向 repeat,和 z 混排。
from fis3.
好,不考虑名字,路径呢?
额最重要的是,
手写源文件的 css/x.css
下才正确生成 x_z.png
现在是 less/y.less
下 生成了 publish/css/y.css
但是木有 y_z.png
的雪碧图
from fis3.
fis.match('publish/{less/*.less,css/*.css}', {
optimizer: fis.plugin('clean-css', {}),
useSprite: true,
})
from fis3.
感谢,但是无效,难道是跟 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')
})
from fis3.
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.
from fis3.
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')
})
from fis3.
无效
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
并没有被雪碧图考虑
from fis3.
怎么说呢,deploy 跟构建无关,你应该摒弃掉它来理解构建过程。
from fis3.
- show me 你的文件结构
- 告诉我你最终的产出路径结构是什么
from fis3.
from fis3.
@tcdona 图破了
from fis3.
这是 test.zip(.png) 请手动改名。。。
雪碧图我了解的实现方式种类太多,
fis 默认的 img
> publish/less
我们是slice
> `publish/img```
gulp-tmtsprite 是 slice
> sprite
有时候还有一个项目生成 >=2 个 no-repeat 雪碧图的需求
虽然大而全不被推荐,我觉得这里我应该是自己写插件靠谱点
from fis3.
源码只有 less 和图片 为了测试呀,这里没什么问题吧?
是的,我领会到了,所以去除了 match('publish/css/*css')
这里一直没发觉的是
1 雪碧图的生成路径在 publish/less
,这样和 deploy 配合下才出现?
2 不能配置
from fis3.
雪碧图图片产出的路径是当前处理文件(less)产出的,不过呢这个我感觉可以做一下调整。比如获取处理文件的 release 进行设置。不过你可以用一个很容易的方式进行修改产出路径。
fis.match(/.*_[xyz]\.png$/, {
release: 'image/$0'
});
为什么能实现转移呢,因为查出的图片被用作虚拟源码文件,match 又是可以作用到源码上的。
from fis3.
fis.match('**/(*_[xyz]).png', {
release: 'img/$1'
})
这样子就好多了
只是我期待能有个表示虚拟文件的标准接口,
不然太黑魔法了,不靠谱的感觉,比如__cache __virtual 什么的
fis.match('__cache/(*_[xyz]).png', {
release: 'img/$1'
})
这里依赖遗留了 deploy 的 match 中 必须写上 less/**
的问题,
我现在可以理解,但是毕竟最终是没有任何文件生成的,这里写 less/**
不好理解
本来以为是增加一个 spriterelease 配置才能比较好解决,不过总算是解决了,
希望能更多的考虑雪碧图的这些情况。
from fis3.
Related Issues (20)
- 推代码时发邮件认证,未收到验证码,但提示已发送 HOT 1
- Error: write EPIPE 频繁出现的问题 HOT 2
- 自定义组件库引入后依赖的less文件找不到
- 就告诉我作者是不是跑路了? HOT 2
- fis.match不能调用parser自定义方法
- _handle.Pngquant is not a constructor HOT 3
- fis3中cache.jsbug HOT 2
- 麻烦给个支持node版本说明 HOT 6
- optimizer.png-compressor: _handle.Pngcrush is not a constructor是什么意思 HOT 2
- fis3能不能集成rollup HOT 1
- fs3 [ v3.4.45 ] node [ v14.16.0 ] 执行 fis3 release -d ../dist 抛出异常 The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined HOT 2
- 启用了loader插件报message.content.replace is not a function
- fis3-deploy-http-push 的问题 HOT 1
- fis3依赖fis3-deploy-http-push2.0.6,fis3-deploy-http-push2.0.6依赖winston2.1.1,当我升级node版本到14,vue项目编译时报错(node:31521) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency HOT 3
- Update packages to avoid introducing vulnerablities HOT 2
- Trying to get in touch regarding a security issue
- 似乎在mac12.1系统版本里面热更新不生效了 HOT 3
- 在mock/server.conf下配置proxy时,如何替换/删除uri的前缀?
- 增加nodejs 14+支持 HOT 4
- react-router-dom的BrowserRouter,fis-conf该怎么配置才能解决再次刷新页面会显示404这个问题 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fis3.