やりたいこと
なるべく簡単に、とはいえそこそこ実用的なくらいに、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/*をサーバにアップする