How to install bootstrap in Laravel 5 using gazebo, gulp and elixir?
I added bootstrap-sass-official
bavel's to my addictions bower_components
.
I compiled and added the bootstrap css files in public
this way (in gulpfile.js
):
var paths = {
'bootstrap': 'bower_components/bootstrap-sass-official/assets/',
'jquery': 'bower_components/jquery/dist/'
};
elixir(function(mix) {
mix.sass('app.scss', null, {includePaths: [paths.bootstrap + 'stylesheets/']});
});
There app.scss
is a line in @import '_bootstrap';
. And the css files are compiled and they work.
How do I add fonts and bootstrap scripts to a page?
source to share
I found a solution:
mix.scripts(
'*',
'resources/assets/javascripts',
'public/js/app.js'
);
mix.scripts(
[
paths.jquery + 'jquery.js',
paths.bootstrap + 'javascripts/bootstrap.js'
],
'public/js/dependencies.js',
'bower_components'
);
mix.copy(paths.bootstrap + 'fonts/bootstrap/', "public/fonts/");
source to share
My decision, I am very proud.
/gulpfile.js
var elixir = require('laravel-elixir');
// Set your Bower target directory below.
var bowerDir = './vendor/bower_components';
// Helper function.
function bower(pkg, path) {
return [bowerDir, pkg, path].join('/');
}
elixir(function (mix) {
// Styles
mix.sass('app.scss', null, {includePaths: [bowerDir]});
// Fonts
mix.copy(bower('bootstrap-sass', 'assets/fonts/**'), 'public/build/fonts');
// Scripts
mix.scripts([
bower('jquery', 'dist/jquery.min.js'),
bower('bootstrap-sass', 'assets/javascripts/bootstrap.min.js')
]);
// Versioning
mix.version([
'css/app.css',
'js/all.js'
]);
});
/resources/assets/sass/app.scss
@import "bootstrap-sass/assets/stylesheets/bootstrap";
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Bonus tip for PhpStorm
Configure bowerDir
as Resource Root in PhpStorm. This way you get rid of the warnings.
Use Ctrl+ Spaceto display path autocomplete.
source to share