これまでプライベートではgulpを、仕事ではCodekitを使ってたんだけど、ちょっと違うのも触ろうと思ったのと、前ちょこっと触ったっきりで仕事での導入になかなか踏み切れなかったので、時間ができたタイミングでやってみた。

目指したのはES2015+とSass(PostCSSでも良かったけどまだSass使う頻度の方が多そうだった)のコンパイルが出来る環境で、ついでにSassファイル分けるためのディレクトリも作っておくこと。

そうしておけばスタート時に0からのスタートじゃないし楽だよねって発想。

とりあえずできたのは ここ においてる。

ES2015

「2016使えます」とかなんなら「もう2017ですよ」とか煽ってる人も居るんだけどとりあえず2015でやってみた。後で徐々に上げる予定。

色々記事見てたけど、結局やりたいことやってたのは @misumi_takuma さんのやつだったので拝借してとりあえず自分に分かるようにちょっと書き換えた。

web-starter-kit/webpack.config.babel.js at master · mismith0227/web-starter-kit · GitHub

Sass

この記事の冒頭でも書いてあったけど、ESのコンパイルまでやってもSassのコンパイルまでやってるやつってなかなか無くて困ったんだけど、これの通りに進めたら一応コンパイルはできた。

webpackを使ってsassをコンパイルできるようにしよう！ – Qiita

Bourbon / Neat

いつもはSassだけじゃなく、MixinライブラリのBourbonを使っていて、隙あらばNeatも使いたいので、そのコンパイルもできるようにした。

webpackを使ってnode-sass環境にbourbon3兄弟を導入する – Qiita

Sass-loaderのオプションでそれぞれのpathを渡すことで、BourbonとNeatも使えるようになるみたいなので、他のものも使えるようになるのかな。

今後やりたいこと

SassからPostCSSに変えても良いなーとは少し前から思っているので、別ブランチで進めようかな