bower, gulp 및 elixir를 사용하여 Laravel 5에 부트 스트랩을 설치하는 방법은 무엇입니까?

Question

내 bower 종속성에 bootstrap-sass-official을 bower_components에 추가했습니다.

나는 컴파일 (gulpfile.js에서) public이 방법을 부트 스트랩 CSS 파일을 추가 : app.scss에서

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/']}); 
}); 

는 라인 @import '_bootstrap';있다. 그리고 css 파일이 컴파일되어 작동합니다.

페이지에 부트 스트랩 글꼴 및 스크립트를 추가하려면 어떻게합니까?

Answer 1

나는 해결책을 발견 :

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/"); 

Answer 2

내 솔루션을, 나는 아주 자랑스럽게 생각합니다.

/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' 
    ]); 
}); 

PhpStorm

셋업 bowerDir 같은 위해 /resources/assets/sass/app.scss

@import "bootstrap-sass/assets/stylesheets/bootstrap"; 

body { 
    font: 100% Helvetica, sans-serif; 
    color: #333; 
} 

보너스 팁 PhpStorm의 리소스 루트. 이렇게하면 경고를 제거 할 수 있습니다. 사용 Ctrl 키 + 공간

경로 자동 완성을 표시합니다.