使用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需要这样。

posted @ 2015-11-30 11:23  change always  阅读(359)  评论(1编辑  收藏  举报