How do I set up Bootstrap after downloading via Composer?

问题

I'm a beginner with Composer, so I know little about it and have little experience with web application development.

I was reading the Nettuts+ Tutorial, and have a basic question about 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"
}

If I set up my composer.json file as above, after executing composer install --dev, how do I make Bootstrap available for use in the Laravel project?

I mean, I can see the Bootstrap package is downloaded to the vendor directory. Before I only used to download Bootstrap from its official website and manually put the files in the public directory of Laravel, but what is the right way to do this here? Can I leave the Bootstrap files where they are, because I want to update the Bootstrap package to its latest version periodically?

Thanks.

回答1:

We have artisan command to publish the assets(CSS, JS,..). Something like this should work.

php artisan asset:publish --path="vendor/twitter/bootstrap/bootstrap/css" bootstrap/css
php artisan asset:publish --path="vendor/twitter/bootstrap/bootstrap/js" bootstrap/js

i am not sure about the path.. But this should work.

回答2:

As the tutorial says, you have to copy it to your public directory:

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

EDIT:

You really have copy them, because your assets files should lie in the public folder only and Composer is all about putting packages on your vendor's folder, which must not be visible to the outside world.

But you can create a Composer post-install-cmd:

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

And make it copy those files for you every time an update happens. It can be written using PHP, bash or any other language you can run on your host. Docs: http://getcomposer.org/doc/articles/scripts.md.

回答3:

Just realised that php artisan asset:publish --path="vendor/twbs/bootstrap/dist/" bootstrapor php artisan vendor:publish --path="vendor/twbs/bootstrap/dist/" bootstrap do not work anymore.

What worked for me is editing the composer.json to add the following under scripts, post-update-cmd:

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

回答4:

Just symlink the folder like said above by LeviXC:

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

Or multiple commands:

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

回答5:

This worked better for me

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

The "r" flag made the symlink relative, thus pointing to the real folder

回答6:

I am new to Laravel and Bootstrap (and to using them together) and I stumbled across this thread when having the same issue. I created a new Laravel project, then added Bootstrap by running the following command from within the root directory of the Laravel project:

%composer require twbs/bootstrap

Then, in my view file, I included the following code:

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

It appears that composer (or bootstrap) adds app.css which includes the Bootstrap css files (which are located in the non-public vendor folder) by reference. Adding the reference to app.css worked, and I was able to use Bootstrap components in my view.

回答7:

The solution with composer post update script (post-update-cmd) in Windows environment could be:

{
  "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"
    ]
  }
}

You will have the bootstrap files inside public\assets\bootstrap folder ready to be imported in HTML.

来源：https://stackoverflow.com/questions/19118367/how-do-i-set-up-bootstrap-after-downloading-via-composer