首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Laravel Mix从子文件夹中缩小js文件

Laravel Mix是一个前端构建工具,它提供了一种简单的方式来编译、合并和压缩前端资源文件。它基于Webpack,可以帮助开发人员更高效地管理和优化前端资源。

当需要从子文件夹中缩小js文件时,可以按照以下步骤进行操作:

  1. 在Laravel项目中,打开webpack.mix.js文件,该文件位于项目根目录下。
  2. 在该文件中,可以使用mix.js()方法来指定需要缩小的js文件路径。例如,如果要缩小位于"resources/js/subfolder/app.js"的文件,可以使用以下代码:
代码语言:javascript
复制
mix.js('resources/js/subfolder/app.js', 'public/js');

上述代码中,第一个参数指定了要缩小的js文件路径,第二个参数指定了缩小后的输出路径。

  1. 运行以下命令来执行Laravel Mix的编译任务:
代码语言:bash
复制
npm run dev

上述命令将会执行webpack.mix.js文件中定义的编译任务,并将缩小后的js文件输出到指定的路径。

总结:

Laravel Mix是一个强大的前端构建工具,可以帮助开发人员更高效地管理和优化前端资源。通过使用mix.js()方法,并指定需要缩小的js文件路径,可以从子文件夹中缩小js文件。这样可以提高前端资源的加载速度和性能。

腾讯云相关产品推荐:

  • 云服务器(CVM):提供弹性计算能力,可用于部署和运行应用程序。
  • 云存储(COS):提供高可靠、低成本的对象存储服务,适用于存储和管理各类非结构化数据。
  • 云数据库MySQL版(CMYSQL):提供高性能、可扩展的关系型数据库服务,适用于存储和管理结构化数据。
  • 人工智能机器学习平台(AI Lab):提供丰富的人工智能算法和工具,帮助开发人员构建和训练自己的机器学习模型。

更多腾讯云产品信息和介绍,请访问腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Laravel Mix 初探

配置 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...每次都要手动打版本号确实让人不太爽,但是你可以使用 Laravel Mix de version() 它会自动为所有编译文件文件名附加一个唯一的哈希值,从而实现更方便的缓存清除功能: mix.js('

4.3K60

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

你可以使用如下命令本地安装这两个包: $ npm install 安装完成之后,你会看到项目根目录下新增了一个 node_modules 文件夹,在该文件夹内包含了我们刚刚安装的 gulp 和 laravel-elixir...3、Elixir快速入门 创建第一个Elixir任务 Laravel项目包含了一个默认的 gulpfile.js ,该文件定义了Elixir版的Gulp任务。...在该文件,可以看到一个Gulp任务示例: elixir(function(mix) { mix.less('app.less');}); mix.less 任务可以用于编译Less文件,在本例文件名为...,接下来,编辑 gulpfile.js 文件如下: elixir(function(mix) { mix.less('app.less'); mix.coffee();}); 此外,你还可以直接使用方法链到命令上...在 js 目录可以找到 test.js ,其中包含如下代码: (function() { alert("Hello world"); }).call(this); 其他Elixir任务 Less

2K91

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

传统 MVC 项目直接升级到前后端分离需要大量的时间与人力,在业务多变的阶段并不适合,所以便有了本文的过渡方案探索 路由先不分离,仍然采用 PHP 提供的路由 模板部分分离,在原 PHP 模板,引入...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 至此,优化完成,完美解决了开发流程的痛点 # 后记 目前仍在不断地探索

1.2K20

引入 Laravel Mix 管理前端资源

引言 到目前为止,我们还是使用很原始的方式引入前端资源文件 —— 在特定目录下存放完整的 CSS、JavaScript 文件,然后在 HTML 文档静态引入。...API 帮助我们对 CSS 和 JavaScript 资源文件进行预处理,细节可参考 Mix 官方文档。...安装 Laravel Mix 开始之前,需要先安装 Laravel Mix 组件需要的前端相关依赖,假设你的系统上已经安装过 Node 和 NPM 包管理器,如果没有安装的话前往 Node.js 官方下载页面...--progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies...这样一来,我们就可以在项目中基于 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 项目中使用 webpack-encore

看过我之前写过的博客的应该知道我一直是 laravel-mix 的死忠粉,有好几篇文章都是关于它的。每每提到 laravel-mix 时更是不吝溢美之词。...正所谓爱之深,责之切,在对 laravel-mix 表示失望之后,我翻出了自己 star 多时的另一包 webpack-encore,虽说很早就 star 了,但之前却没试用过它,可能也是因为对于 laravel-mix...配置 webpack 在项目根目录下新建一个 webpack.config.js 文件并在其中配置 webpack-encore 功能(实际上它最终也是一个标准的 webpack 配置文件),以最基本的玩法为例...自带的 mix() 函数更方便,只需要一个函数,就可以自动引入 vendor.js 和 app.js 了。...(scripts) 因为 laravel 项目默认 package.json develop 等相关的脚本都是使用 laravel-mix 的,为了方便日常开发,现在要对它们进行一些调整,改用 webpack-cocore

2K20

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

我在前几天刚写过的《让 F5 歇一会儿——laravel-mix 自动刷新之道》[1]中介绍了 laravel-mix 实现自动刷新的几种方法,其中就有涉及 hmr(Hot Module Replacement...1.vagrant ssh 连接虚拟机,进入项目目录后安装前端依赖 yarn install 2.在 webpack.mix.js 调整相关配置 使用 mix.Webpack() 配置 devServer...在虚拟机终端执行yarn run hot,然后在浏览器中使用绑定的测试域名(如:laravel.test)访问 34.修改 JS 等,自动编译后浏览器页面即自动更新 玩法二:使用宿主机的 Node...1.从宿主机终端进入项目目录并安装前端依赖 yarn install 2.webpack.mix.js 中使用 webpackConfig 进行配置 mix.webpackConfig({ devServer...修改 JS 等,自动编译后浏览器页面即自动更新 总结 两种方法并没有谁好谁坏之分,具体使用哪种方法视具体场景及个人喜好而定。

1.6K10

引入 SB Admin 2 作为后台管理系统主题

Mix 编译前端资源 做好以上准备工作后,就可以在 webpack.mix.js 中将上述资源文件编译打包为对应的 JavaScript 和 Css 代码了: const mix = require(...'laravel-mix') // 编译前台资源 ... // 编译后台资源 mix.js('resources/js/admin.js', 'public/js/admin.js') .js...datatables.net-bs4/css/dataTables.bootstrap4.css', 'public/css/table.css'); 运行 npm run dev 之后,我们就可以在视图模板引入对应的前端资源文件了...为了简化操作和演示流程,我们直接拷贝 SB Admin 2 仪表盘视图 HTML 代码(位于 node_modules/startbootstrap-sb-admin-2/index.html),然后将其中的前端资源文件调整为本博客项目的资源文件路径...Github 仓库获取:https://github.com/nonfu/master-laravel-code/blob/v1.1/practice/blog/resources/views/admin

4.1K10

Laravel框架下载,安装及路由操作图文详解

这里我们要注意的是,我把laravel解压到了一个名为PHPprimary的文件夹里,你们如果是直接解压到htdocs里则只需在127.0.0.1:8000后面输入/laravel/public,若正常显示图片里的...Laravel | 5则表示安装成功 NO.2Laravel核心目录文件介绍 这个是为了帮助你们理解以后在运用Laravel框架时候代码如何存放,然后说明一点,我这是5.2版本的Laravel。...里面还有些具体的文件介绍请附录:laravel目录结构介绍 这里我就不做多介绍了 NO.3 Laravel路由 路由的使用 首先,我们要先打开Laravel目录的app目录,再点击APP目录里的http...好了,到这里,我们的路由已经讲完了 附录:laravel目录结构介绍 文件夹名称 简介 app 应用程序的业务逻辑代码存放文件夹 app/Console 存放自定义 Artisan 命令文件 app...vendor Composer 依赖模块 webpack.mix.js Laravel 的前端工作流配置文件 yarn.lock Yarn 依赖版本锁定文件 .gitignore 被 Git 所忽略的文件

4.5K51

创建并运行一个新的 Laravel 项目

database:存放数据库迁移和填充类文件 public:Web 应用入口目录,用于存放入口文件 index.php 及前端资源文件(CSS、JS、图片等) resources:用于存放与非 PHP...资源文件,如视图模板、语言文件、待编译的 Vue 模板、Sass、JS文件 routes:项目的所有路由文件都定义在这里 storage:用于存放缓存、日志、上传文件、已经编译过的视图模板等 tests...:Composer 配置文件 webpack.mix.jsLaravel Mix Webpack 配置文件,用于编译和打包前端资源 package.json:配置前端资源依赖和脚本(类似于 composer.json...这些配置文件都会返回一个数组,数组的每个值都可以通过配置键获取(配置键以配置文件名为前缀,以「.」号分隔数组层级),例如,如果你在 config/services.php 定义了如下配置: // config...如上例所示,所有的因环境而异的变量配置值(尤其是敏感信息)都应该存放到根目录下的 .env 环境变量文件: SPARKPOST_SECRET = xyj_laravelacademy.org 然后在配置文件通过

6.7K30

laravel + passport + vue安装过程遇到的麻烦

1、 Conclusion: don't install laravel/ui v2.4.1 Conclusion: remove laravel/framework v6.18.40 laravel...~~app.js就应该放在.blade.php文件里,但同时改文件里面也有vue写法,说明引入app.js后就可以使用vue语法了(即使用.blade.php文件来写也可以)?...(好像对,文件太大一个都够慢了) 那登录界面不加载spp.js,在其他真正的首页加载不就OK了?但是为啥删掉app.js就没有好看的样式了呢?...---- 样式(丑不丑)取决于css/app.css文件 app.js应该是vue.jslaravel里使用的时候,必须这样做的一个打包文件(囊括了普通vue项目的所有文件)吧!...--config=node_modules/laravel-mix/setup/webpack.config.js sh: node_modules/webpack/bin/webpack.js:

1.3K20
领券