質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

1回答

2900閲覧

gulpでのcssのconcat + minify

MasakazuFukami

総合スコア1869

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2015/07/08 05:58

お世話になっております。

gulpでのcssの管理について質問させて下さい。
やりたいことは
全ページに読み込んでいるcss郡を1つのファイルに纏める
全ページで読み込んでいるファイルは
html5reset.css
slick.css
font-awesome.css

です。
これを

lang

1gulp.task('css', function() { 2 return gulp.src([ 3 './app/assets/stylesheets/src/libs/pc/html5reset.css', 4 './app/assets/stylesheets/src/libs/pc/slick.css', 5 './app/assets/stylesheets/src/libs/pc/font-awesome.css', 6 ]) 7 .pipe(concat('bundle.css')) 8 .pipe(minifyCss()) 9 .pipe(gulp.dest('./app/assets/stylesheets/dist/')); 10});

このようにしてconcat + minifyしているのですが、作成されたbundlec.cssを見ると
slick.cssの内容が一部html5reset.cssよりも上に来てしまっています。

concatの処理ではsrc([])の配列に指定している順番では読み込まれないのでしょうか?
また、どのようにすればhtml5reset.cssの内容をbundle.cssの最初に読み込ませることができるのでしょうか?
よろしくお願いいたします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

こちらも、投稿からかなり時間が経っているので既に解決済みかもしれませんが

"gulp": "^3.9.0", "gulp-concat": "^2.6.0", "gulp-minify-css": "^1.2.0",

で試してみました。
concatが終了した段階、concat後minifyCssを実行した段階 それぞれで確認したのですが
結合されたcss内で元のファイルの内容が前後するという現象を再現することができませんでした。

各プラグインのバージョンもしくは、slick.cssの内容が原因で発生している可能性もあります。
また、前後してしまう時はminifyCssをしなくても結合段階で前後してしまっているのでしょうか?
合わせて

  • 発生した時の各プラグインのバージョン
  • slick.cssの内容

を表記されると再現性を確認できる可能性があるかもしれません。

投稿2015/08/21 16:59

KiKiKi_KiKi

総合スコア596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問