学习下如何在 laravel 框架中,用 laravel mix 编译前端资源。

使用

本次操作的环境依然是 laradock,如果没用特殊说明,以后应该默认 laradock。

workspace 容器中,已经提前装好了 node 环境,而在项目根目录中,package.json 和 webpack.mix.js 也已经为我们预设好了,所以laravel 项目建好后,直接在根目录安装即可:

1
npm install

在 webpack.mix.js 中,已经加载了两个默认的文件:

1
2
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

我们只需要把自己的资源文件,按照同样的格式写入进去,然后开始运行,就可以生成编译后的资源了。

虽然示例中只写了 sass 一种样式文件,但是其实可以支持常见的以及不常见的很多中格式,只需要调用对应的接口即可。而且还可以把多个资源文件合并成一个。

举个🌰:

1
2
3
4
5
6
mix.less('resources/assets/less/app.less', 'public/stylesheets/styles.css');

mix.styles([
'public/css/vendor/normalize.css',
'public/css/vendor/videojs.css'
], 'public/css/all.css');

运行

1
2
npm run dev
npm run watch

在上一篇中,我们修改视图后使之生效的命令,其实就是通知 mix 开始工作的。

单独使用

在 laravel 框架之外也是可以使用 mix 的,具体教程请参考 [ learnku ]

其实不难,挺简单的。😎