在前端开发过程中，我们使用许多工具和框架来简化和加速开发过程。其中，构建工具是非常重要的，它们能够自动化处理复杂的任务，例如编译代码、压缩文件、自动刷新页面等等，使我们的开发过程更加高效和愉快。laravel-mix-temp 是一款基于 Laravel Mix 的前端构建工具，可以帮助我们轻松地构建 Web 应用程序。
安装
在开始使用 laravel-mix-temp 之前，我们需要安装 Node.js 和 npm，Node.js 可以在官网 nodejs.org 下载安装包进行安装。安装完成后，我们可以在命令行中使用 npm 命令。
npm install laravel-mix-temp --save-dev
安装完成后，我们可以在项目中的 node_modules 文件夹中找到 laravel-mix-temp。
配置
在安装完成 laravel-mix-temp 后，我们需要在项目中配置相关文件。我们可以在项目根目录下创建一个名为 webpack.mix.js 的文件，laravel-mix-temp 会根据这个文件配置构建任务。
const mix = require('laravel-mix');
const temp = require('laravel-mix-temp');
mix.setPublicPath('public');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.temp();在这个配置文件中，我们首先导入了 laravel-mix 和 laravel-mix-temp 两个模块。其中，laravel-mix 是在 laravel-mix-temp 基础上封装的更加方便的构建工具，我们在配置文件中使用 mix 对象暴露出的一些方法来配置构建任务，例如 js、sass、temp 等。
在这个配置文件中，我们使用 setPublicPath 指定了静态资源输出目录为 public。然后，我们通过 js 方法和 sass 方法指定了需要编译的 JavaScript 和 SCSS 文件，分别输出到 public 文件夹下的 js 和 css 目录。
最后，我们通过 temp 方法指定了需要使用 laravel-mix-temp 来处理 HTML 文件。在这个配置文件中，我们没有指定任何参数，laravel-mix-temp 将会遍历指定目录下的所有 HTML 文件，并根据默认模板生成新的 HTML 文件。如果我们需要对模板进行自定义，可以传递一个配置对象作为参数。
HTML 模板
我们在项目中定义的 HTML 文件一般都包含典型的 head 和 body 两个标签。使用 laravel-mix-temp，我们可以抽离 head 和 body 标签，将它们定义在模板中，使得 HTML 文件更加简洁易读，同时也实现了模板的复用。
在 laravel-mix-temp 中，我们可以使用 temp 方法来为每个 HTML 文件指定使用的模板。模板文件位于项目中的 resources/views/layouts 目录下，默认模板文件名为 app.blade.php，可以根据需要进行自定义。在模板文件中，我们可以使用 @yield 指令定义需要动态插入的内容，在 HTML 文件中，我们可以使用 @extends 指令引入指定的模板。
例如，我们可以在项目的 resources/views/layouts/app.blade.php 文件中定义模板：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------------
----- --------------- ---------------------------- -------------------
----- ---------------- -------- ------------------ ----
--------------
-------
------
--------------
------- ------- ---------------- -------------
-------
-------在 HTML 文件中，我们可以使用 @extends 指令来引入模板：
-- -------------------- ---- -------
-----------------------
----------------- ----- ------
----------------
----- ------------------ ---------------- -- -- ---------
-----------
----------------
---------- -----------
------- -- -- ------------
-----------在这个 HTML 文件中，我们使用 @extends 引入了 layouts.app 模板，同时在 @section('title')、@section('head') 和 @section('body') 中定义了需要插入的内容。在实际使用中，我们可以定义多个模板，在 HTML 文件中选择需要使用的模板，实现模板的复用。
示例代码
const mix = require('laravel-mix');
const temp = require('laravel-mix-temp');
mix.setPublicPath('public');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.temp();-- -------------------- ---- -------
-----------------------
----------------- ----- ------
----------------
----- ------------------ ---------------- -- -- ---------
-----------
----------------
---------- -----------
------- -- -- ------------
------------- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------------
----- --------------- ---------------------------- -------------------
----- ---------------- -------- ------------------ ----
--------------
-------
------
--------------
------- ------- ---------------- -------------
-------
-------总结
laravel-mix-temp 是一款基于 Laravel Mix 的前端构建工具，可以帮助我们轻松地构建 Web 应用程序。使用 laravel-mix-temp，我们可以实现模板的复用，将 head 和 body 标签抽离到模板文件中，使得 HTML 文件更加简洁易读。同时，laravel-mix-temp 还支持自定义模板，提供了更大的灵活性和扩展性。在项目中使用 laravel-mix-temp，我们可以更加高效地进行开发，缩短开发周期，提高生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0bc7