無法理解laravel Mix在我的自定義js/css文件中工作

我是Laravel和整個框架的新手。無法理解laravel Mix在我的自定義js/css文件中工作

我確實（可能）瞭解如何通過laravel呈現頁面的一部分，但即使經過大量搜索，我也不明白laravel混合是如何工作的。

假設有一個頁面需要一個全球性的js和css庫（可讓指定的jQuery和引導）

而且頁面需要像someJsTools.js定製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混合和webpack機制的不正確理解。

問題2 - 如何管理所有不同的頁面和每種不同的情況？ 以上問題是否源於我的錯誤理解，我無法弄清楚我會（哪些部分）可能會導致頁面之間的差異。如果mix僅適用於通用的全局庫，那麼我只需手動加載自定義的js/css文件即可。我目前認爲這是不太可能的。

請別人幫我擺脫這種混亂。祝您有美好的一天。

來源

2017-07-23 GatesPlan

它完全基於您的要求。這取決於您如何定製您的資產文件。

例如：

jQuery的，角，引導，字體真棒爲所有的頁面上。所以我通常做的是。我將所有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，則產品。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>

來源

2017-07-28 04:55:26 laktherock

感謝laktherock。我在想，對於任何情況和錯誤，應該只有一個結果文件。 – GatesPlan

無法理解laravel Mix在我的自定義js/css文件中工作

回答

相關問題