LoginSignup
16

More than 5 years have passed since last update.

Riot.js入門 なるべく簡単に とはいえ 少し実用的に

Posted at

やりたいこと

なるべく簡単に、とはいえそこそこ実用的なくらいに、Riot.js を使いたい。
Riot.jsはランタイムでのコンパイルなども可能です。開発者てきにはメリットありますが、多少ユーザメリットが感じられないので……プリコンパイルしてサーバにあげたいです。あと、開発環境的にあんまり複雑なことすると手軽感がなくなるので、最低限ですませたい。
ということでメモがてら作ってみました。

環境構築

npmインストール

してください。

各種 npm install

$ npm install -g riot
$ npm install --save-dev gulp
$ npm install --save-dev gulp-riot
$ npm install --save-dev gulp-connect

gulpで使いたいのでいろいろインストールしておく。

テンプレート的なファイルの準備

gulpfile.js
var gulp = require('gulp');
var riot = require('gulp-riot');
var connect = require('gulp-connect');

gulp.task('build', function(){
    gulp.src('./src/*.html')
    .pipe(riot())
    .pipe(gulp.dest('./dist'));
});

gulp.task('watch', function(){
    gulp.watch('./src/*.html', ['build']);
});

gulp.task('connect', function(){
    connect.server({
        root: '.'
    });
});

gulp.task('default', ['connect', 'watch']);
index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>my web site</title>
</head>
<body>
    <app></app>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.1/riot.min.js"></script>
    <script src="./dist/index.js"></script>

    <script>
        riot.mount('app');
    </script>
</body>
</html>
src/index.html
<app>
    <h1>My Web Site</h1>
    <p>hogehoge</p>
</app>

上記のファイルをまるっと作る。

ビルド

gulpの実行。

$ gulp

これでソースをいじるとかってにコンパイルされてブラウザで確認ができます。

本来なら次にやること

個人的に、あまりRiot.jsに執着して流儀にのっかって心中はしたくないので、なるべく、疎な感じにしておきたいです。なので、基本は普通に HTML を書いて使いまわしのコンポーネント部分だけを Riot.js にする方向で作りたいので、下記の感じで進めていきたいと思います。

  • xxxx.html を作る。
  • 何か他のページと共通化したい部分だけをRiotの流儀で書いて src/*.html に配置する
  • ./xxxx.html./dist/* をサーバにアップする

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16