首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前后端分离探索——MVC 项目升级的一个过渡方案

传统 MVC 项目直接升级到前后端分离需要大量的时间与人力,在业务多变的阶段并不适合,所以便有了本文的过渡方案探索 路由先不分离,仍然采用 PHP 提供的路由 模板部分分离,原 PHP 模板,引入...v={{ time() }}"> 1 2 3 4 5 6 暂时找不到很好解决缓存的方案,所以统一不缓存 新建前端控制器 public/mix/resources/js/test/index.js...Mix 工具,这会节省大量前端配置时间 根目录新建文件 webpack.mix.js const fs = require('fs'); const mix = require('laravel-mix...9 10 11 # laravel-mix 配置 const path = require('path') const mix = require('laravel-mix') const rs_root.../resources/js 文件夹可以删掉了,编译后的总文件大小约 2.5 M 至此,优化完成,完美解决了开发流程的痛点 # 后记 目前仍在不断地探索

1.2K20

Laravel Mix 初探

Laravel 上面的安装 Laravel 5.4 以上默认已经安装了 Laravel Mix开发机配置了node 和 npm的基础上,仅仅只需要运行下面的命令即可安装: npm install...配置 Laravel Mix 现在在根目录下就应该可以看到一个webpack.mix.js文件,他是 Laravel Mix 的配置文件,和我们平时看到的 webpack.config.js 长得不太一样...现在,当你修改webpack.mix.js文件监控下的静态资源或者 Laravel 的 PHP 文件时,浏览器会即时刷新页面以响应你的更改。...| |__resorces/ | |__scripts/ # 源JS文件 | |__styles/ # 源Sass文件爱你 | |__src/ # 我们希望将文件夹“按原样”复制到公共目录文件夹...| package.json webpack.mix.js 接下来写一个简单的 Laravel Mix 配置文件, webpack.mix.js let mix = require('laravel-mix

4.3K60

引入 Laravel Mix 管理前端资源

引言 到目前为止,我们还是使用很原始的方式引入前端资源文件 —— 特定目录下存放完整的 CSS、JavaScript 文件,然后 HTML 文档静态引入。...API 帮助我们对 CSS 和 JavaScript 资源文件进行预处理,细节可参考 Mix 官方文档。...虽然该项目是针对 Laravel 框架开发的,不过,由于是一个纯前端项目,因此可以适用于所有 Web 前端项目,现在,我们就来博客项目中引入 Laravel Mix 管理前端资源。...安装 Laravel Mix 开始之前,需要先安装 Laravel Mix 组件需要的前端相关依赖,假设你的系统上已经安装过 Node 和 NPM 包管理器,如果没有安装的话前往 Node.js 官方下载页面...这样一来,我们就可以项目中基于 Laravel Mix 管理前端资源了。 下篇教程,我们将基于 Laravel Mix 为博客项目替换主题。 (全文完)

1.6K20

让 F5 歇一会儿——laravel-mix 自动刷新之道

因为近几年来大部分时假Laravel 打交道,使用 laravel-mix 已成家常便饭,所以想着总结并分享一下 laravel-mix 工作流的自动刷新之道。...安装依赖 yarn add -D browser-sync browser-sync-webpack-plugin webpack.mix.js 文件调用 mix.browserSync() 启动... 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

2.3K20

Laravel运行Gulp任务的利器(一) —— Laravel Elixir简介及入门教程

本节,我们会展示如何创建并执行与Laravel应用紧密结合的Elixir任务,但在这之前,可能很多人还不太了解什么是Gulp,所以我们将从这里开始,逐一为你解开Elixir的面纱。...2、安装Elixir Laravel 5 安装完成后项目根目录下自动包含了一个名为 package.json 的文件,该文件内容如下: { "devDependencies": {...你可以使用如下命令本地安装这两个包: $ npm install 安装完成之后,你会看到项目根目录下新增了一个 node_modules 文件夹,文件夹内包含了我们刚刚安装的 gulp 和 laravel-elixir...文件,可以看到一个Gulp任务示例: elixir(function(mix) { mix.less('app.less');}); mix.less 任务可以用于编译Less文件本例文件名为...你可以通过项目根目录下运行 gulp 命令来执行定义 elixir 方法的任务: $ gulp [13:16:18] Using gulpfile ~/Software/dev.todoparrot.com

2K91

Homestead + laravel-mix 环境下 hmr 的两种玩法

对于 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...就我个人而言,通常使用第二种,主要原因有二: 一是出于性能/延迟方面的考虑,因为虚拟机中使用轮询(poll)的方式来监听文件变化,当 poll 设置间隔较大时可能会出现一定延迟,而设置太小轮询太频繁则又可能造成一定的性能压力...(虽然可以考虑宿主机全局安装依赖,但诸如 eslint-config-xxx 之类的项目相关的包也全局安装,必然造成混乱) 如同学习很多其它新工具新玩法一样,刚开始折腾 laravel-mix 时总是磕磕绊绊

1.6K10

Laravel 项目中使用 webpack-encore

看过我之前写过的博客的应该知道我一直是 laravel-mix 的死忠粉,有好几篇文章都是关于它的。每每提到 laravel-mix 时更是不吝溢美之词。...安装依赖 首先当然是安装依赖 yarn add -D @symfony/webpack-encore 需要注意的是,webpack-encore 没有像 laravel-mix 那样自己内部依赖 vue-tempplate-compiler...配置 webpack 项目根目录下新建一个 webpack.config.js 文件并在其中配置 webpack-encore 功能(实际上它最终也是一个标准的 webpack 配置文件),以最基本的玩法为例...(scripts) 因为 laravel 项目默认 package.json develop 等相关的脚本都是使用 laravel-mix 的,为了方便日常开发,现在要对它们进行一些调整,改用 webpack-cocore...当然,更为重要的是,mix4 里因为一些 bug 而无法使用的功能, encore 里却正常,如 dynamic import。

2.1K20

Laravel系列7.8】广播系统

而在这们日常的使用,其实更多的会使用 redis+socket.io 这种搭配。不过问题就来了, Laravel8 相关的文档,关于 redis 和 socket.io 的内容基本上没了。...初始化时选项的内容都是很简单的英文啦,相信各位大佬的英文水平是没问题的。然后我们找到在当前目录下生成的 laravel-echo-server.json 文件,修改 devMode 为 ture 。...在这个文件,已经包含了一套注释的 Echo 配置,我们需要打开注释并修改成下面这样。...修改完成之后,我们需要使用 Laravel 默认的 mix 工具来编译一下前端代码,最后需要加载的文件实际上是 public/js/app.js ,直接使用下面的命令行进行编译即可。...具体的页面,我们直接去调用它的 channel() 方法,给一个指定的频道名称,然后监听这个频道的具体事件,也就是我们 Laravel 定义的事件类名。

2.2K20

webpack多页面开发与懒加载hash解决方案

项目类型 1.1 常规单页面项目 常规单页面符合以下条件: 可以存在多个js文件和css文件; 每个js文件都是同步打包的,也就是说不存在与主文件相关联的懒加载文件。...但是在对script.src赋值时,webpack有以下三个概念需要知晓: chunkId,对应上述代码的"1"和"2"; chunkName,对应上述代码的"a"和"b"; chunkHash,对应上述代码的...[chunkhash].js的hash值是写死main.app.[chunkhash].js的。按照之前的编译结果,part.a.[chunkhash].js的hash变了,但是main.app....结合上篇文章webpack的hash与chunkhash的区别以及各自的应用场景,webpack-md5-plugin是chunk-hash钩子函数替换了chunkhash,那么webpack执行...所以,style文件的修改不影响最后的[hash]值。 乍看起来,以上方案是可以解决我们的问题的。但是大家请考虑这种场景:如果项目中存在不止一个js文件呢?

1.3K80

通过 Laravel 创建一个 Vue 单页面应用(一)

我们这里将要使用 history 模式,也就是说我们需要配置一个 Laravel 路由来匹配所有用户 SPA 页面可以进入的 URL。...举个例子, 如果用户浏览器刷新了 /hello 这个路由,我们 (Laravel) 需要匹配到它并返回对应的 Vue 模板。Vue Router 将会识别该路由并渲染对应的 Vue 页面组件。...我一般会把路由定义一个单独的路由模块,然后再引入主应用文件,但这里为了简便,我会直接在应用文件(app.js)定义这些路由。...服务器端 我们使用带有 Vue SPA 的 Laravel 应用程序框架,可以很方便的我们的应用程序构建服务端 API。...但这个应用仍有很多功能需要我们在后续的教程来实现: 在前端定义一个 404 路由 使用路由参数 子路由 组件Laravel 发起一个 API 请求 可能还有很多,但我不准备全部列在这里...

4.2K20

将博客主题替换成 Clean Blog

js 文件变成最终可以引入到 HTML 文档的文件,还需要在 blog 根目录下新建 webpack.mix.js,通过 Laravel Mix 来编译打包这些预处理 js 文件: const mix...= require('laravel-mix') mix.js('resources/js/app.js', 'public/js'); 上述代码的含义是引入 Laravel Mix,然后通过它提供的...然后 webpack.mix.js 补充对应的处理逻辑: const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public...5、编译前端资源文件 完成以上编码后就可以项目根目录下执行 npm run dev 编译打包前端资源了: ? 编译成功后,就可以 public 目录下看到对应的新文件了: ?...接下来,就可以视图模板引入新的资源文件了,不过在此之前,我们需要基于 Clean Blog 对原来的视图模板进行重构。

72420

laravel asset()函数

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, 这里面保存了两者的对应关系...,每次打包静态资源的时候都会更新该文件)。...而有些时候我们并不希望静态资源的名称中被加上hash值(大部分情况是独自引入的非nodejs模块的第三方库),这个时候就可以直接使用asset方法,它就是直接简单粗暴地找你给它名称的文件咯。

46810
领券