Decorative image frame

D-107

3wly 项目开发组自留地

test
闲言碎语
laravel
swoole
docker
net core
php
问题记录
vue
vmware
新手向

win10 子系统（wsl2）运行laradock 2020-01-16 docker
win10 子系统（wsl1）运行 laradock 2020-01-14 docker
net core WebApi——April.Util更新之权限 2019-11-10 net core
net core WebApi——公用库April.Util公开及发布 2019-11-07 net core
net core WebApi——使用xUnits来实现单元测试 2019-11-05 net core
向net core 3.0进击——多平台项目发布与部署 2019-10-29 net core
在 laravel vue 中使用 svg 图标 2019-10-28 laravel
Linux配置部署_新手向（五）——Docker的安装与使用 2019-10-28 vmware 新手向
又是一年1024 2019-10-24 闲言碎语
net core WebApi——使用NPOI导入导出操作 2019-10-18 net core
在 laradock 环境中使用 laravel-swoole 的 websocket 2019-10-12 laravel swoole docker
向net core 3.0进击——April.WebApi从2.2爬到3.0 2019-10-09 net core
向net core 3.0进击——Swagger的改变 2019-10-07 net core
net core WebApi——定时任务Quartz 2019-09-26 net core
net core WebApi——缓存神器Redis 2019-09-23 net core
Linux配置部署_新手向（四）——Redis安装与配置 2019-09-12 vmware 新手向
Linux配置部署_新手向（三）——MySql安装与配置 2019-09-12 vmware 新手向
Hello Dotnet 2019-09-04 test
Hello PHP 2019-09-03 test
net core WebApi——尝试企业微信来开发企业内部应用 2019-09-02 net core
net core WebApi——文件分片下载 2019-08-27 net core
net core WebApi——文件分片上传与跨域请求处理 2019-08-23 net core
在 laradock 环境中使用 laravel-swoole 加速你的 laravel 应用 2019-08-23 laravel swoole docker
Linux配置部署_新手向（二）——Nginx安装与配置 2019-08-21 vmware 新手向
Linux配置部署_新手向（一）——CentOS系统安装 2019-08-21 vmware 新手向
在vue中使用laravel-permission的@can标签 2019-08-02 laravel vue
net core Webapi基础工程搭建（七）——小试AOP及常规测试_Part 2 2019-08-01 net core
net core Webapi基础工程搭建（七）——小试AOP及常规测试_Part 1 2019-07-30 net core
net core Webapi基础工程搭建（六）——数据库操作_Part 2 2019-07-19 net core
net core Webapi 总目录 2019-07-19 net core
net core Webapi基础工程搭建（六）——数据库操作_Part 1 2019-07-18 net core
tp5文件上传$_FILES有值request中file却为空 2019-07-11 php 问题记录
net core Webapi基础工程搭建（五）——缓存机制 2019-07-10 net core
net core Webapi基础工程搭建（四）——日志功能log4net 2019-07-04 net core
net core Webapi基础工程搭建（三）——在线接口文档Swagger 2019-07-02 net core
net core Webapi基础工程搭建（二）——创建工程 2019-07-02 net core
net core Webapi基础工程搭建（一）——开发工具及环境 2019-07-02 net core
laravel 广播系统学习 2019-04-12 laravel
laravel 队列学习 2019-04-09 laravel
laravel 事件系统学习 2019-04-03 laravel
使用 laravel mix 编译资源 2019-03-15 laravel
Hello World 2018-02-13 test

使用 laravel mix 编译资源

学习下如何在 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 一种样式文件，但是其实可以支持常见的以及不常见的很多中格式，只需要调用对应的接口即可。而且还可以把多个资源文件合并成一个。

举个🌰：

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 ]

其实不难，挺简单的。😎