Symfony 4，包括来自供应商目录的资产答案

【问题标题】：Symfony 4, include assets from vendor directorySymfony 4，包括来自供应商目录的资产
【发布时间】：2018-07-06 05:21:07
【问题描述】：

我想从我的树枝模板加载供应商资产，用供应商目录中的作曲家下载。

使用相对路径是一种解决方案（在此示例中，我将包含引导 css，但同样的问题适用于 composer 所需的任何其他库，如 jQuery、jQueryUI 等）

<link rel="stylesheet" href="{{ asset('../vendor/twbs/bootstrap/dist/css/bootstrap.min.css') }}" >

Symfony 文档建议使用 assets:install 来生成从供应商目录到公共目录的符号链接，但我无法理解它是如何工作的。 assets:install -h 不太清楚，无法让我了解如何将特定供应商路径链接到公共目录。

用

创建一个simlink

ln -s /path/of/vendor/lib /path/public/dir

工作正常，但是每次我使用 composer 查找更新时，创建的符号链接都会被删除。

对包含来自供应商目录的资产的“最佳实践”有任何想法吗？

谢谢

【问题讨论】：

您对assets:install 有任何问题吗，因为这是最佳做法，只需运行该命令即可将所有资产放入您的公共目录
你在你的项目根目录中以bin/console assets:install运行它
对不起，你能解释一下它是如何工作的吗？那是命令控制台 assets:install public --symlink 我已经在 bootstrap 的 vendor 目录（dists 子目录）中使用了它那就是输出：尝试将资产安装为绝对符号链接。 [OK] 任何包都没有提供任何资产。
我从 netbeans，从控制台运行它。我能够执行 che 命令，问题是我无法理解如何解释运行该命令的“请链接 vendor/twbs/bootstrap/css ---> public 目录”，正如我所写的那样，报告了这个输出：尝试将资产安装为绝对符号链接。 [OK] 任何包都没有提供任何资产。
我认为，没有人能够为这个问题提供正确的答案。因为@kunicmarko20 只写了symfony 官方文档关于资产安装的报告，而且我没有要求复制/粘贴官方文档。无论如何，webencore pack 可能是一个很好的解决方案，而不是通过 composer 加载资产。 symfony.com/doc/current/frontend/encore/bootstrap.html我仍然想了解这样做的“最佳方法”是什么，而不是使用“正常工作”的东西......

标签： php symfony twig composer-php bootstrap-4

【解决方案1】：

在“最佳实践”方面，我通常使用npm 和gulp 或类似的东西，生成分发的css和js文件，输出到public/中的指定文件。

这是最近项目package.json文件中的一个示例

{
  "devDependencies": {
    "bootstrap": "^4.1.3",
    "gulp": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-sass": "^3.1.0"
  },
  "scripts": {
    "compile:styles": "gulp styles"
  }
}

宁可运行npm install --save-dev bootstrap gulp gulp-concat gulp-sass 以获取最新版本等。

你也需要这个gulpfile.js


var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');

gulp.task('styles', function(){
    return gulp
        .src([
            'app/Resources/sass/main.scss',
            ])
        .pipe(sass({outputStyle:'compressed', includePaths: ['node_modules']}).on('error', sass.logError))
        .pipe(concat('styles.min.css'))
        .pipe(gulp.dest('public/css'));
    });

设置完成后，您可以从控制台运行npm run compile:styles，app/Resources/sass/main.scss SASS 文件将被预处理、缩小并输出到public/css/styles.min.css。

请注意，gulp 文件包含 node_modules 文件夹，因此您可以在 main.scss 文件中导入引导程序，例如

$primary: #55a367;

@import 'bootstrap/scss/bootstrap';

来自树枝模板：

<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.min.css') }}">

我通常同时提交main.scss 和styles.min.css

【讨论】：

【解决方案2】：

您不能告诉assets:install 链接和任意供应商目录的原因是该命令旨在遍历已安装捆绑包的列表并链接一个众所周知的目录 (Resources/public) 目录，如果它存在。它依赖于短包名称和现有目录，因此它只能与 symfony 包一起使用，不支持其他库，如 bootstrap 或 jquery。（链接到当前command source）。

现在推荐的处理前端库的方法是encore。

在不可能的情况下，您可以使用composer scripts。我不会将此称为“最佳实践”，最终可能会带来更多麻烦，但您可以考虑这样做。

您将创建一个 shell、php 脚本或控制台命令，基本上复制 assets:install 的功能以链接您的库资产。安装新库时仍需要手动更新脚本，但可以将其配置为在安装或更新软件包后自动运行。

将这个简单的示例 bash 脚本复制到您的项目目录中，将其命名为 install_vendors.sh：

#!/bin/bash

BASE_PATH=`pwd`
PUBLIC="public"

if [ "$1" != "" ]; then
    PUBLIC=$1
fi;

PUBLIC=${BASE_PATH}/${PUBLIC}/vendor
VENDOR=${BASE_PATH}/vendor

rm $PUBLIC -rf
mkdir $PUBLIC

function link_asset
{
    SOURCE_DIR=${VENDOR}/$1
    TARGET_DIR=${PUBLIC}/$2
    ln -s $SOURCE_DIR $TARGET_DIR
}

link_asset twbs/bootstrap/dist bootstrap

将其添加到composer.json 的scripts 部分和auto-scripts：

"scripts": {
    "vendors:install": "bash install_vendors.sh",
    "auto-scripts": {
        "cache:clear": "symfony-cmd",
        "assets:install %PUBLIC_DIR%": "symfony-cmd"
        "@vendors:install"
    },
    // ...
}

您也可以随时使用composer run vendors:install执行它。

然后将它们包含在您的 twig 文件中：{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}。

【讨论】：