使用bootstrap与composer

Question

我是一个网络新手程序员,
我正在尝试从家里学习制作我自己的网站.我有php,html,js和css的概念.
但我发现了一些不是如何解决的问题.我正在尝试使用Composer来管理Bootstrap.我安装了Composer,我运行了这行代码

composer require twbs/bootstrap

已经删除了包含文件的文件夹.

我不明白我是如何制作html链接来查找js和css文件的,你应该做指示完整路径吗？

vendor / twbs / bootstrap / dist / js / bootstrap.js

如果问题很愚蠢但我不知道应该如何继续,请原谅.
Amd请原谅我的英语,我也在学习,但现在我使用谷歌翻译

Answer 1

是的,Composer默认将依赖项下载到vendor文件夹中.所以Bootstrap也将落在供应商文件夹中,这不是引用它或包含它的正确位置.

composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js

下一步是编写一个小助手脚本,将所需的Boostrap文件复制到您的public/assets文件夹中.您可以将包含子文件夹(vendor\twbs\bootstrap\dist)的完整dist文件夹复制到public或中public\assets.

请覆盖现有文件,例如,如果文件存在,请删除它,然后复制它.当您需要再次更新Bootstrap供应商软件包时,这可以轻松更新文件.

当然,您也可以手动复制文件或创建符号链接.这取决于.

这为您提供了以下目录结构:

public
 \- assets
    |- css
    |- js
    \- fonts
 \- index.html

复制Boostrap资产后,您可以开始在您的index.html或模板(assets\js\bootstrap.min.js等等)中包含它们.

参考:https://stackoverflow.com/a/34423601/1163786,它还显示了此问题的其他解决方案,例如fxp/composer-asset-plugin,bower,grunt.

Answer 2

除非你需要在 bootstrap 内部进行自定义(例如构建scss),最简单的解决方案是依靠CDN(作为奖励,你可以获得超快速的资产缓存)

所以,只需像这样调用您的资产:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Composer是一个非常出色的后端依赖工具,但不是最好的前端.

Answer 3

您可以在composer.json文件中编写更新后脚本

"scripts": {
        "post-update-cmd": [
            "rm -rf public/bootstrap",
            "cp -R vendor/twbs/bootstrap/dist public/bootstrap"
        ]
    }

并且您可以包括javascript和CSS

<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"</script>
<link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">