NodeJs sprity在window下使用的問題整理

原由

在最近的一次項目中，使用Ember做爲前端框架的構建。在實際使用過程當中，每每須要雪碧圖的支持，做爲技術選型，考慮了幾種：

• Compass
  由於以前項目中就有引入SASS模塊做爲css的預處理器，第一個想法就是引入compass進行做爲雪碧圖的支持，而且還能夠拓展SASS的模塊，可是考慮到目前項目的依賴已經比較大了，NodeJS各個模塊加起來也都上百M了。並且引入Compass須要對應的去安裝及設置Ruby環境。
  由於項目組內目前操做系統有Window和Linux，須要考慮到window的同志們對於Ruby環境的安裝問題，而且在安裝後還須要對應的瞭解Gem等，依賴太過於複雜。

• sprity
  某日瞎找，正好找到Nodejs下也有對象的雪碧圖生成工具，沒錯，就是上面的sprity.
  功能正好符合項目的預期，只須要在規劃的路徑內，對應的放置圖片源文件，便可自動的生成雪碧圖，和對應的CSS樣式表。特別的，sprity還能夠根據須要，作特定DPI的雪碧圖，這在移動開發下，應該挺有用的。具體請查看官網
  sprity

sprity在window下兼容問題解決

sprity千好萬好，可是在window下安裝也是個蛋疼的問題。如下是window下兼容問題的處理。
sprity所使用的圖片引擎有如下幾種

• sprity-lwip

• sprity-canvas

• sprity-gm

  在window下sprity-lwip死活安裝不成功，只得查找其餘的替代方案

  sprity-canvas在window下安裝須要gpy,python,visual studio的支持，依賴狀況更嚴重了，果斷放棄。

  sprity-gm 這個是目前找到的在window下比較容易使用的一種方案

  sprity-gm依賴於GraphicsMagick或ImageMagick.
  GraphicsMagick這個比較難安裝，略過。
  ImageMagick 這個是sprity-gm所使用的一個圖像引擎，只須要在http://www.imagemagick.org/script/binary...下載對應的應用程序，注：只須要安裝dll版本，安裝完成後，指定sprity使用引擎gm

  var platform = os.platform();
      var options = {
        src:'./sprity/**/*.{png,jpg}',
        style:'./sprity.css',
        out:'./public/assets/sprity-dist/',
        orientation:'binary-tree',
        margin:0,
        cssPath:'./',
        split: true
      };
  
      if(/win/.test(platform)){
        options.engine = 'gm';
        options['gm-use-imagemagick'] = true;
      }

  須要注意的是sprity-gm的源碼中存在一個小問題，已經有人提了一個pull-request，可是做者好像再也不維護這個庫了。。。。

具體改法見 ： https://github.com/sprity/sprity-gm/pull...改完sprity-gm的源碼後，就能夠愉快的跨平臺雪碧圖生成了。。。