zoukankan      html  css  js  c++  java
  • 使用gulp-compass时,指定relative_assets无效

    结语:

      使用gulp-compass时,需要指定 relative:false ,绝对定位 ( 如http_images_path参数 ) 才有效,代码:

    gulp.task('compass', function() {
        gulp.src('sass/{,*/}*.scss')
            .pipe(compass({
                config_file: './config.rb',
                css: '../css.release/touch',
                sass: 'sass',
                relative:false
            })).pipe(reload({
                stream: true
            }));
    });

    故事前景:

      之前在项目当中使用的是Grunt构建的项目,但在compass + bowser-sync结合使用时,刷新的速度实在太慢,达到 2.0+s 以上,所以就改阵营到Gulp了。

      调换Gulp时,测试重新生成CSS文件,但看不见界面的图标,查看源文件时图片都显示的是相对定位。它长这样:  

    .icon-clock{
        background: url('../../index.png') no-repeat;
    }

      图片地址不对,所以显示不出来。

      这不是我想要的,我想要它这样:

    .icon-clock{
        background: url('http://www.sucool.com/index.png') no-repeat;
    }

      源码使用了compass的img-url,这样我可以随意更改图片的位置,比如更改域名了呀什么的:

    .icon-clock{
        background: image-url('index.png') no-repeat;
    }

    思考历程:

        1.我已经指定了config.rb文件的,http_images_path参数;

        2.设定relative_assets=false,还是没有作用;

        3.再在gulp配置的地方,添加相关的参数 relative ,OK。

    end: 在grunt-compass中,只要config.rb文件中指定了 http-images-path参数,生成的css中的图片地址就会是绝对定位的,不料想gulp-compass需要这样。

  • 相关阅读:
    性能测试分析
    常见的性能缺陷
    性能测试中TPS上不去的几种原因浅析
    Linux新增和删除环境变量
    JProfiler的详细使用介绍
    详解Tomcat的连接数和线程池
    造数据存储过程
    shell脚本解压多个jar包
    使用shell快速建立上万个文件夹
    df、du命令
  • 原文地址:https://www.cnblogs.com/hhyaner/p/5006687.html
Copyright © 2011-2022 走看看