我该如何在通过Composer下载后设置Bootstrap?

32

我是一个Composer的初学者,对它知之甚少,并且在Web应用程序开发方面经验也很少。

我正在阅读Nettuts+教程,关于Composer有一个基本问题。

{
  "require": {
    "laravel/framework": "4.0.*",
    "way/generators": "dev-master",
    "twitter/bootstrap": "dev-master",
    "conarwelsh/mustache-l4": "dev-master"
  },
  "require-dev": {
    "phpunit/phpunit": "3.7.*",
    "mockery/mockery": "0.7.*"
  },
  "autoload": {
    "classmap": [
      "app/commands",
      "app/controllers",
      "app/models",
      "app/database/migrations",
      "app/database/seeds",
      "app/tests/TestCase.php"
    ]
  },
  "scripts": {
    "post-update-cmd": "php artisan optimize"
  },
  "minimum-stability": "dev"
}

如果我按照上述方式设置我的composer.json文件,在执行composer install --dev之后,我该如何在Laravel项目中使用Bootstrap?
我的意思是,我可以看到Bootstrap包已经下载到了vendor目录。以前我只是从官方网站下载Bootstrap并手动放置在Laravel的public目录中,但这里应该怎么做呢?我能否将Bootstrap文件保留在原地,因为我想定期更新Bootstrap包至其最新版本?
谢谢。
7个回答

22
我们有工匠命令来发布资源(CSS、JS等)。像这样的东西应该可以工作。
php artisan asset:publish --path="vendor/twitter/bootstrap/bootstrap/css" bootstrap/css
php artisan asset:publish --path="vendor/twitter/bootstrap/bootstrap/js" bootstrap/js

我不确定路径是否正确,但这应该可以工作。


13
或者 php artisan asset:publish --path="vendor/twitter/bootstrap/dist/" bootstrap - madpoet
1
我可以把这个放在我的composer.json文件中吗? - briankip
@briankip,是的,你可以。请参考Antonio Carlos的回答。或者你也可以使用gulp和sass/scss来完成相同的操作。 - brainless
我不想为composer创建脚本文件,因为composer可以内联运行artisan命令,如果你知道我的意思,而不需要调用带有命令的脚本。 - briankip
@briankip Composer和Artisan命令并不是那么相似的东西...它们是两个不同的东西。建议尝试使用Gulp。 - brainless

17

正如教程所说,您需要将它复制到您的公共目录:

cp vendor/twitter/bootstrap/docs/assets/js/html5shiv.js public/js/html5shiv.js
cp vendor/twitter/bootstrap/docs/assets/js/bootstrap.min.js public/js/bootstrap.min.js

编辑:

你确实需要复制它们,因为你的资产文件应该只位于公共文件夹中,而Composer是将软件包放在供应商文件夹中的,这些文件夹不应该对外界可见

但你可以创建一个Composer的post-install-cmd:

{
    "scripts": {
        "post-update-cmd": "MyVendor\\MyClass::postUpdate",
    }
}

并使其在每次更新时为您复制这些文件。它可以使用PHP、bash或任何其他您可以在主机上运行的语言编写。文档:http://getcomposer.org/doc/articles/scripts.md


使用“composer update”获取Bootstrap的新版本后,我需要重新复制它们吗?我以为使用Composer可以获得一些自动好处。 - Artisan
6
为什么不只是对公共文件夹中已安装库的供应商文件夹进行符号链接... 然后你使用它就像参考而不是复制。 - LeviXC
时间和功能已经更新了 - composer 现在可以愉快地安装到许多框架的公共文件夹中。这个功能被称为 composer installers - Jason

9

我刚刚意识到php artisan asset:publish --path="vendor/twbs/bootstrap/dist/" bootstrap或者php artisan vendor:publish --path="vendor/twbs/bootstrap/dist/" bootstrap已经不再起作用。

对我有用的是编辑composer.json,在scripts下添加以下内容:post-update-cmd

"scripts": {
        "post-update-cmd": [
            "php artisan optimize",
            "mkdir -p public/bootstrap",
            "cp -R vendor/twbs/bootstrap/dist/ public/bootstrap/"
        ]}

1
请确保将此内容添加到 post-install-cmd 中,否则它只能在 composer update 而不是 composer install 后才能生效。 - Matthew Cawley
1
对于 Windows 操作系统,我需要使用以下命令:"if not exist public\\bootstrap mkdir public\\bootstrap", "xcopy /s /e vendor\\twbs\\bootstrap\\dist public\\bootstrap" - ourmandave

3

按照LeviXC所说,只需像上面那样创建符号链接即可:

{
    "scripts": {
      "post-update-cmd": "ln -sf vendor/twitter/bootstrap/dist/ public/vendor/bootstrap/"
    }
}

或者多个命令:

{
    "scripts": {
        "post-update-cmd": [
           "php artisan optimize",
           "ln -sf vendor/twitter/bootstrap/dist/ public/vendor/bootstrap/"
        ]
    },
}

这对我不起作用,它创建了一个符号链接到子文件夹,即它试图链接到 public/static/vendor/twbs/bootstrap/dist。但是如果我改为使用 ../../vendor... 它会返回一个错误。 - DisgruntledGoat

1
在Windows环境下,使用composer post update脚本(post-update-cmd)的解决方案可能是:
{
  "require": {
    "twbs/bootstrap": "4.3.1"
  },
  "scripts": {
    "post-update-cmd": [
      "RMDIR public\\assets\\bootstrap /S /Q" ,
      "XCOPY /E /I vendor\\twbs\\bootstrap\\dist public\\assets\\bootstrap"
    ]
  }
}

您将在 public\assets\bootstrap 文件夹中找到 Bootstrap 文件,可以直接导入 HTML 中使用。


0

这对我来说效果更好

"scripts": {
    "post-update-cmd": [
        "mkdir -p html/vendor/",
        "ln -sfr vendor/twbs/bootstrap/dist html/vendor/bootstrap"
    ]
},

"r"标志使符号链接变为相对路径,从而指向真实文件夹


0

我是 Laravel 和 Bootstrap 的新手(也是第一次同时使用它们),当遇到同样的问题时,我偶然发现了这个帖子。我创建了一个新的 Laravel 项目,然后在 Laravel 项目的根目录中运行以下命令来添加 Bootstrap:

%composer require twbs/bootstrap

接着,在我的视图文件中,我加入了以下代码:

<link href="css/app.css" rel="stylesheet">

看起来composer(或bootstrap)通过引用添加了app.css,其中包含Bootstrap css文件(位于非公共的vendor文件夹中)。将引用添加到app.css中可以工作,并且我能够在视图中使用Bootstrap组件。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接