CSS Nite LP47「Coder's High 2016」フォローアップ（2）森田 壮さん（Gaji-Labo）

2017年1月 2日（月）

2016年9月24日（土）TKPガーデンシティPREMIUM神保町で開催したCSS Nite LP47「Coder's High 2016」のフォローアップとして、森田 壮さん（Gaji-Labo）の『イマドキのコーダー環境構築』セッションのスライドなどを公開します。

セッション2「イマドキのコーダー環境構築」を担当した森田です。
長丁場、お疲れ様でした。

30分という短い時間の中で、環境の話を詰め込んだので、詳細まで説明しきれないところもありましたが、コーダーのイマドキの環境を知っていただけたら幸いです。
やること多くて大変ですよね。

ご質問

アンケートにいただきました、ご質問について回答します。

gulp-sassってLibSassなの？node-sassと同じもの？

gulp-sassは、node-sass を gulp で動かすものなので、中身は同じものです。LibSassです。
gulp では gulp-sass、単体や npm-script などで使う場合は node-sass を使います。
また、RubySass を動かしたい場合は、gulp-ruby-sass というパッケージがあります。

PostCSSを使う利点は結局何でしょうか？gulpでベンダープリフィックスとか出来るし…

CSS を処理するタスクランナーと思ってください。
gulp で使う場合、gulp の中で PostCSS を使います。
なので、gulp プラグインの一つとして特に意識する必要はありません。

ベンダープリフィックスとは Autoprefixer のことを指していると思いますが、gulp で Autoprefixer を使う場合、実はすでに PostCSS を使っています。
https://github.com/postcss/autoprefixer#usage

PostCSS は Sass のような事もできますが、現状は記述については Sass を使い、小山田さんが言われていた「Sassの補助ツール」として使うのが一番ベターかなと考えます。

SassがCSSのスタンダート(!?)とのことであせりました
Sassも使っていないので難しかった

ピュア CSS より Sass の方が多く使われているのは驚きですよね。
スライドは煽り気味に書いてしまいましたが、無理に使う必要はありません。可能なところから始めてみてください。

ブラウザで簡単にSassを試せるオンラインツールもあります。
SassMeister - http://www.sassmeister.com/

まだ実案件で使ったことがないので、最初に実案件で使うオススメありますか？

全てを使ったことがないという意味であれば、まずはSassを使ってみてください。そして、せっかくなのでgulpも一緒にどうでしょう？

セッションでも最後に紹介したサンプルファイルは、gulpでSassのコンパイルと、Autoprefixer（ベンダープリフィックス付与）ができます。
こちらを雛形に、gulpのプラグインを追加してみてはいかがでしょうか。

https://github.com/sou-lab/cssnite-lp47

オススメのgulpパッケージを紹介します

スライドで紹介したサイト

イントロ

Sass

PostCSS

gulp

Node.js

サンプルファイル

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。

2010年から2019年のベスト・セッション