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