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

Question

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

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

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

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

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

// 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 混合将所有 js 文件合并为一个文件，但我这里没有。

问题 1 - 一个文件做所有事情？ 如果 "mix" 确实是一个文件，那么这个文件如何单独处理所有这些不同的需求？我认为我的知识是错误的，这是因为我对 laravel 混合和 webpack 机制的不正确理解。

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

拜托，有人帮我摆脱这场混乱。祝你有个美好的一天。

Answer 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>

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

Can't understand laravel Mix works on my custom js/css files

javascript

jquery

css

laravel

laravel-mix