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

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

• スライド（SlideShare）
• 音声
• 動画

セッション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パッケージを紹介します

• Browsersync （ローカルサーバー） https://www.browsersync.io/docs/gulp
• CSS MQPacker（ベンダープリフィックスをまとめる） https://github.com/hail2u/node-css-mqpacker
• cssnano（CSS圧縮） https://github.com/ben-eb/gulp-cssnano
• postcss-assets（画像のパスやサイズを取得） https://github.com/assetsjs/postcss-assets
• Handlebars（ハムさんオススメJavaScriptテンプレート） https://github.com/lazd/gulp-handlebars

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

• The State of Front-End Tooling ? 2015 https://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

Sass

• Sass: Syntactically Awesome Style Sheets - http://sass-lang.com/
• Web制作者のためのSassの教科書 - http://www.amazon.co.jp/dp/B00FMLD7UC/
• 現場で役立つ実践Sass | Adobe Creative Station - https://blogs.adobe.com/creativestation/serialization/web-sass-practice
• node-sass - https://github.com/sass/node-sass
• Sass 3.5 Release Candidates - http://blog.sass-lang.com/posts/809572-sass-35-release

PostCSS

• PostCSS Benchmarks - https://github.com/postcss/benchmark#preprocessors
• PostCSS - a tool for transforming CSS with JavaScript - http://postcss.org/
• PostCSS.parts - http://postcss.parts/
• PreCSS - https://github.com/jonathantneal/precss
• cssnext - http://cssnext.io/
• PostCSS Japanese Stylesheets - https://github.com/ikkou/postcss-japanese-stylesheets

gulp

• gulp.js - the streaming build system - http://gulpjs.com/
• gulp - Getting Started - https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

Node.js

• Node.js - https://nodejs.org/
• anyenv - https://github.com/riywo/anyenv
• nodist - https://github.com/marcelklehr/nodist
• npm - https://www.npmjs.com/

サンプルファイル

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