LaravelElixir使ったらTypescriptをBrowserifyするのが簡単過ぎてもう笑うしかなかった #Laravel

2016/8/4追記

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

まずはインストール

今回はnpmで管理。

gulp
LaravelElixir
typescript
tsify

$npm i gulp laravel-elixir typescript tsify  --save-dev

gulpfile.jsに定義するのはたったこれだけ。えっ
ついでに.version()も使ってみる。

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

// デフォルトが`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')
       .version(['js/app.js'])
})

gulp実行

デフォルトタスクを定義してくれているのでgulpコマンド叩くだけ。えっ

$gulp

結果

project
 ├─app
 │　
 │〜省略
 │
 ├─public
 │    └─
 ├─resources
 │  └─build
 │     └─js
 │        └─app-71538b35c5.js ← できた！！！！
 ├─assets
 │  └─ts
 │  　 ├─app.ts ← エントリーポイント
 │　  　〜省略
　〜省略

elixir()で呼び出すだけ

<script src="{{ elixir('js/app.js') }}"></script>

えっ、簡単過ぎる。
今までgulpのタスクごりごり書いてた自分を笑うしかなくなった。くそう。

gulp~系のタスクが全て詰め込まれた万能薬なんだからnode_modulesがすごい量になったことには目を瞑るしかない。