laravel-mix的安裝

Laravel-mix的安裝 

Laravel Mix 是一款前端任務自動化管理工具，使用了工做流的模式對制定好的任務依次執行。Mix 提供了簡潔流暢的 API，讓你可以爲你的 Laravel 應用定義 Webpack 編譯任務。Mix 支持許多常見的 CSS 與 JavaScript 預處理器，經過簡單的調用，你能夠輕鬆地管理前端資源。

1、安裝node.js

一、windows下的NodeJS安裝是比較方便的（v0.6.0版本以後，支持windows native），只須要登錄官網（http://nodejs.org/），即可以看到首頁的「INSTALL」按鈕，根據本身須要選擇版本，直接點擊就會自動下載安裝了。

   

2、安裝過程基本直接「NEXT」就能夠了。（windows的安裝msi文件在過程當中會直接添加path的系統變量，變量值是你的安裝路徑，例如「C:\Program Files\nodejs」）。

3、安裝完成後可使用cmd（win+r而後輸入cmd進入）測試下是否安裝成功。方法：在cmd下輸入node -v，出現下圖版本提示就是完成了NodeJS的安裝。

 

四、npm的安裝。因爲新版的NodeJS已經集成了npm，因此以前npm也一併安裝好了。一樣可使用cmd命令行輸入"npm -v"來測試是否成功安裝。以下圖，出現版本提示便OK了。

    

5、常規NodeJS的搭建到如今爲止已經完成了，急不及待的話你能夠在」cmd「輸入」node「進入node開發模式下，輸入你的NodeJS第一句：」hello world「 - 輸入：console.log('hello world')。

 

6、npm做爲一個NodeJS的模塊管理，以前我因爲沒有系統地看資料因此致使安裝配置模塊的時候走了一大段彎路，因此如今頗有必要列出來記錄下。

 

①、咱們要先配置npm的全局模塊的存放路徑以及cache的路徑，例如我但願將以上兩個文件夾放在NodeJS的主目錄下，便在NodeJs下創建"node_global"及"node_cache"兩個文件夾。以下圖

 

②、啓動cmd，輸入

npm config set prefix "C:\Program Files\nodejs\node_global"

以及

npm config set cache "C:\Program Files\nodejs\node_cache"

 

③、如今咱們來裝個模塊試試，選擇express這個比較經常使用的模塊。一樣在cmd命令行裏面，輸入「npm install express -g」（「-g」這個參數意思是裝到global目錄下，也就是上面說設置的「C:\Program Files\nodejs\node_global」裏面。）。待cmd裏面的安裝過程滾動完成後，會提示「express」裝在了哪、版本還有它的目錄結構是怎樣。以下圖：

 

 

 

 

 

④、關閉cmd，打開系統對話框，「個人電腦」右鍵「屬性」-「高級系統設置」-「高級」-「環境變量」。以下圖

⑤、進入環境變量對話框，在系統變量下新建"NODE_PATH"，輸入」C:\Program Files\nodejs\node_global\node_modules「。（ps：這一步至關關鍵。）

2014.4.19新增：因爲改變了module的默認地址，因此上面的用戶變量都要跟着改變一下（用戶變量"PATH"修改成「C:\Program Files\nodejs\node_global\」），要不使用module的時候會致使輸入命令出現「xxx不是內部或外部命令，也不是可運行的程序或批處理文件」這個錯誤。

⑥、以上步驟都OK的話，咱們能夠再次開啓cmd命令行，進入node，輸入「require('express')」來測試下node的模塊全局路徑是否配置正確了。正確的話cmd會列出express的相關信息。以下圖（如出錯通常都是NODE_PATH的配置不對，能夠檢查下第④⑤步）

 

2、Laravel Mix下安裝npm依賴

1.因爲國內的網絡緣由，咱們還需爲npm 配置安裝加速：

npm config set registry https://registry.npm.taobao.org

說明：此處使用的是淘寶鏡像,也可使用其餘可用的鏡像地址

2.執行下列命令安裝：npm install

此處我是使用Phpstorm編輯器，打開Terminal，而後執行命令。這和在cmd命令框下進入項目根目錄，執行npm命令效果是同樣的。

 

   安裝命令正常執行安裝完成後，命令框中會顯示如圖：

 

   項目目錄中多了一個node_modules文件夾

 

 

注意：安裝過程當中，遇到不少坑，如今將其與相應的解決辦法依次記錄下來

1）報錯：node-gyp-build「不是內部或外部命令，也不是可運行的程序」

 

解決辦法：將項目根目錄下面的node_modules的文件刪掉，全局安裝node-gyp和node-gyp-build模塊，而後再執行npm install

npm install -g node-gyp

npm install -g node-gyp-build

3.npm依賴安裝成功後，執行npm run dev命令來編譯前端資源時

執行過程，遇到報錯，如圖：

 

解決辦法：全局安裝cross-env模塊

執行下列命令：npm install cross-env -g

 

 

4.執行命令：npm run watch-poll

1）成功執行後，命令框以下圖所示

 

說明：該命令成功執行後，public文件夾下面會生成一個叫作mix-manifest.json 的文件，它的做用是，結合模板渲染的方式，有組織地加載構建後的文件。以下圖：

 

參考文章連接:https://blog.csdn.net/huanghanqian/article/details/51440592