Great news! 私たちはすべての CSS を最小化し、1つのファイルにまとめました。 ああ、Bootstrap CSS を除いては! 2 つの良いオプションがあります。 まず、公開されている Bootstrap CDN へのリンクを指定することができます。 または、ブートストラップ・スタイルをmain.cssに直接詰め込むこともできます。
Bower!
Bootstrap は Bowser のおかげでインストールされています。 ええと、つまり、bower です。 Bower は Bootstrap や jQuery のようなフロントエンドアセットのためのコンポーザーです。
Bower は、なんと bower.json ファイルから読み込みます:
そしてプロジェクト作成時にファイルも追加しておきました。 これは、この web/vendor ディレクトリにものをダウンロードするように、
これで一般公開されました。
しかし、Gulp という筋肉を得たので、事態を複雑にしたいのですが、いかがでしょうか。 Changethis to be vendor/bower_components:
これは、これらのファイルを公開ディレクトリの外に置くことになりますが、最初は、いくつかの問題を引き起こすことになるでしょう。
rm -rf web/vendorターミナルに移動して、ctrl+cでgulpを終了します。 bower install:
bower installもしbowerコマンドを持っていない場合は、彼らのドキュメントをチェックしてみてください。 これは npm 経由でグローバルにインストールされ、gulp とまったく同じです。 今、私の vendor/ ディレクトリに、美しい bower_components フォルダーがあります。
Adding CSS Files to our Gulp Styles Stream
しかし、私のレイアウトに2つの別々のリンクタグがあったとしても、それはできません： Bootstrap はもはや web/ ディレクトリをホームと呼びません。 そこで、そのlinkタグを削除します。
gulpfile.jsで、状況を修正してみましょう まず、bowerDir という新しい設定変数を追加します。このディレクトリにあるものを参照することは本当によくあることです。 それを vendor/bower_components:
そのディレクトリを開いたら bootstrap.css ファイルはどこにあるかがわかると思います。 これは、Sass ファイルではなく、通常の古い CSS であることに注意してください。 Bootstrap の Sass バージョンが実際にあり、Bootstrap 変数を制御したい場合は、代わりにこれを完全に使用できます。
しかし、問題は、Sass-processingaddStyle 関数を通じてプレーン CSS ファイルをプッシュできるかということです。 もちろんです。 config.bowerDir それから /bootstrap/dist/css/bootstrap.css:
そしてminファイルの取得については心配しなくていいんです、すでに対処してありますから。 このファイルは sass フィルターを通りますが、大丈夫です!
Head back and run gulp:
gulpそして、main.css は輝かしい Bootstrap コードから始まります。 そして、--production フラグを渡していれば、最小化されます。
それでも私たちのサイトは素晴らしいものになるはずです。 そこで、更新します。
Renaming the Task to styles
そして、この作業を続ける前に、もう 1 つの改善を行うことができると思います。 私たちのタスクは sass と呼ばれています。 これをstylesに変更しましょう。このタスクの仕事は、CSSファイルであれSassファイルであれ、スタイルを処理することです。
この名前もdefaultタスクで変えなければならないですね。 おっと、Gulpを起動する前に、watchタスクの名前もstyles:
OK、これでいろいろ試せます。ctrl+cでGulpを停止し、再始動します:
gulp はい、エラーなし！