[gulp]ベンダープレフィックスとソースマップを同時に出力できない?

カテゴリー:
Other

gulp始めました。が、初心者なため、まだわからないことも多いです。

今の悩みは「ソースマップの出力」と「CSS3のベンダープレフィックスの付与」を同時に実行するのが上手くいかない、というものです。

ひとまず基本的なglupfileの記述。ソースマップは出ます。

以下の様なタスクをglupfileに記述しています。(※WindowsのFirefoxで開発してます。)

これでstyle.css.mapが出力され、FireFoxの開発ツールで閲覧できます。

ベンダープレフィックスをつけるには

ベンダープレフィックスを付けたいときは、専用のプラグインをインストールし、タスクを記述する必要があります。
自分はgulp-pleeeaseというものを使っています。
glupfileは以下のようになります。

エラーが出てしまう…

が、しかし!これだとコマンドプロンプトがエラーを吐いてコンパイルを停めてしまいます…

いろいろ試した結果、gulp-ruby-sassを使っているのが原因みたいです。
gulp-ruby-sassを使うのをやめて、gulp-sassに切り替るとするとエラーを吐きませんでした。(うーん何でだろう?)

とりあえずできたからいいか、と喜んだのも束の間、今度はソースマップが出力されなくなりました…
ソースマップを出力するプラグインがあったので使ってみたのですが、なぜかFireFoxの開発ツールで閲覧できず、解決に至りませんでした。

原因が解るまでの、ひとまずの対策

現状では

(1)ソースマップは出せるが、ベンダープレフィックスは出力できない。
(2)ソースマップは出せないが、ベンダープレフィックスは出力できる。

という二者択一の状態になってしまいました。

差し当たって、開発時は(1)でコードを書き、公開時に(2)でプレフィックスを付与する、というやり方で凌ぐことにします。

以下のようなgulpfileにして、開発と公開時によって切り替えるようにしてみました。

(1)開発フェーズ

(2)公開フェーズ

どこが良くないのか、現状残念ながらわかりませんが、いずれは解決したいですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です