晴耕雨プログラミング

テンプレート選択

コード用フォルダを作成

riot.jsの追加

npmでパッケージ取得

コーディング

sample.tagの追加

<sample>
  <h3>{ message }</h3>
  <ul>
    <li each={ techs }>{ name }</li>
  </ul>

  <script>
    this.message = 'Hello, Riot!'
    this.techs = [
      { name: 'HTML' },
      { name: 'JavaScript' },
      { name: 'CSS' }
    ]
  </script>

  <style>
    :scope { font-size: 2rem }
    h3 { color: #444 }
    ul { color: #999 }
  </style>
</sample>

Views/Home/indexの修正

@{
    ViewData["Title"] = "Home Page";
}

<div class="row">
    <div class="col-md-12">
        <h2>Application uses</h2>
        <sample></sample>

    </div>
</div>
<!-- ここに riot.jsへのリンクが挿入される -->
<!-- scriptは下記sectionの中に入れないとriotが見つからない -->
@section Scripts{
    <script>riot.mount('sample')</script>
}

Views/Shared/_Layout.cshtml

↑省略
    <environment names="Development">
        <script src="~/lib/riot/riot.js"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="~/lib/riot/riot.min.js"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

Gulpの準備

gulpfile.jsを追加

ファイルを編集

/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. https://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var riot = require('gulp-riot');

gulp.task('riot', function () {
    gulp
        .src('tags/*.tag')
        .pipe(riot({
            // option
        }))
        .pipe(gulp.dest('wwwroot/app/'))
        ;
});

タスクの実行

余談

• 「タスクランナー エクスプローラー」はgulpだけではなく、Gruntでも使われます（RiotのコンパイルをGruntでやりたい場合はgrunt-riotを利用）。
• npm scriptsを直接叩きたい場合はNPM Task Runnerという拡張機能もあるようです。
• jsファイルやcssファイルの結合、圧縮等はこのテンプレートではbundleconfig.jsonで定義するようになっています。このあたりも一緒に組み込む場合は、bundleconfig.jsonを右クリックしてgulpfile.jsに書き出せ、とありますがCommunity版だからかメニューに無し。

コンパイル後のファイル確認

gulp.dest('wwwroot/app/')

Views/Home/indexを修正

実行

感想