如何将composer的vendor文件夹中的CSS和JS文件复制到public？ [英] How to copy the CSS and JS files in vendor folder of composer to public?

问题描述

我刚刚开始学习几个PHP框架。我尝试的例子都使用 composer ，我以前没有使用，所以事情对我来说还不完全清楚。

我在 composer.json 中指定了一些JS和CSS库，并运行 composer install 。
现在这些库已添加到供应商文件夹中。

现在我应该如何使用JS和CSS文件，例如 bootstrap / dist / css / bootstrap.min.css ？
我试过的例子只是在 public / css 文件夹中有一个副本，或使用远程链接，如< link href = //netdna.bootstrapcdn.com/bootswatch/2.3.1/united/bootstrap.min.css =stylesheet> 在伏 -file。

由于某种原因，我不喜欢这样的远程链接在我的应用程序（恐怕他们可能' 。
但是另一个选项也不是很漂亮，我想，因为我仍然需要选择正确的文件从供应商复制到 public 。

这不是一种自动的方式吗？或者可以将其指定到控制器，然后将其复制到 public ？

解决方案

Composer是为获取PHP依赖而编写的。
它不能与其他网络资源（如CSS或JS文件）一起使用。

Composer Asset Plugin

为了解决获取资源的问题，Composer资源插件是由FrançoisPluchino（fxp）开发的。它为Composer提供了一个NPM / Bower依赖项管理器。它是这些依赖管理器的桥梁，并将提取的东西放入供应商文件夹。

请记住，您可以直接使用Bower或NPM。
使用composer.json中定义的Composer提取PHP依赖项。
使用bower.json中定义的Bower获取您的资源。
这可能是一种更清洁的方法。

文档 - Packagist

您可能需要从CLI： composer require fxp / composer-asset-plugin

例如，要获取资源Twitters Bootstrap和Jquery：

  {
require：{
bower-asset / bootstrap：dev-master，
bower-asset / jquery-2.1.0： 2.1.0
} 
} 
  

某些框架为资产提供自定义处理程序，主要是支持他们各自的文件夹布局，并将东西从vendor文件夹复制到正确的地方。我不知道Phalcon是否有东西获取资产。

这不是一个自动的方法吗？

复制资源从供应商文件夹到您的应用程序布局中的正确位置是另一个故事。

没有自动的方法。你必须自己提供的机制。

例如，您可以将供应商的安装路径更改为 public / assets 或某些东西，
请参阅 https://github.com/francoispluchino/composer-asset-plugin/blob/master/Resources/doc/index.md#define-a-custom-directory-for-the-assets-installation

插件不会复制任何东西。

strong>（简要：用Bower获取资源，用Grunt复制）

最接近指定控制器的是设置 Grunt 任务仅将与Bower有关的相关内容从 web / assets / vendor 复制到 web / assets / app 文件夹。

换句话说：即使像Bower这样的JS软件包管理器也不会自动复制主API文件。 Bower会将最新的jQuery版本提取到定义的供应商文件夹中，但不会自动将 jquery.min.js 复制到 web / assets / js /jquery.min.js 。你需要一个任务。

I'm just starting to learn several PHP frameworks. The examples I tried all use composer, which I have not used before, so things are not exactly clear to me yet.

I specified some JS and CSS libraries in composer.json and ran composer install. Now these libraries are added to the vendor folder.

Now how am I supposed to use the JS and CSS files that are in those folders, for example bootstrap/dist/css/bootstrap.min.css ? The examples I tried either just have a copy in the public/css folder or use a remote link, like <link href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/united/bootstrap.min.css" rel="stylesheet"> in a volt-file.

For some reason I don't like remote links like these in my application (I'm afraid they could be 'down' some day). But the other option is not very beautiful as well, I think, since I still have to pick the right files to copy from vendor to public.

Isn't there an 'automatic' way to do this ? Or maybe by specifying it into a controller, which then copies the files it into public ?

解决方案

Composer was written to fetch PHP dependencies. It doesn't play well with other web assets, like CSS or JS files.

Composer Asset Plugin

To address the problem of fetching assets a Composer Asset Plugin was developed by François Pluchino (fxp). It provides a NPM/Bower dependency manager for Composer. Its a bridge to these dependency managers and will fetch the stuff into the vendor folder.

Keep in mind that you can always use Bower or NPM directly. Fetch your PHP dependencies with Composer defined in composer.json. Fetch your assets with Bower defined in bower.json. It might be a cleaner approach.

Documentation - Packagist

You might require it from the CLI: composer require fxp/composer-asset-plugin

For example, to fetch the assets "Twitters Bootstrap" and "Jquery":

{
    "require": {
        "bower-asset/bootstrap":     "dev-master",
        "bower-asset/jquery-2.1.0":  "2.1.0"
    }
}

Some frameworks provide custom handlers for assets, mainly to support their individual folder layout and copy things into the correct places from the vendor folder. I don't know if Phalcon has something to fetch assets.

Isn't there an 'automatic' way to do this ? Or maybe by specifying it into a controller, which then copies the files it into public ?

Copying assets from the vendor folder into the correct spot in your application layout is another story.

There is no automatic way of doing this. You have to provide the mechanism yourself.

For instance, you might alter the installation path from vendor to public/assets or something, see https://github.com/francoispluchino/composer-asset-plugin/blob/master/Resources/doc/index.md#define-a-custom-directory-for-the-assets-installation

The plugin doesn't copy things around.

Bower + Grunt (brief: fetch assets with Bower, copy stuff around with Grunt)

The closest to "specifying a controller" would be to setup a Grunt task to copy only relevant stuff fetch with Bower from web/assets/vendor to web/assets/appfolder.

In other words: not even a JS package manager like Bower provides automatic copying of main API files. Bower would fetch the latest jQuery version into a defined vendor folder, but it won't automatically copy jquery.min.js into web/assets/js/jquery.min.js. You need a task on top of it.

这篇关于如何将composer的vendor文件夹中的CSS和JS文件复制到public？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！