我在前几天刚写过的《让 F5 歇一会儿——laravel-mix 自动刷新之道》[1]中介绍了 laravel-mix 实现自动刷新的几种方法,其中就有涉及 hmr(Hot Module Replacement...对于 Laravel 官方首推的 Homestead 当然也是可以的,只不过用法上有些差别,于加上 laravel-mix 本身的一些 BUG(在 issue 里搜索 hmr 结果就有好几页 :smile...1.vagrant ssh 连接虚拟机,进入项目目录后安装前端依赖 yarn install 2.在 webpack.mix.js 中调整相关配置 使用 mix.Webpack() 配置 devServer...在虚拟机终端中执行yarn run hot,然后在浏览器中使用绑定的测试域名(如:laravel.test)访问 34.修改 JS 等,自动编译后浏览器中页面即自动更新 玩法二:使用宿主机中的 Node...修改 JS 等,自动编译后浏览器中页面即自动更新 总结 两种方法并没有谁好谁坏之分,具体使用哪种方法视具体场景及个人喜好而定。
因为近几年来大部分时假在与 Laravel 打交道,使用 laravel-mix 已成家常便饭,所以想着总结并分享一下 laravel-mix 工作流中的自动刷新之道。...要在 laravel-mix 中使用 hmr,不需要安装其它额外的依赖包。...在 webpack.mix.js 中根据实际场景配置 hmr 参数 // 配置 hmr 参数 mix.options({ hmrOptions: { host: 'laravel-mix-autoreload-demo.test...打开页面,修改页面引用的前端资源(如 js,css)并保存,页面将自动刷新 因为使用 laravel-mix 编译,一般修改 resource/ 目录下的文件,但实际上直接修改 public/ 目录中的文件也是可以触发刷新的...但同时需要注意的是 laravel-mix 环境下使用 hmr 也存在一些问题(当前最新版本 4.0.15 中仍存在),例如与 mix.extract() 没法同时使用( 见 Issue ) 以及在windows
看过我之前写过的博客的应该知道我一直是 laravel-mix 的死忠粉,有好几篇文章都是关于它的。每每提到 laravel-mix 时更是不吝溢美之词。...至于为什么放弃 laravel-mix,主要是因为它的维护状况堪忧,不仅更新节奏缓慢,许多 Issue 久悬未决,更重要的是,作者似乎将很多 bug 完全寄希望于 webpack5,哪怕有热心人士 PR...正所谓爱之深,责之切,在对 laravel-mix 表示失望之后,我翻出了自己 star 多时的另一包 webpack-encore,虽说很早就 star 了,但之前却没试用过它,可能也是因为对于 laravel-mix...而我迁移的这个项目,是一个 Laravel 项目,所以下面就分享下,如果在 Laravel 项目中使用 webpack-encore 替代 laravel-mix。...自带了一个 mix() 函数用于引用 mix 编译的资源,与之类似,syfony 也有这样的函数,而且更为方便。
// purifyCss: false, <-- 删除未使用的CSS选择器。...npm run watch 基本和npm run dev构建出来的文件一样,但是可以监测到静态资源文件的变化并且自动构建更新静态资源。...常用的case 版本控制和清理缓存 开发者经常会使用在编译后的资源文件名加上时间戳或者是唯一的token作为版本号,强迫浏览器加载全新的资源文件,而不是缓存的文件。...每次都要手动打版本号确实让人不太爽,但是你可以使用 Laravel Mix de version() 它会自动为所有编译文件的文件名附加一个唯一的哈希值,从而实现更方便的缓存清除功能: mix.js('...因此,你应该在你的视图中使用 Laravel 的全局辅助函数 mix 来正确加载名称被哈希后的文件。
接下来,我们就可以运行 npm run dev 命令通过 Laravel Mix 来编译前端资源了,该命令定义在 package.json 中: 该命令最终运行的是 npm run development...命令,意为在开发环境对前端资源进行编译,如果需要的话你可以在这里对命令参数进行修改,如果是在生产环境,需要运行 npm run prod 命令,如果在开发环境中想要修改文件后自动编译资源可以运行 npm...Laravel Mix 是对 Webpack 进行封装后提供给 Laravel 项目使用的前端打包工具,Webpack 是目前最新的、广泛使用的前端资源打包工具(之前还有 Grunt、Gulp 等),能够以模块方式处理所有前端资源...Laravel Mix 的配置文件就是项目根目录下的 webpack.mix.js: const mix = require('laravel-mix'); mix.js('resources/js/...库,然后运用它提供的 js 和 sass 方法将 resources/js/app.js 编译打包后输出到 public/js/app.js,将 resources/sass/app.scss (Sass
Laravel Mix 工具,这会节省大量前端配置时间 根目录新建文件 webpack.mix.js const fs = require('fs'); const mix = require('laravel-mix...# 局限 不能做到全局自动加载组件 编译后的文件大小可能会很大 # 优势 可以更好地编写复杂的页面 更好的维护性 # 权限交互 ?...# 更新 2020/03/13 随着页面重构,文件越来越多,导致编译后总文件大小足足 150 M,而且 Git 合并困难,大大降低了开发效率和前端性能,这明显不合预期; 分析原因:每个页面都引入了公共模块...9 10 11 # laravel-mix 配置 const path = require('path') const mix = require('laravel-mix') const rs_root.../resources/js 文件夹可以删掉了,编译后的总文件大小约 2.5 M 至此,优化完成,完美解决了开发流程的痛点 # 后记 目前仍在不断地探索中
该API集成了Gulp,为编译Laravel项目中的Less、Sass、CoffeeScript以及处理许多其他日常任务提供了一个简单的解决方案,从而减少编写上述繁琐任务的时间,有效提高编程效率。...Gulp安装完成后就可以安装Elixir了!...2、安装Elixir Laravel 5 安装完成后在项目根目录下自动包含了一个名为 package.json 的文件,该文件内容如下: { "devDependencies": {...在该文件中,可以看到一个Gulp任务示例: elixir(function(mix) { mix.less('app.less');}); mix.less 任务可以用于编译Less文件,在本例中该文件名为...) { mix.less('app.less'); mix.coffee();}); 此外,你还可以直接使用方法链到命令上: elixir(function(mix) { mix.less
webpack.config.js 文件提出来 cp node_modules/laravel-mix/setup/webpack.config.js 然后打开webpack.config.js.../node_modules/laravel-mix/src/index和 ..../node_modules/laravel-mix/src/index'); // 修改路径 require(Mix.paths.mix()); /** * Just in case the user.../node_modules/laravel-mix/src/builder/WebpackConfig'); //修改路径 module.exports = new WebpackConfig()....value: '8.00' }] } } } 然后 npm run dev 编译后即可
在这里我们说的广播系统其实就是配合 WebSocket 实现的即时更新接口。什么意思呢?比如说在你的购物 App 上,如果订单状态发生了变化,比如卖家发货了,那么马上就会收到一条通知信息。...Laravel 队列监听处理后的内容会到 laravel-echo-server 中,并由 laravel-echo 的服务端进行对前端的广播。...修改完成之后,我们需要使用 Laravel 默认的 mix 工具来编译一下前端代码,最后需要加载的文件实际上是 public/js/app.js ,直接使用下面的命令行进行编译即可。...npm run dev 执行完编译之后,我们就可以写一个前端页面来进行测试了。在这个页面中,直接引用 app.js 文件即可。... 接下来重新编译 mix 。
模块化管理的前后端分离项目,显然就不合适了,因为前端项目需要通过 NPM 引入各种第三方依赖以模块化方式构建复杂功能,以及 Less、Sass 等预处理语言编写模块化样式代码,然后通过 WebPack 对其这些前端资源进行编译...虽然该项目是针对 Laravel 框架开发的,不过,由于是一个纯前端项目,因此可以适用于所有 Web 前端项目,现在,我们就来在博客项目中引入 Laravel Mix 管理前端资源。...安装 Laravel Mix 开始之前,需要先安装 Laravel Mix 组件需要的前端相关依赖,假设你的系统上已经安装过 Node 和 NPM 包管理器,如果没有安装的话前往 Node.js 官方下载页面...安装完成后可以在命令行通过 npm --version 验证 NPM 是否安装成功: 如果版本较低,可以使用如下命令升级: npm i -g npm 在 blog 根目录下通过 npm init 命令按照向导生成...这样一来,我们就可以在项目中基于 Laravel Mix 管理前端资源了。 下篇教程,我们将基于 Laravel Mix 为博客项目替换主题。 (全文完)
基于 Laravel Mix 引入 Tailwind 在 Laravel 项目中,我们可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架,开始之前,先安装 laravel-mix-tailwind...这个前端依赖包: npm install laravel-mix-tailwind --save-dev 安装完成后,需要在项目根目录下的 webpack.mix.js 中引入它: const mix...= require('laravel-mix'); require('laravel-mix-tailwind'); ......(); 由于 laravel-mix-tailwind 依赖 tailwind.js,所以还需要通过如下命令初始化 Tailwind: npx tailwindcss init 如果上述命令运行报错...: npm run watch 编译成功,则表明 Tailwind CSS 框架已正常引入。
在 public 目录下新建 js 子目录用于存放编译打包后的 JavaScript 脚本文件。...,通过 Laravel Mix 来编译打包这些预处理 js 文件: const mix = require('laravel-mix') mix.js('resources/js/app.js', '...public/js'); 上述代码的含义是引入 Laravel Mix,然后通过它提供的 js 方法将 resources/js/app.js 进行编译打包,然后将处理后的 app.js 文件分发到...然后在 webpack.mix.js 中补充对应的处理逻辑: const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public...5、编译前端资源文件 完成以上编码后就可以在项目根目录下执行 npm run dev 编译打包前端资源了: ? 编译成功后,就可以在 public 目录下看到对应的新文件了: ?
使用 Laravel 安装器安装 安装 Laravel 安装器很简单,在命令行执行以下命令即可(如果已经安装过,会自动进行更新): composer global require laravel/installer...安装完成后,后续就可以通过 laravel new [项目名称] 来创建新的 Laravel 项目了: laravel new blog 该命令会在当前目录下创建一个新的名为 blog 的应用: ?...2、Laravel 应用的目录结构 安装完成后,我们来看一下新安装 Laravel 项目 blog 的目录结构: ?...:Laravel Mix Webpack 配置文件,用于编译和打包前端资源 package.json:配置前端资源依赖和脚本(类似于 composer.json 之于 PHP) phpunit.xml:...4、运行 安装好 Laravel 项目,了解了目录结构及其作用,以及如何对项目进行配置后,我们就可以运行这个应用了,启动方式因开发环境而异,我们在前面的 Homestead、Laradock、Valet
": "^1.1.6", "laravel-elixir-vue-2": "^0.3.0", "laravel-elixir-webpack-official": "^1.0.10", "laravel-mix...'); require('laravel-elixir-webpack-official'); require('laravel-elixir-vue-2') elixir((mix) => { mix.sass...('app.scss') .webpack('app.js'); }); webpack.mix.js let mix = require('laravel-mix'); mix.js('...i element-ui -S 安装vant cnpm i vant -S 安装 babel-plugin-import 插件,babel-plugin-import 是一款 babel 插件,它会在编译过程中将...' 项目中使用 宽度为750px的设计图,由于rootValue: 37.5为基准,在写css时候设计图上文字大小多少像素就写多少像素即可 cnpm install axios --save 第二 laravel-mix
编写好 Sass 文件后,需要将其编译为 CSS 文件才能在项目中使用,为此我们需要安装相应的编译工具,Sass 官方解释器通过 Ruby 编写,同时也有其他语言实现的版本,最常见的就是 C 语言实现的...libSass,NPM 扩展包 node-sass 就封装了对 libSass 的实现,所以我们可以通过安装这个前端扩展包来编译 Sass 文件,不过在 Laravel 项目中,开箱提供了 Laravel...Mix 进行前端资源的编译,当我们通过 npm install 安装 laravel-mix 的过程中,系统会自动安装 laravel-mix 声明的依赖,其中就包括了编译 Sass 所需要的 node-sass...,我们无需再额外安装这个扩展包,这些事情 Laravel Mix 在底层默默帮我们完成了。...Mix 编译的时候将其编译到指定的 CSS 文件中。
下载后解压到xampp 的htdocs文件(在这里我用的是xampp) ? 然后更改文件名为laravel ? 然后我们在网页输入 ?...目录七:storage 编译后的视图、基于会话、文件缓存和其它框架生成的文件 ? 目录八:text 应用测试相关文件 ? 目录九:vendor Composer 依赖模块 ?...PHPUnit 的配置文件 public 前端控制器和资源相关文件(图片、JavaScript、CSS) readme.md 项目介绍说明文件 resources 应用资源 resources/assets 未编译的应用资源文件...用于定义 Web 类型的路由(重点,大部分情况下本书会用到) server.php 使用 PHP 内置服务器时的 URL 重写(类似于 Apache 的 “mod_rewrite” ) storage 编译后的视图...storage/framework 目录被用于保存框架生成的文件及缓存 storage/logs 应用程序的日志文件 tests 应用测试相关文件 vendor Composer 依赖模块 webpack.mix.js
export default {} 注意,Vue 组件只支持 JavaScript 代码,不支持 Blade 语法,所以我们将对应的语法和指令做了移除和更新处理...> 移除了之前的 CSS 代码,将其改为通过编译后的外部文件引入...(Laravel Mix 会自动识别 Vue 组件中的 CSS 代码并将其编译到 app.css 文件中)。...最后我们引入了编译后的 app.js 文件,完成 Vue 组件的挂载和渲染。...编译完成后,再次访问应用首页,就可以看到新的由 Vue 组件驱动的欢迎页面: ?
预览并下载这个主题,或者通过 NPM 来下载安装: npm i startbootstrap-sb-admin-2 --save-dev 2、初始化前端资源文件 JavaScript 部分 安装完成后,...用于定义后台管理系统的样式代码,这里引入 SB Admin 2 提供的 Sass 源代码即可: @import "~startbootstrap-sb-admin-2/scss/sb-admin-2"; 通过 Laravel...Mix 编译前端资源 做好以上准备工作后,就可以在 webpack.mix.js 中将上述资源文件编译打包为对应的 JavaScript 和 Css 代码了: const mix = require(...'laravel-mix') // 编译前台资源 ... // 编译后台资源 mix.js('resources/js/admin.js', 'public/js/admin.js') .js...js/chart.js"> 完整视图模板代码可以在本项目 Github 仓库中获取:https://github.com/nonfu/master-laravel-code
在日常构建容器的场景中,经常会遇到在同一个容器中进行源码的获取,编译和生成,最终才构建为镜像。...不得不在同一个容器中,获取程序的源码和构建所需的一些生态工具 构建出的镜像甚至包含了程序源码和一些不必要的文件,导致容器镜像尺寸偏大 当然,还有一种稍微优雅的方式,就是我们事先在外部将项目及其依赖库编译测试打包好后...再来一个Laravel项目的多阶段构建( 自己加的内容) 第一阶段:使用compose安装PHP依赖 第二阶段:安装node,并安装前端依赖然后生成编译后的文件 第三阶段:拷贝PHP依赖及前端build.../var/www/html/mix-manifest.json 多阶段构建的好处不言而喻,既可以很方便地将多个彼此依赖的项目通过一个Dockerfile就可轻松构建出期望的容器镜像,并且不用担心镜像太大.../multi-stage-docker-builds-for-laravel
asset() 使用当前请求的scheme(HTTP或HTTPS)为前端资源生成一个URL: $url = asset('img/photo.jpg'); laravel自带了laravel-mix,用于对...app.asjduiik2l1323879dasfydua23.js, 即js原文件名+hash+.js后缀,因为中间的那个hash是随时会变化的,所以在页面引入js文件的时候,就不能写死文件的路径,而是使用mix...('app.js'),此时laravel会自动去匹配当前的app.js对应哪个app+hash+.js的文件(项目public目录下会有一个mix-manifest.json, 这里面保存了两者的对应关系...,每次打包静态资源的时候都会更新该文件)。
领取专属 10元无门槛券
手把手带您无忧上云