Communityでgulpを使ってRiotのプリコンパイル。Framework)」という、どっちやねん?と言いたくなるようなテンプレートを選択。選択肢があまりありません。慣れないCoreテンプレートで「空」はしんどいので無難な選択。コード用フォルダを作成wwwrootの下のappは.js書き出し用。プロジェクト直下のtagsは.tagファイルの保存用。パッケージの管理」を選択。JavaScriptやCSSなどクライアント側のパッケージはBowerを使うのが流行りみたいですね。「bower.jsonを開く」でjsonを直接編集できるようですが、riotは紛らわしいapiがあるので、アイコン確認できるGUIで。※検索して出てこず、jsonを直接編集したら出てきたことも。パッケージの管理」では表示されなかったり。どちらから追加してもまったく同じと言うわけではなさそう。「参照」タブに切り替え、riotで検索。riotの「インストール」。終わるとlibフォルダの中にriotフォルダができ、ファイルが保存されています。npmでパッケージ取得VSのバージョンや選択したテンプレートによっては最初からプロジェクトに含まれていることもあった気がしますが、見つからなかったので、package.jsonを追加。devDependenciesにgulp、riot、gulp-riotを追加。"gulp":まで入れて待つと候補が表示されます。どれを選択するかはお好みで。Bowerよりさらに時間がかかって終了するとNPMのフォルダができて指定したモジュールが保存されています。見えている以外にも大量のモジュールがダウンロードされています(ディスク上のサイズ:13.7M!)。これが嫌な場合は、直接npmのコマンドを叩く方法もあるようですが、まずはgulpで。false)</body></html>分かりやすいように今回のサンプルで不要なものは消しましたが、残したまま追加でも問題ないでしょう。Gulpの準備gulpfile.jsを追加ファイルを編集このあたりを参考に、今回はオプション無しで。繰り返しますが、初めてのgulpです(嘘書いているかも知れません)。本当はTypeScriptを使いたい。エクスプローラー」VSのバージョンによってメニューにない場合は、拡張機能で追加可能かも。上で定義した「riot」が表示されているので(されていない場合はリロードアイコンクリック)、右クリックして実行。エクスプローラー」はgulpだけではなく、Gruntでも使われます(RiotのコンパイルをGruntでやりたい場合はgrunt-riotを利用)。Runnerという拡張機能もあるようです。jsファイルやcssファイルの結合、圧縮等はこのテンプレートではbundleconfig.jsonで定義するようになっています。このあたりも一緒に組み込む場合は、bundleconfig.jsonを右クリックしてgulpfile.jsに書き出せ、とありますがCommunity版だからかメニューに無し。コンパイル後のファイル確認gulp.dest('wwwroot/app/')で指定したフォルダに.jsができているのを確認。出来上がった.jsファイルへのリンク追加。ファイル名間違い防ぐため(.tagにしてしまったり)、ファイル作成後にリンクした方が確実。Studioのお陰で環境構築の手間が無く思ったより楽でした。gulpInformation晴れの日の休日は掃除、洗濯、草引きで一日つぶれますが、雨の日は時間が余ります。