2013-05-08 66 views
0

喲。指南針精靈,Yeoman,Grunt和圖像參考不會很好地結合在一起

我在我的web應用程序的簡單spriteSet:

@import "icons/*.png"; 
@include all-icons-sprites; 

咕嚕聲或指南針沒有任何問題產生拼合後的圖片,在我的圖片文件夾,這是我的配置自耕農項目(更多specifically- YO內的。新的)

現在圖像已經很好地生成了,但是在我的css輸出文件中引用它是錯誤的。他在搜索我的應用程序文件夾中,像domain.com\app\images\

我用Google搜索,發現grunt-contrib-compass提供API許多圖像的URL,像[httpGeneratedImagesPath][1],但這些不`噸似乎出現在我的約曼項目中,他們粉碎了下去,如果我將它們放在GruntFile.js中。

之前有人遇到過這個問題嗎?

謝謝。

回答

1

鏈接:https://github.com/yeoman/yeoman/issues/419

主題解決。這裏是爲我工作了修改:

Gruntfile.js

compass: { 
     options: { 
      ... 
      config: '.compass.rb' //reference for full compass options list 
     } 
    } 

.compass.rb

images_dir = '/app/images' 
generated_images_dir = '/images' 
+0

其實它並沒有工作。 Compass在構建時丟失了圖像參考。圖像已生成,但輸出的CSS中的img url是錯誤的。無法解決此問題 – neoswf 2013-07-26 15:04:40

2
+0

謝謝@escapedcat。但即使Compass Sprites很糟糕,你仍然知道。它產生的代碼如此之大而且醜陋,它僅僅適用於巨型系統的情況。不適合定製的應用程序。 – neoswf 2013-09-10 14:24:45

+0

我傾向於只使用SVG和網頁字體。我儘量避免一般的圖像。特別是當使用x2圖像時,整個spriting的東西不再那麼好用了。 – escapedcat 2013-09-11 10:33:24

+0

我想你沒有這樣一個巨大的項目,如果你所有的圖像(BG等)是webfonts&svgs – neoswf 2013-09-11 13:54:00