7

LaravelでFoundationをどのように使用すればよいですか?

vendorFoundation を のフォルダにインストールしようと思いましたbower install foundation。これにより、vendor/bower_componentsFoundation と jQuery などの必要なすべてのライブラリを含むフォルダーが作成されます。

gulpfile.jsElixir がこれを正しく解釈するには、何を追加すればよいですか? できるはずです

  • Bower コンポーネントを更新する
  • 新しい Bower パッケージをインストールする
  • 更新時にこれらが上書きされることなく Foundation Sass 変数を変更する
  • コンパスを使う

Laravel 以外のプロジェクトでは、Ruby gem を実行しfoundation new my_project、コンパイル済みのファイルを手動でインクルードします。ただし、この場合、コマンドは動作に必要のない多くのファイルを作成します。

4

2 に答える 2

20

Laravel Elixir には Libsass が含まれているため、Laravel から Foundation Sass ファイルをコンパイルするために Ruby は必要ありません。必要なのは、bower と Laravel Elixir だけです。bower_componentsまた、フォルダからフォルダにファイルをコピーする必要はありませんresources/assets。

最初にElixir をインストールするための公式の指示に従います。

次に.bowerrc、Laravel プロジェクトのルートに次の内容のファイルを作成します。

{
    "directory": "vendor/bower_components"
}

次にbower.json、Laravel プロジェクトのルートに次の内容のファイルを作成します。

{
    "name": "laravel-and-foundation",
    "private": "true",
    "dependencies": {
        "foundation": "latest"
    }
}

次に、バウアーとファンデーションの両方をインストールします。

npm install --global bower
bower install # This will install Foundation into vendor/bower_components

次に、次のresources/assets/sass/_settings.scss内容でファイル file を作成します。

// Custom settings for Zurb Foundation. Default settings can be found at
// vendor/bower_components/foundation/scss/foundation/_settings.scss

resources/assets/sass/app.scss次に、ファイルfile を次の内容で編集します。

@import "normalize";

@import "settings";

// Include all foundation
@import "foundation";

// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switches",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";

gulpfile.js次の内容でファイルを構成します。

elixir(function(mix) {

    // Compile CSS
    mix.sass(
        'app.scss', // Source files
        'public/css', // Destination folder
        {includePaths: ['vendor/bower_components/foundation/scss']}
    );

    // Compile JavaScript
    mix.scripts(
        ['vendor/modernizr.js', 'vendor/jquery.js', 'foundation.min.js'], // Source files. You can also selective choose only some components
        'public/js/app.js', // Destination file
        'vendor/bower_components/foundation/js/' // Source files base directory
    );


});

ビルドするには、公式ドキュメントに従ってください:

gulp # Run all tasks...
gulp --production # Run all tasks and minify files
gulp watch # Watch for changes and run all tasks on the fly

コンパイルされたファイルは と にpublic/css/app.cssありpublic/js/app.jsます。

Zurb Foundation の最新バージョンに更新するには、次のコマンドを実行します。

bower update
于 2015-06-27T09:28:31.577 に答える
1

Fundation > scss フォルダーを resources > assets フォルダーにコピーし、scss の名前を sass に変更し、gulpfile.js に次のように追加します。

elixir(function(mix) {
    mix.sass('foundation.scss');
});

public > css フォルダーにfoundation.cssファイルを生成するgulpを実行し、そのファイルをプロジェクトに含めます。

jsファイルの場合、このようなものを簡単に使用してファイルをコピーできます

mix.copy('resources/assets/foundation/js/app.js', 'public/js/app.js');
于 2015-06-26T02:57:26.170 に答える