關於安裝gulp-sass失敗的問題解決

https://blog.csdn.net/jimmyhandy/article/details/50723174


該文章所介紹的問題均是在64位win8下出現的。
網絡原因導致gulp-sass安裝失敗

如果你正在構建一個基於 gulp 的前端自動化開發環境,那麼極有可能會用到 gulp-sass ,由於網絡原因你可能會安裝失敗,因爲安裝過程中部分細節會到亞馬遜雲服務器上獲取文件。
執行安裝gup-sass的命令

$ npm install gulp-sass --save-dev

    1

這個過程中會先安裝 node-sass ,因爲 gulp-sass 依賴於 node-sass 。中間出現的錯誤信息類似下面這樣:

Cannot download https://github.com/sass/node-sass/releases/download/v3.4.2/win32-x64-46_bind

    1

處理思路

看現象很有可能是這些二進制文件使用了 GitHub 的 lfs 服務,而 lfs 使用的是亞馬遜雲,由於網絡原因,這些服務器無法訪問。

現在解決問題的辦法思路就很清晰了,下載源碼自己編譯一個這樣的二進制文件,或下載官方的二進制文件。只要解決該文件的下載問題就可以繼續往後安裝。

打開 github 看一下該項目 https://github.com/sass/node-sass,在 releases 頁面能找到下失敗的文件 win32-x64-46_binding.node ,這裏還可以下載到 source code,下載后里頭有 C++ 項目 使用 visualstudio2015 自己編譯一個就可以了。

同時,在 https://github.com/sass 下,還發現一個名字叫 node-sass-binaries 的項目,這裏頭其實也有剛纔的那個二進制文件,並且這裏的是可以直接下載的(貌似沒使用 lfs)。

下面說一下直接使用該項目中的二進制文件進行安裝 node-sass 過程。
操作

npm 是一個功能超級強悍的工具,安裝一個軟件包的方式也當然不僅僅是 npm install packagename 這一種方式,當然這是最快捷的使用公共軟件包的安裝方式。

首先到官網(https://github.com/sass/node-sass/releases)下載 node-sass 項目源碼,下載後解壓至相應的 node_modules 目錄中。
接下來,打開 package.json 文件,檢查 script 字段

"scripts": {
    "coverage": "node scripts/coverage.js",
    "install": "node scripts/install.js",
    "postinstall": "node scripts/build.js",
    "pretest": "jshint bin lib scripts test",
    "test": "mocha test"
  },

    1
    2
    3
    4
    5
    6
    7

打開 install 字段對應的文件 scripts/install.js,可以看到 checkAndDownloadBinary() 在下載這個二進制文件,URL使用的是 process.sass.binaryUrl,我們可以直接在這裏覆蓋這個變量,把改地址修改爲上面提到的那個能夠下載的二進制文件地址,大概113行。

download(process.sass.binaryUrl, process.sass.binaryPath, function(err) {
      if (err) {
        console.error(err);
        return;
      }

      console.log('Binary downloaded and installed at', process.sass.binaryPath);
    });

    1
    2
    3
    4
    5
    6
    7
    8

或者,找出上面提到的 sass.binaryUrl() 方法,打開 ../lib/extensions.js 文件,大約108行左右,修改爲如下樣子即可

function getBinaryUrl() {
  var site = flags['--sass-binary-site'] ||
             process.env.SASS_BINARY_SITE  ||
             process.env.npm_config_sass_binary_site ||
             (pkg.nodeSassConfig && pkg.nodeSassConfig.binarySite) ||
             'https://github.com/sass/node-sass/releases/download';

    //return [site, 'v' + pkg.version, sass.binaryName].join('/');
    return 'https://github.com/sass/node-sass-binaries/blob/master/win32-x64-46_binding.node';
}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

修改完成後,繼續安裝即可。
缺少python環境

報錯代碼

gyp verb check python checking for Python executable "python2.7" in the PATH
gyp verb which failed Error: not found: python2.7
gyp verb which failed at F (C:\Users\Administrator\Desktop\webpack\node_modules\node-sass\node_modules\node-gyp\node_modules\which\which.js:78:19)
gyp verb which failed at E (C:\Users\Administrator\Desktop\webpack\node_modules\node-sass\node_modules\node-gyp\node_modules\which\which.js:82:29)

    1
    2
    3
    4

安裝python的包,點擊下載
這裏寫圖片描述
注意:安裝python時需要允許寫入path,如下圖所示,點擊左側圖標,選擇第一項
這裏寫圖片描述
MSBUILD : error MSB3428: 未能加載 Visual C++ 組件“VCBuild.exe”

gyp info spawn args   '/p:Configuration=Release;Platform=x64' ]
在此解決方案中一次生成一個項目。若要啓用並行生成,請添加“/m”開關。                                                                                                                                                    
生成啓動時間爲 2016/2/23 14:45:24。                                                                                                                                                                                     
節點 1 上的項目“C:\work\testCode\gulp\node_modules\node-sass\build\binding.sln”(默認目標)。                                                                                                                                      
ValidateSolutionConfiguration:
  正在生成解決方案配置“Release|x64”。                                                                                                                                                                                            
MSBUILD : error MSB3428: 未能加載 Visual C++ 組件“VCBuild.exe”。要解決此問題,1) 安裝 .NET Framework 2.0 SDK;2) 安裝 Microsoft Visual Studio 2005;或 3) 如果將該組件安裝到了其他位置,請將其位置添加到系統路徑中。 [
C:\work\testCode\gulp\node_modules\node-sass\build\
binding.sln]
已完成生成項目“C:\work\testCode\gulp\node_modules\node-sass\build\binding.sln”(默認目標)的操作 - 失敗。                                                                                                                                


生成失敗。                   

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

1. 打開.net Framework

    找到控制面板中“啓用或關閉windows功能”
    這裏寫圖片描述
    打開控制面板中“啓用或關閉windows功能”
    這裏寫圖片描述
    啓用後,在控制面板=》程序中可以看到.net framework
    這裏寫圖片描述

2. 安裝Visual Studio Express 2015 for window desktop

我在網上查閱資料,說只要安裝Visual Studio Express就可以了,這個蠻大的,裝了好久,本來不想安裝,可是裝不上gulp-sass,無奈,只能安裝一下了。下載地址,下載的文件名爲“wdexpress_full_CHS.exe”
下載截圖
這裏寫圖片描述
安裝截圖
這裏寫圖片描述
3. 更改npm中使用vs的配置

我是安裝的2015,所以需要強制指定npm使用vs2015

$ npm config set msvs_version 2015

    1

4. 安裝gulp-sass

$ npm install gulp-sass --save-dev

    1

這次終於安裝成功,截圖如下:
這裏寫圖片描述

參考文章:http://www.th7.cn/web/js/201511/135415.shtml
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章