laravel-mix的安装

Laravel-mix的安装 

Laravel Mix 是一款前端任务自动化管理工具，使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API，让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器，通过简单的调用，你可以轻松地管理前端资源。

一、安装node.js

1、windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到首页的“INSTALL”按钮，根据自己需要选择版本，直接点击就会自动下载安装了。

   

2、安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:Program Files odejs”）。

3、安装完成后可以使用cmd（win+r然后输入cmd进入）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。

 

4、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 odejs ode_global"

以及

npm config set cache "C:Program Files odejs ode_cache"

 

③、现在我们来装个模块试试，选择express这个比较常用的模块。同样在cmd命令行里面，输入“npm install express -g”（“-g”这个参数意思是装到global目录下，也就是上面说设置的“C:Program Files odejs ode_global”里面。）。待cmd里面的安装过程滚动完成后，会提示“express”装在了哪、版本还有它的目录结构是怎样。如下图：

 

 

 

④、关闭cmd，打开系统对话框，“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。如下图

⑤、进入环境变量对话框，在系统变量下新建"NODE_PATH"，输入”C:Program Files odejs ode_global ode_modules“。（ps：这一步相当关键。）

2014.4.19新增：由于改变了module的默认地址，所以上面的用户变量都要跟着改变一下（用户变量"PATH"修改为“C:Program Files odejs ode_global”），要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误。

⑥、以上步骤都OK的话，我们可以再次开启cmd命令行，进入node，输入“require('express')”来测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。如下图（如出错一般都是NODE_PATH的配置不对，可以检查下第④⑤步）

 

二、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