jspm + gulp-webserverなボイラープレートを作った

Githubのリポジトリはこちら
https://github.com/boilerplate-garage/jspm-gulp-webserver

jspmについて

jspm (http://jspm.io/) は簡単に言うとnpm, bower, Githubに対応したパッケージマネージャなのだけれど、さらに加えてSystemJSというBabelなどのES6トランスパイラを使いつつモジュールローディングもできるツールも一緒になっているのでもはやbrowserifyもいらないという素晴らしい子。

いちから始める場合にはこの記事が詳しい
jspmで始めるES6生活

経緯

ボイラープレートを作った経緯としてはjspmを使った開発をしていたときに、最新版のGoogleChromeがローカルからのファイルの読み込み（file:///...の形式）をCORSとしてブロックするようになってしまっていて、ブラウザからファイルを開く形で開発するのが純粋に面倒くさくなったというのがひとつある。

gulp-webserverのようにローカルにサーバを立ててしまえば、もはやそんなことは気にしなくていいので楽になるはず。（gulpfile.jsはかかなきゃいけなかったけど、、、）

セットアップ＆起動

テキトウに何処かのディレクトリにクローンなりmaster.zipをダウンロードなりしておく。
基本的には上のディレクトリに準備してあるREADME.mdに従っておけばオーケー。

bash

$ npm install
...

$ jspm install
...

そんでもって上のコマンドでnpmとjspmのパッケージ群をそれぞれインストールする。
npmは基本的にgulpのためだけに使っている感じ。

bash

$ gulp

起動はこれだけ

そのほか

• 申し訳程度にSassのコンパイルタスクもgulpfile.jsの中に含めてあるので、app/styles以下のscssファイルをいじくると結合されたものがapp/style.cssに吐き出される。

所感

jspmはES6もぱぱっと使えてBrowserifyより便利かも、と思ったフシもあったけれど生CSSはこのご時世絶対書きたくない人間なのでどうやってjspmとそのあたりのトランスパイラーを組み合わせるべきかと考えると最終的にはまだgulpみたいなタスクランナーに頼らざるを得なかった。とりあえずはボイラープレートもまだ改良していくつもりなのでよしなに。