Laravel学习笔记基础系列--(三十二)Laravel前端开发-Mix使用

作者: 温新

分类: 【Laravel】

阅读: 1710

时间: 2021-08-02 14:41:40

作者:温新

时间: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.jsjs/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等,使用方法都是一样了,这里就不演示了。

我是温新

每天进步一点点,就一点点

请登录后再评论