Question

我是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 - 一个文件可以做任何事情吗？ 如果确实＆＃34;混合＆＃34;所有的东西都作为一个文件，然后这个文件如何能够单独处理所有这些不同的要求？我相信我的知识是错误的，而且是因为我对laravel mix和webpack机制的错误理解。

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

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

Answer 1

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

例如：

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

CSS mix

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

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');
});

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

CSS mix

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

JS mix

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文件

1 个答案: