在 VS2015 使用 gulp-sass ,Task Runner Explorer 的 Gulpfile.js 發生錯誤

今天試著用 visual studio 2015 建立 web 專案,在專案中加入  gulp-sass 時遇到錯誤
最初我以為需要重新安裝 node-sass 或是 rebuild,但是持續出錯,然後在 stackoverflow M1Les 的回復 看到解決方法。

我的 gulp-sass 發生錯誤的過程:
首先透過 npm 命令安裝 gulp 和 gulp-sass
npm install gulp --save-dev
npm install gulp-sass --save-dev

當我在 gulpfile.js 加入
var sass = require('gulp-sass');

Task Runner Explorer 重新整理就出現如下面的錯誤訊息

Gulpfile.js   Failed to load.


按 Ctrl + Alt + O 切換到輸出視窗(Output) 看到下行的錯誤訊息。
 Error: `libsass` bindings not found ... Try reinstalling `node-sass`


完整錯誤訊息如下:
Failed to run "C:\code\Project\src\Web\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
Error: `libsass` bindings not found in C:\code\Project\src\Web\node_modules\gulp-sass\node_modules\node-sass\vendor\win32-ia32-11\binding.node. Try reinstalling `node-sass`?
    at Object.sass.getBinaryPath (C:\code\Project\src\Web\node_modules\gulp-sass\node_modules\node-sass\lib\extensions.js:148:11)
    at Object. (C:\code\Project\src\Web\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:16:36)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object. (C:\code\Project\src\Web\node_modules\gulp-sass\index.js:163:21)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object. (C:\code\Project\src\Web\gulpfile.js:11:12)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)


解決錯誤的方法:
到 Tools >  Options > Projects and Solutions > External Web Tools 改變項目的排列順序
將 $(PATH)  移到 $(DevEnvDir)\Extensions\Microsoft\Web Tools\External 的上面

修改前

修改後


Reference:
Task Runner Explorer can't load tasks
Customize external web tools in Visual Studio 2015



留言

這個網誌中的熱門文章

ng2-smart-table 自定 column 資料

C# Create An AutoComplete TextBox on WinForm

查出哪個程式佔用 port 443