星期六, 8月 30, 2014

[Gulp 問題] Task ‘fonts’ with package ‘gulp-bower-files’ miss some .eot,svg,ttf,woff files

gulp build 時,task ‘fonts’ 應該會透過 package ‘gulp-bower-files’ 的指令 bowerFiles 掃描所有 bower_components 下所有的檔案,並把附檔名為 **/*.{eot,svg,ttf,woff} 的檔案全都複製到 dist/fonts 下才對。但不知道為什麼只有 copy 了 bootstrap-sass-official 下的,卻漏掉 components-font-awesome 下的,造成錯誤。

參考文件: https://github.com/yeoman/generator-gulp-webapp/issues/71#issuecomment-40327323

實際上 bowerFiles 不是掃描所有檔案,而是掃描各個 package 的 bower.json 中的 main objects,例如:
{
  "name": "bootstrap-sass",
  "version": "3.1.1",
  "homepage": "https://github.com/twbs/bootstrap-sass",
  "authors": [
    "Thomas McDonald",
    "Tristan Harward",
    "Peter Gumeson",
    "Gleb Mazovetskiy"
  ],
  "description": "bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.",
  "main": [
    "vendor/assets/stylesheets/bootstrap.scss",
    "vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
    "vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
    "vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
    "vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
    "vendor/assets/javascripts/bootstrap/affix.js",
    "vendor/assets/javascripts/bootstrap/alert.js",
    "vendor/assets/javascripts/bootstrap/button.js",
    "vendor/assets/javascripts/bootstrap/carousel.js",
    "vendor/assets/javascripts/bootstrap/collapse.js",
    "vendor/assets/javascripts/bootstrap/dropdown.js",
    "vendor/assets/javascripts/bootstrap/tab.js",
    "vendor/assets/javascripts/bootstrap/transition.js",
    "vendor/assets/javascripts/bootstrap/scrollspy.js",
    "vendor/assets/javascripts/bootstrap/modal.js",
    "vendor/assets/javascripts/bootstrap/tooltip.js",
    "vendor/assets/javascripts/bootstrap/popover.js"
  ],

  "keywords": [
    "twbs",
    "bootstrap",
    "sass"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "lib",
    "tasks",
    "templates",
    "test",
    "*.gemspec",
    "Rakefile",
    "Gemfile"
  ]
}

而 components-font-awesome 的 bower.json 中只有 "main": "css/font-awesome.css",沒有其他檔案,所以我們必須 project 的根目錄下的 bower.json 中增加 override,以解決這個問題。例如:
{
  "name": "wifi",
  "private": true,
  "dependencies": {
    "bootstrap-sass-official": "~3.1.1",
    "modernizr": "~2.6.2",
    "jquery": "~1.11.0",
    "components-font-awesome": "~4.1.0",
    "jquery-i18n": "~1.1.1",
    "swfobject": "https://github.com/swfobject/swfobject.git#2.2"
  },
  "devDependencies": {},
  "overrides": {
    "components-font-awesome": {
      "main": [
        "css/font-awesome.css",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.svg"
      ]
    }
  }

}

0 意見: