程岳

2016年3月16日星期三

msbuild copy files - Illegal characters in path error

遇到一個 msbuild 的問題讓我十分困擾，
目前處理的專案，用到 aps.net MVC5 + Angular 2 ，以 npm 進行安裝
希望透過 msbuild 將專案 build 過後，也順道把 node_module 資料夾 copy 至 build 資料夾，
但是卻遇到 Illegal characters in path 的錯誤訊息：

所用的也是很正常的 msbuild task

<CreateItem Include="$(SourceDir)\**\*.*" Exclude="$(SourceDir)\.bin\**\*.*;">
    <Output TaskParameter="Include" ItemName="NodeModulesFileItems" />
</CreateItem>
<Copy SourceFiles="@(FileItems)" DestinationFiles=
    "@(FileItems->'$(OutputDir)\%(RecursiveDir)%(Filename)%(Extension)')" />

先來查看 package.json ，看看 node_module 放了哪些 package，如下：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "gulp-typescript": "^2.10.0",
    "gulp": "^3.9.0"
  }
}

所以原因出在 node_modules 這個資料夾到底出了什麼事！？來實驗看看吧！

假設專案路徑是： C:\project\webapp
如果 copy 的路徑是：C:\project\webapp\Content 成功
如果 copy 的路徑是：C:\project\webapp\Image 成功
如果 copy 的路徑是：C:\project\webapp\node_modules 失敗
如果 copy 的路徑是：C:\project\webapp\node_modules\angular2 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\systemjs 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\es6-promise 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\es6-shim 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\reflect-metadata 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\rxjs 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\zone.js 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\gulp-typescript 失敗
如果 copy 的路徑是：C:\project\webapp\node_modules\gulp 失敗

最後終於發現是 gulp, gulp-typescript 兩個資料夾在做怪，

由於這兩個資料夾裡面的檔案結構又深又長，導致 copy task 在複製檔案時，
因路徑太長而拋出 Illegal characters in path 訊息，
那該如何處理呢？

在發佈時，先將這兩個資料夾刪掉，以暫時解決這個問題，
使用 removedir task 刪除資料夾，
但是仍然會發生 Illegal characters in path 錯誤，我想問題應該是跟上面一樣

<removedir directories="$(dir)"></removedir>

所以只好依靠 windows command - rmdir 來處理

<Exec Command="RMDIR /S /Q $(WebNodeModulesSourceDir)\gulp"/>
<Exec Command="RMDIR /S /Q $(WebNodeModulesSourceDir)\gulp-typescript"/>

<CreateItem Include="$(SourceDir)\**\*.*" Exclude="$(SourceDir)\.bin\**\*.*;">
    <Output TaskParameter="Include" ItemName="NodeModulesFileItems" />
</CreateItem>
<Copy SourceFiles="@(FileItems)" DestinationFiles=
    "@(FileItems->'$(OutputDir)\%(RecursiveDir)%(Filename)%(Extension)')" />

打完收工！

2016/04/21 更新：安裝新版的 NPM，即可解決此問題，參考