在本文中,苏南大叔描述fis3css文件的处理,不局限于css文件,也包括less/scss/sass之类的编译过程。目前,fis3css的处理,有两个:第一个是clean-css,第二个是cssspriter。前者功能是常规的css清理,后者功能就是常说的css精灵功能。

下面分情况具体阐述fis3如何对css文件进行处理。

苏南大叔:fis3配置之css文件处理方案:clean-css和cssspriter - fis3-config-css
fis3配置之css文件处理方案:clean-css和cssspriter(图2-1)

clean-css

clean-cssfis3插件的地址是:

修改fis-config.js,内容如下:

fis.match('*.css', {
  optimizer: fis.plugin('clean-css')
});

当然,这个clean-css也是有option的。不过,应该不会有啥需要更改的,所以,也基本上可能用不到更改clean-css的选项。如果您需要修改相关选项,您可以到下面的这个链接上查看相关clean-css的可选项。

clean-css的选项设置方式如下(可以放到fis-config.js文件内即可):

fis.config.set('settings.optimizer.clean-css', {
    'keepBreaks': true
});
fis.match('*.{scss,sass,less,css}', {
    optimizer: fis.plugin('clean-css',{
        //option
    })
})

结论

fis3对css的处理,这样普通的设置好cssspriterclean-css之后,就可以使用了。当然,关于这里的css图片精灵功能,可以展开讨论的话题,还是非常多的。敬请期待苏南大叔的后续文章。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   百度    fis3

本站的忠实读者小伙伴,正在阅读下面这些文章: