在 Laravel 5 中管理资产答案

【问题标题】：Manage assets in Laravel 5在 Laravel 5 中管理资产
【发布时间】：2015-02-07 10:03:46
【问题描述】：

有人可以解释在 Laravel 5 中管理资产的正确方法吗？例如，假设我想使用 bower 安装一些插件。据我所知，推荐的方法是将所有文件保存到/vendor/bower_components。所以我得到了一些带有插件的 css、一些图像、字体和 javascript 文件。

我还有一个“app.less”，我可以在其中导入我需要的所有内容，例如@import ('../../../vendor/bower_components/someplugin/somestyle.css')。虽然我的公共目录中没有 images/js/fonts 的问题。好的，我看到你可以使用 gulp copy 函数。但是，当插件数量越来越多时，我应该如何管理每个插件保存其图片或其他文件的位置？

其实我想试试语义化的ui。我已经用凉亭下载了它。我对语义 ui 一无所知，但是有一个带有语义 ui.css 的 dist 文件夹。还有一些带有themes/basic/assets/fonts 的字体文件。如果我只是将它复制到公开，它将是public/themes/basic/assets/fonts。然后我将语义-ui.css 导入到我的 app.les 中，它会找到必要的字体。如果我有一些其他的插件，管理它会变得难以忍受。

这个问题的典型工作流程是什么？最简单的方法就是将所有内容公开并使用<link> 和<script> 标签手动包含它，但这需要大量查询。

为什么不公开所有 bower_components 呢？类比作曲家，bower 没有自动加载器，所以资产很乱。

【问题讨论】：

标签： assets bower laravel-5

【解决方案1】：

您在推荐的放置 bower_components 的位置是正确的。不建议将 bower_components 放在公共目录中，因为它包含该特定包中的所有文件，而不仅仅是您需要包含在 HTML 中的文件。

由于您谈到 Laravel5，建议使用 laravel-elixir 来管理资产。 http://laravel.com/docs/5.0/elixir 它利用 gulp 并且可以编译 less、sass 或各种其他文件。我对语义 ui 没有任何经验，但它看起来类似于 bootstrap。如果 npmjs.org 上没有可用的 SaaS 或 Less 版本，您需要将必要的文件复制到您的公共目录。 Elixir 提供了一种将文件或整个目录从 bower_components 复制到公共目录的简单方法。

包含所有所需文件的最简单方法是使用 saas 或更少。

【讨论】：

好吧，如果 bower 依赖项包含应该可以从公共访问的图像/字体，我该怎么办？好的，我使用 gulp 复制它们，但 .css 文件包含这些图片/字体的路径。而且我不能随意移动它们，所以我的公共目录最终可能会像“public/plugin_1_assets/some_dir_structure/img”、“public/plugin_2_assets/img”或类似的东西？

【解决方案2】：

Personally what I do is this using node


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

var nodeDir = './node_modules/'; //This is the node directory(base directory) where all vendor files are downloaded in your case might be different 

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */
elixir(function(mix) {
mix the styles and copy fonts to my public/css folder

    mix.styles([
        'bootstrap/dist/css/bootstrap.css',
        'font-awesome/css/font-awesome.css'
    ], './public/css/app.css', nodeDir)
        .copy(nodeDir + 'font-awesome/fonts', 'public/fonts')
        .copy(nodeDir + 'bootstrap/fonts', 'public/fonts');

//mix javascript from node directory and output to public/js/ folder

    mix.scripts([
        'jquery/dist/jquery.js',
        'bootstrap/dist/js/bootstrap.js'

    ], './public/js/app.js', nodeDir); 


});

【讨论】：