LaravelElixir使ったらSassをコンパイルしてベンダープレフィックス対応するのが簡単過ぎてもう笑うしかなかった

以前書いた記事LaravelElixir使ったらTypescriptをBrowserifyするのが簡単過ぎてもう笑うしかなかったのSass編。

Sassのコンパイルを追加してみる

gulpfile.jsに追加するのはたったこれだけ。えっ
なんと内部でえっautoprefixer()してくれていた。えっ

autoprefixerとは。

.sass('app.sass')

追加後

var elixir = require('laravel-elixir');

// デフォルトが`resources/assets/js`なため`ts`に変更
elixir.config.js.folder = 'ts'
// pluginにtsifyを指定
elixir.config.js.browserify.plugins = [ { name: 'tsify' } ]
// 実行
elixir(function (mix) {
    mix.browserify('app.ts')
       // .sass()を追加
       .sass('app.sass')
       .version(['js/app.js'])
})

あとはこの続きと一緒

ちゃんとprefixもついてた。この瞬間私は笑うしかなくなった。

.flex-rowdiv, .box-birthday {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row; }

だがしかしnode_modulesの量がものすっごい。
こんな感じでモジュール化されるとより嬉しい。

laravel-elixir
 ├─laravel-elixir-ts
 ├─laravel-elixir-sass
 │