如何在Symfony 4中处理资产

Question

我正在构建一个应用程序,Symfony 4我想遵循Web资产的最佳实践.我使用Encore/Webpack for SCSS和JS,它运行良好; 生成的JS + CSS很好地存储在/ public/build文件夹中.我坚持如何存储和使用静态资产,如图像,电影,声音.

图像应该存储在"公共/图像"文件夹还是"资产/图像"中？

还有一些后续问题:

如果存储图像public/images,如果我通过asset('...')电话污染模板,我会获得任何好处吗？

如果图像存储在assets/images,则:

• 他们是如何public/images通过http服务的？./bin/console assets:install什么也没做,说:'[OK]没有资产是由任何捆绑提供的..
• 我如何在SCSS中使用它们？通过相对路径？

问候,

Answer 1

图像应该存储在"公共/图像"文件夹还是"资产/图像"中？

所有内容都public/可以通过浏览器获得.在这里,只应制作生产准备和建造物品.由于您的图像不需要任何处理(我假设),您可以(应该)确实将图像放在那里.

现在,假设您需要进行一些处理(例如丑陋的JPEG压缩),您可以将图像放入assets/,进行一些处理,然后只放入已处理的图像public/.

如果图像存储在公共/图像中,如果我用资产('...')调用污染模板,我会获得任何好处吗？

是的,asset()与Encore或资产构建管理没有任何关系.它唯一能做的就是修复您的网址.这意味着如果您将应用程序移动到服务器上的子目录(example.com/app/),URL将自动适应.在Asset组件文档中阅读更多相关信息.

Answer 2

使用asset()Symfony 4中的方法引用图像的另一个好方法是在public/build使用Encore构建资产时复制图像。

在Webpack Encore中使用copyFiles（）

Webpack Encore提供了在公共目录上复制图像以允许asset()访问这些文件的功能：copyFiles（）。

在你的 webpack.config.js

Encore.
...
.copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[ext]',
        pattern: /\.(png|jpg|jpeg)$/
    })

错误：Encore.copyFiles不是可识别的属性或方法。

请确保您确实正在使用，symfony/webpack-encore-bundle而不是 此处symfony/webpack-encore-pack所述。

composer require symfony/webpack-encore-bundle
composer remove symfony/webpack-encore-pack
yarn install
yarn upgrade
yarn run watch

我的 package.json

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.22.0",
        "bootstrap": "^4.1.3",
        "node-sass": "^4.10.0",
        "sass-loader": "^7.0.1",
        "url-loader": "^1.0.1",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}