gulp-pleeeaseはpostcssやcssnextでも使えるのでしょうか？

Question

gulp-pleeeaseはpostcssやcssnextでも使えるのでしょうか？

使えない場合代替するものがあれば教えてください。

またこれから、メタ言語をやるなら、古いSASSより、postcssやcssnextの方がよいと思っているのですが、現場はまだSASSが中心のようなのであえてSASSライクに書けるようにプラグインを使ったほうが良いでしょうか？

それとも現場でもpostcssやcssnextができればそちらの書き方でよいと言ってくれると思いますか？

ちなみにpostcssやcssnextの違いはcssnextがsassの新しいバージョンでpostcssはcssnextの使いたいプラグインのみを自由に使えるようにできるものという違いで良いでしょうか？
どちらをやればよいか微妙です。

Answer 1

gulp-pleeeseは使い方によります。
gulp-pleeeseは「css」をクロスブラウザ対応するように変換してくれるツール。
postcssはscss内に書き込み使用するもの。

なので、
gulpファイルの中身を
scssをcssに変換
↓
cssをpleeeseでクロスブラウザ対応

とすれば問題ないと思います。

ちなみにpostcssはどのような環境で実行しようと思っていますか？

Comments

[退会済みユーザー]

ありがとうございます。

＞＞＞
Sassの使用から、CSSのベンダープレフィックスの付与、圧縮、メディアクエリを一つにまとめる等、使えるオプションが豊富なのが魅力です。

上記のように聞いているのですが、それプラスクロスブラウザ対応もしてくれるのですか？

私はPOSTCSSを使い始めたのですが、下記のようにbabelのように未来のCSSを.cssファイルに記載し、それをgulpでトランスパイルしアップロードして使おうと思っています。

:root {
--brand-color: #88E18E;
}

.logo {
color: var(--brand-color)
}

[退会済みユーザー]

gulp-pleeeseも上記のようなpostcssのファイルをインストールして、コマンドをうてばCSSのベンダープレフィックスの付与、圧縮、メディアクエリを一括実行してくれると考えてよいでしょうか？

[退会済みユーザー]

ワードプレス化のほうがニーズが多いので、先にやるべきですかね？
PHPコードを張り付けるだけでよいそうですが。

[MasakazuFukami]

>Sassの使用から、CSSのベンダープレフィックスの付与、圧縮、メディアクエリを一つにまとめる等、使えるオプションが豊富なのが魅力です。

上記のように聞いているのですが、それプラスクロスブラウザ対応もしてくれるのですか？

これに関してですが、クロスブラウザ対応とは「CSSのベンダープレフィックスの付与」と同様の意味です。

すいません
> 私はPOSTCSSを使い始めたのですが、下記のようにbabelのように未来のCSSを.cssファイルに記載し、それをgulpでトランスパイルしアップロードして使おうと思っています。

これに関してですが、babelとは何かを理解していらっしゃいますでしょうか？
babelは次世代のjavascriptであるECMAScript6（ES2015）を既存のjavascriptに変換するためのツールです。
なのでpostcssとは無関係です。

また、
> gulp-pleeeseも上記のようなpostcssのファイルをインストールして、コマンドをうてばCSSのベンダープレフィックスの付与、圧縮、メディアクエリを一括実行してくれると考えてよいでしょうか？

質問者様の今の実行環境がわからないので正確には答えることは出来ませんが、gulp-pleeeeseはgulp-pleeeeseをインストール後、gulpfileに処理を書けば実行することが出来ます。

また、wordpress化に関しては脈絡が全くわからないのでお答えすることが出来ません。
申し訳ございません。

[退会済みユーザー]

下記に Future CSS syntax 新しいCSS構文が使えますと記載されています。
https://html5experts.jp/t32k/17235/

＞＞＞PostCSSのプラグインはおおまかに分類すると以下のようなカテゴリーのものがあり、現在100種類以上のプラグインが存在します。

Future CSS syntax 新しいCSS構文が使えます
Fallbacks　未対応のブラウザでもその効果を再現します
Language extensions　for文やif文などの言語拡張します
Optimizations　ミニファイなどの最適化をします
Shortcuts　便利なショートカットです
Analytics　StyleStatsのような分析をします

[MasakazuFukami]

> 下記のようにbabelのように未来のCSSを.cssファイルに記載し、それをgulpでトランスパイルしアップロードして使おうと思っています。
下記のようにbabelの意味を理解できていませんでした。

> 上記のパッケージを使えば、JavaScriptにおけるBabelのような使い方がCSSにおいても可能です。
一応再確認ですが、postcssはbabelとは無関係です。
「babelのように」とは「babelを使ってES6→ES5へ変換するように」という意味ですので勘違いされないようにして下さい！

ES6はJavascriptにおける Furture Syntaxです。
PostCssはCSSにおける Furture Syntaxです。

なので、PostCssを今のcssに変換するためには100種類以上のプラグインの中から好きなモノを選んでコンパイルする必要があります。

[退会済みユーザー]

>>>
> 上記のパッケージを使えば、JavaScriptにおけるBabelのような使い方がCSSにおいても可能です。
一応再確認ですが、postcssはbabelとは無関係です。
「babelのように」とは「babelを使ってES6→ES5へ変換するように」という意味ですので勘違いされないようにして下さい！

ES6はJavascriptにおける Furture Syntaxです。
PostCssはCSSにおける Furture Syntaxです。

初めからわかっています。大丈夫です。私の例えも Furture Syntaxができるという意味でお伝えしたかったということです。

下記にCSSにおける Furture Syntax一覧がありますが、PostCssを今のcssに変換するためには100種類以上のプラグインを入れないでトランスパイルしても、
CSS2に変換されないので、使った（自分がきさいした）Furure Syntaxの分のプラグインをgulpにインストールして、
gulpでトランスパイルしないとブラウザで表記できないということですね。

https://blog.kazu69.net/2015/06/15/develop-latest-css-syntax-using-cssnext/

山のようにありますが、使いたい一部だけ使って、使わない部分のCSSはCSS2や3で普通に記載してトランスパイルしたらよいのですね。

SASS未経験なのでFLOCSSのようにファイルを詳細に分割した際に、どのように一つにするかは、SASSと同じと考えてよいでしょうか？
＠importを使ってgulpで一つにまとめるのですかね？
調べてみます。

ありがとうございました。

[退会済みユーザー]

gulpで
scssをcssに変換してから
↓
cssをgulpコマンドpleeeseを実行してでクロスブラウザ対応

という形ということですね。

下記を見て、行ったのですが、ファイルの拡張子はCSSのままです。
scssにするメリットがあるのでしょうか？
SASSは知らないので、よくわかりません。
http://creator.dwango.co.jp/5146.html

[MasakazuFukami]

postcssはscssの仲間みたいなものなのでcssでも問題無いですよー！

[退会済みユーザー]

ありがとうございました。

拡張子はCSSのままで問題ないのですね。

[MasakazuFukami]

問題無いです！

[退会済みユーザー]

ありがとうございました。