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