--- title: Riot.js入門 なるべく簡単に とはいえ 少し実用的に tags: riot.js JavaScript author: 567000 slide: false --- # やりたいこと なるべく簡単に、とはいえそこそこ実用的なくらいに、``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 my web site ``` ```src/index.html

My Web Site

hogehoge

``` 上記のファイルをまるっと作る。 ## ビルド ``gulp``の実行。 ``` $ gulp ``` これでソースをいじるとかってにコンパイルされてブラウザで確認ができます。 ## 本来なら次にやること 個人的に、あまり``Riot.js``に執着して流儀にのっかって心中はしたくないので、なるべく、疎な感じにしておきたいです。なので、基本は普通に HTML を書いて使いまわしのコンポーネント部分だけを ``Riot.js`` にする方向で作りたいので、下記の感じで進めていきたいと思います。 * ``xxxx.html`` を作る。 * 何か他のページと共通化したい部分だけを``Riot``の流儀で書いて ``src/*.html`` に配置する * ``./xxxx.html`` と ``./dist/*`` をサーバにアップする