无法理解 laravel Mix 适用于我的自定义 js/css 文件答案

【问题标题】：Can't understand laravel Mix works on my custom js/css files无法理解 laravel Mix 适用于我的自定义 js/css 文件
【发布时间】：2017-12-29 03:42:53
【问题描述】：

我是 Laravel 和整个框架的新手。

我确实（可能）了解部分页面如何通过 laravel 呈现，但即使经过大量搜索，我也不了解 laravel mix 的工作原理。

假设有一个页面需要全局 js 和 css 库（让我们指定 jQuery 和 bootstrap）

该页面还需要自定义 js 文件，例如 someJsTools.js。

简单来说，过去那些通过<script src="blah"></script> 和<link rel="blah" /> 在head 标签中引用的文件，我已经习惯了。在这个环境中，我所要做的就是逐页指定这些标签。

// pageA requires jQuery.js, bootstrap.css and one CUSTOM JS file imatrouble.js
<head>
    <link rel="stylesheet" herf="bootstrap.css"/>
    <script src="jquery.js"></script>
    <script src="imatrouble.js"></script>
</head>

//pageB requires jQuery.js, bootstrap.css and two custom js files.
<head>
    <link rel="stylesheet" herf="bootstrap.css"/>
    <script src="jquery.js"></script>
    <script src="imatrouble.js"></script>
    <script src="withimatroubleimadisasterlikewhateveryoucanimagine.js"></script>
</head>

PageA 和 PageB 都需要通用的 jQuery.js 和 bootstrap.css 文件。据我了解，laravel Mix 将所有的js文件合二为一，我这里没弄明白。

问题 1 - 一个文件做所有事情？ 如果确实将所有东西“混合”在一起作为一个文件，那么这个文件如何单独处理所有这些不同的要求？我认为我的知识是错误的，这是由于我对 laravel mix 以及可能是 webpack 机制的错误理解。

问题 2 - 我如何管理所有不同的页面和不同的情况？ 上述问题是否源于我的误解，我无法弄清楚我（将）做的哪一部分会导致页面之间的差异。如果 mix 仅适用于通用全局库，那么我所要做的就是手动加载自定义 js/css 文件。我目前认为这不太可能。

请有人帮我摆脱这种混乱。祝你有美好的一天。

【问题讨论】：

标签： javascript jquery css laravel laravel-mix

【解决方案1】：

这完全基于您的要求。这取决于您如何自定义资产文件。

例如：

Jquery、Angular、Bootstrap、Font Awesome 对您的所有页面都很常见。所以我通常做的是。我将所有 css 文件合并为一个文件，将所有 js 文件合并为一个。如下图..

CSS 混合

 elixir(function(mix) {
    mix.styles([
        "libraries/bootstrap.css",
        "libraries/font-awesome.min.css",
        "custom/default.css",
    ], 'public/assets/css/common.css');
});

JS 组合

elixir(function(mix) {
    mix.scripts([
        "libraries/jquery-1.10.2.js",
        "libraries/bootstap.js"
        "libraries/angular.js",
        "libraries/angular-animate.js",
        "custom/defaut.js"
    ], 'public/assets/js/common.js');
});

假设某些页面需要特定的依赖项[产品、订单...等]。例如如果产品页面需要 wow.js、product.js 和 wow.css,product.css

CSS 混合

 elixir(function(mix) {
    mix.styles([
        "libraries/wow.css",
        "custom/product.css",
    ], 'public/assets/css/product.css');
});

JS 组合

elixir(function(mix) {
    mix.scripts([
        "libraries/wow.js",
        "custom/product.js"
    ], 'public/assets/js/product.js');
});

所以最终的 laravel 混合文件如下所示

gulpfile.js

var elixir = require('laravel-elixir');

elixir.config.sourcemaps = true;

/**
 * Global CSS MIX
 */
 elixir(function(mix) {
    mix.styles([
        "libraries/bootstrap.css",
        "libraries/font-awesome.min.css",
        "custom/default.css",
    ], 'public/assets/css/common.css');
});

/**
 * Global JS MIX
 */
elixir(function(mix) {
    mix.scripts([
        "libraries/jquery-1.10.2.js",
        "libraries/bootstap.js"
        "libraries/angular.js",
        "libraries/angular-animate.js",
        "custom/defaut.js"
    ], 'public/assets/js/common.js');
});

/**
 * Product CSS MIX
 */
 elixir(function(mix) {
    mix.styles([
        "libraries/wow.css",
        "custom/product.css",
    ], 'public/assets/css/product.css');
});

/**
 * Product JS MIX
 */
elixir(function(mix) {
    mix.scripts([
        "libraries/wow.js",
        "custom/product.js"
    ], 'public/assets/js/product.js');
});

现在您的所有资产文件都已准备就绪。现在您需要在任何地方添加。

假设在您的主页上您只需要 common.js 和 common.css 文件。

homepage.blade.php

<head>
    <link rel="stylesheet" href="{{ asset('assets/css/common.css') }}"/>
    <script type="text/javascript" src="{{ asset('assets/css/common.js') }}"></script>
</head>

在产品页面上，您需要通用和产品资产文件依赖项。包括如下

product.blade.php

<head>
    <link rel="stylesheet" href="{{ asset('assets/css/common.css') }}"/>
    <link rel="stylesheet" href="{{ asset('assets/css/product.css') }}"/>
    <script type="text/javascript" src="{{ asset('assets/js/common.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/product.js') }}"></script>
</head>

【讨论】：

感谢 laktherock。我在想，任何情况下都应该只有一个结果文件，这是错误的。