weixin_39883065
2021-01-08 01:13 阅读 2

sprite编译后不生效

运行pure release 发送到服务器,编译成的CSS 是OK的, 但是运行pure release -pmod ../out 到同级out目录下,CSS里面的sprite图片路径没有替换,还是合并前的小图片。

请问是BUG还是我配置问题?

配置文件如下:

 javascript
//设置需要自动打包的文件
fis.config.set('pack', {
    'app_js/im/v1/lib.js': [
        '/app_js/im/v1/**.js'
    ],
    'app_css/im/v1/lib.css': [
        '/app_css/im/v1/**.less'
    ]
});


fis.config.merge({
    roadmap : {
        ext : {
            //less后缀的文件将输出为css后缀
            //并且在parser之后的其他处理流程中被当做css文件处理
            less : 'css',
            //md后缀的文件将输出为html文件
            md : 'html'
            //并且在parser之后的其他处理流程中被当做html文件处理
        },
        domain : {
            //所有css文件添加http://localhost:8080作为域名
            '**.css' : 'http://css2.pingan.com',
            '**.less': 'http://css2.pingan.com',
            '**.scss': 'http://css2.pingan.com',
            '**.js'  : 'http://script2.pingan.com',
            '**.jpg' : 'http://img2.pingan.com',
            '**.gif' : 'http://img2.pingan.com',
            '**.png' : 'http://img2.pingan.com'
        },
        path : [
            {
                //所有的js文件
                //reg : '/app_css/im/v1/**.png',
                //发布到/static/js/xxx目录下
                //release : '/app_img/im/v1$&'
            }
        ]
    }
});

//如果要兼容低版本ie显示透明png图片,请使用pngquant作为图片压缩器,
//否则png图片透明部分在ie下会显示灰色背景
//使用spmx release命令时,添加--optimize或-o参数即可生效
fis.config.set('settings.optimzier.png-compressor.type', 'pngquant');

//设置jshint插件要排除检查的文件,默认不检查lib、jquery、backbone、underscore等文件
//使用pure release命令时,添加--lint或-l参数即可生效
fis.config.set('settings.lint.jshint.ignored', [ 'g/**', /jquery|backbone|underscore/i ]);
//单文件编译过程中的代码检查插件。
fis.config.set('modules.lint.js', 'jshint');
//单文件编译过程中的自动测试插件。
fis.config.set('modules.test.js', 'phantomjs');

//开始autoCombine可以将零散资源进行自动打包
fis.config.set('settings.postpackager.simple.autoCombine', true);
//开启autoReflow使得在关闭autoCombine的情况下,依然会优化脚本与样式资源引用位置
fis.config.set('settings.postpackager.simple.autoReflow', true);

//配置FIS中使用csssprites
fis.config.set('modules.spriter', 'csssprites');

//为所有样式资源开启csssprites
fis.config.set('roadmap.path', [{
    reg: '**.css',
    useSprite: true
}]);

//如果想配置html中的css片段进行csssprites处理,可以像下面这样配置
fis.config.set('settings.spriter.csssprites', {
    //开启模板内联css处理,默认关闭
    htmlUseSprite: true,
    //默认针对html原生<style></style>标签内的内容处理。
    //用户可以通过配置styleTag来扩展要识别的css片段
    //以下是默认<style></style>标签的匹配正则
    styleReg: /(<style>|>))([\s\S]*?)(<\/style\s*>|$)/ig

    //**styleReg规则**
    //1. 默认不配置styleReg,仅支持html中默认style标签中的css内容
    //2. 配置styleReg时候,仅支持styleReg匹配到的内容。
    //3. styleReg正则必须捕获三个分组,
    //     $1为:开始标签(start tag),
    //     $2为:内容(content) ,
    //     $3为:结束标签(end tag)
});

//设置csssprites的合并间距和排列方式,线性排列的layout参数是linear
fis.config.set('settings.spriter.csssprites', {
    //图之间的边距
    margin: 10,
    //使用矩阵排列方式,默认为线性`linear`
    layout: 'matrix'
});


//项目排除掉_xxx.scss,这些属于框架文件,不用关心
fis.config.set('project.exclude', '**/_*.scss');
fis.config.set('project.exclude', '**/_*.less');
fis.config.set('project.exclude', '/tpl/*.*');


//fis.config.set('project.exclude', '**/g/*.*');
//scss后缀的文件,用fis-parser-sass插件编译
//fis.config.set('modules.parser.scss', 'sass');
//scss文件产出为css文件
//fis.config.set('roadmap.ext.scss', 'css');

该提问来源于开源项目:fex-team/fis

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

6条回答 默认 最新

  • weixin_39594296 weixin_39594296 2021-01-08 01:13

    有三个问题: - 合并的图片路径后面必须加query__sprite满足否? - CssSprite会对合并的css文件进行合并图片处理,合并后的v1/lib.css里的路径是否被替换了? - 对单个css文件进行图片合并,你配置的roadmap.path是可能有问题的,看你使用的是less文件,那么reg应该为**.less,是否是这样?

    点赞 评论 复制链接分享
  • weixin_39883065 weixin_39883065 2021-01-08 01:13

    问题1满足, 问题2 :lib.css里面的图片处理后图片URL没有被替换 问题3:改了好像也没用,不知道改错了没有。

     javascript
    fis.config.merge({
        roadmap : {
            path : [
                {
                    //所有的PNG文件
                    reg : '**.less',
                    //发布到/static/js/xxx目录下
                    //release : '/app_img/im/v1/$&'
                }
            ],
            ext : {
                //less后缀的文件将输出为css后缀
                //并且在parser之后的其他处理流程中被当做css文件处理
                less : 'css',
                //md后缀的文件将输出为html文件
                md : 'html'
                //并且在parser之后的其他处理流程中被当做html文件处理
            },
            domain : {
                //所有css文件添加http://localhost:8080作为域名
                '**.css' : 'http://css2.pingan.com',
                '**.less': 'http://css2.pingan.com',
                '**.scss': 'http://css2.pingan.com',
                '**.js'  : 'http://script2.pingan.com',
                '**.jpg' : 'http://img2.pingan.com',
                '**.gif' : 'http://img2.pingan.com',
                '**.png' : 'http://img2.pingan.com'
            }
        }
    });
    

    我尝试 pure release -pmo 是没问题的, 但是我尝试发布到文件夹就有问题了,CSS文件没合并,sprite也不生效: pure release -pmod ../out

    点赞 评论 复制链接分享
  • weixin_39883065 weixin_39883065 2021-01-08 01:13

    重新测了,现在好了。奇怪的问题。

    点赞 评论 复制链接分享
  • weixin_39631755 weixin_39631755 2021-01-08 01:13

    我也试过类似问题,应该是fis-conf.js前面设置了roadmap.path,被后面的覆盖掉了,写到一起就没问题了。

    点赞 评论 复制链接分享
  • weixin_39594296 weixin_39594296 2021-01-08 01:13

    merge确实有这个问题,近期修正这块的功能。

    点赞 评论 复制链接分享
  • weixin_39838798 weixin_39838798 2021-01-08 01:13

    fis-conf.js 加入:

    
    //开启simple对零散资源的自动合并
    fis.config.set('settings.postpackager.simple.autoCombine', true);
    
    //css spirit
    fis.config.get('roadmap.path').unshift({
        reg: '**.less',
        useSprite: true
    });
    
    点赞 评论 复制链接分享

相关推荐