Laravel学习笔记基础系列--(三十二)Laravel前端开发-Mix使用
作者：温新
时间：2021-07-03
hi，我是温新，一名PHPer
从Laravel6开始，Laravel前端开发所使用的脚手架被打成一个包laravel/ui。到了Laravel8.x，使用的方式又变得有点不同。那么现在从新开始记录。
Node与NPM
要使用Laravel前端开发，那么安装Node就是一个必要条件。关于Node怎么安装，这里不进行介绍。安装Node之后查看下Node与npm相关信息。
node -v
npm -v
Laravel Mix
在使用Laravel Mix之前，先来创建一个全新的Laravel项目。项目创建之后打开根目录的package.json文件看看里面的内容，这就是前端开发所依赖的基本东西（基于Laravel框架）。
// pageage.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14"
}
}
安装前端开发依赖包
【很重要】前端开发从npm install开始
npm install
命令执行完成后会发现在项目根目录多了一个node_modules文件夹，前面开发所需要的依赖包都在这里。
执行Mix
在运行 Laravel Mix可以了解下，是执行的哪一个文件。npm run dev会去执行webpack.mix.js文件中的配置，然后生成原生CSS样式，以供前端使用。
npm run dev
命令执行完成后，会在public目录下生成css/app.js与js/app.js两个目录，这两个目录中分别含有对应的js与css文件。
Less的使用
开发中使用多个样式是很常见的情况，我们来使用多个样式，现在来修改一个webpack.mix.js，新增一个样式文件
第一步：在resourcess/css目录下新建一个test.less
第二步：修改webpack.mix.js文件
// 新增一个test.less样式，并编译到public/css/test.css
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css')
.less('resources/css/test.less', 'public/css/test.css');
第三步：执行mix
npm run dev
前端页面中使用样式
第一步：定义路由
// web.php
Route::get('test', function(){
return view('test');
});
第二步：定义页面
// resources/views/test.blade.php
<link rel="stylesheet" href="css/test.css">
<link rel="stylesheet" href="css/app.css">
<div>
<h1>自如初</h1>
</div>
第三步：编写样式
// resources/css/app.css
h1 {
color: #ffffff;
}
// resources/css/test.less
body {
background: deeppink !important;
}
第四步：编译
npm run dev
这样就可以在页面中访问了。
多个样式文件合并为一个样式文件
Laravel Mix提供了将多个样式文件合并为一个文件的功能。需要注意的是，只有相同样式格式的文件才能合并，如a.less与b.less相同才能合并；而a.less与c.sass是无法合并的，会报错。
第一步：新建demo.less并编写样式
// resources/css/demo.less
h1 {
border: 1px solid white;
}
第二步：Laravel Mix中合并样式
方法：styles()
// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css')
.styles(['resources/css/test.less','resources/css/demo.less'], 'public/css/style.css');
第三步：执行mix
npm run dev
第四步：前端使用
// test.blade.php
<link rel="stylesheet" href="css/style.css">
<div>
<h1>自如初</h1>
</div>
版本号与缓存刷新
有时候会遇到修改样式后浏览器访问时并没有生效，需要强制刷新后才会生效。想要立即生效怎么办？Laravel Mix提供了版本控制，当样式发生改变后，会更新版本，对于浏览器来说，这是一个新的文件，自然就不会缓存。
第一步：样式中新增版本号
方法：version()
// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css')
.styles(['resources/css/test.less','resources/css/demo.less'], 'public/css/style.css').version();
第二步：修改样式
// resources/css/demo.less
h1 {
border: 1px solid white;
color: white;
}
第二步：运行mix
npm run dev
第四步：前端页面使用
方法：mix()
// test.blade.php
<link rel="stylesheet" href="{{ mix('/css/style.css') }}">
<div>
<h1>自如初</h1>
</div>
JavaScript使用
Laravel Mix还能处理Javascript文件，默认使用ES2015语法。下面来做一个简单的演示
第一步：在resources/js/目录 下新建一个demo.js
第二步：修改webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/demo.js','public/js')
.postCss('resources/css/app.css', 'public/css')
.styles(['resources/css/test.less','resources/css/demo.less'], 'public/css/style.css').version();
第三步：执行mix
npm run dev
其他方法
有没有发现，修改被改动一次就要重新执行一npm run dev，有一个实时监控的方法，改动了就自动编译。
watch监听
npm run watch
watch 运行会将处于阻塞状态，并监听所有相关文件，只要有修改保存，就会自动重新编译资源文件。
production
production会对资源文件进行压缩，使用之最小化输出。
npm run production
还有一些其他样式，如sass、stylus等，使用方法都是一样了，这里就不演示了。
我是温新
每天进步一点点，就一点点