web-dev-qa-db-ja.com

bootstrap with composer

私はウェブ初心者プログラマーです。
自分のウェブを作成するために自宅で学習しようとしています。 php、html、js、cssの概念があります。
しかし、私は解決方法ではない何かを見つけました。 Composerを使用してBootstrapを管理しようとしています。Composerをインストールし、このコード行を実行しました

composer require twbs/bootstrap

それはファイルのあるフォルダを落としました。

私が理解できないのは、jsおよびcssファイルを見つけるためにhtmlリンクを作成する方法です。フルパスを指定する必要がありますか？

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

質問がばかげているのにすみませんが、どうすれば続けるべきかわかりません。
AMDは私の英語をすみません、私も勉強していますが、今ではグーグル翻訳を使用しています

phptwitter-bootstrapcomposer-php
20
James Ryan

はい、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。

14
Jens A. Koch

カスタマイズが必要でない限りinside 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はbackend依存関係のための非常に優れたツールですが、フロントエンドには最適ではありません。

8
Massimiliano Arione

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">
3
Rahul Shinde

サーバーにファイルを置きたい場合で、npm、grunt、または別のフロントエンドライブラリマネージャーを使用したくない場合は、 Massimiliano's answer にリストされているファイルをダウンロードして、 js/cssフォルダー：

最初にこれらのファイルをダウンロードします（最新のBootstrap 3バージョンに更新）：

http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

そして、それらをこれらのフォルダーに入れます（プロジェクトのルートから開始）：

public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js

次に、ビューのブレードテンプレートでそれらを呼び出すことができるようにします。簡単です。css/ jsファイルに対して通常どおり<link>および<script>タグを追加し、ブレードテンプレートに以下を追加します。

<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>

P.s .:コンソールが表示される場合、次のエラーメッセージとして何かが表示されます。

Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map

これはページのスタイルには影響しません。このメッセージを無視するか、bootstrap=ファイルから この質問への回答 を示唆する行を削除することができます。 この回答 もう少し説明します。

0
Brian Hellekin