Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

やりたいこと

なるべく簡単に、とはいえそこそこ実用的なくらいに、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/* をサーバにアップする
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした