【Mithril.js】msxの使い方メモ

はじめに

Mithril.jsの勉強始めて、そのうち少し大きいアプリとかつくりはじめたときに、
HTMLテンプレートの記述方法がちょっと複雑になってくるのかなと思いました。

で、調べたところドキュメントにもあったのですが、
こちらのツールを使うとHTMLをMithril形式に変換してくれるとのことでした。

が、実際に開発が進んでくると毎回このツールを使うというのもないかなぁとおもってmsxというツールの使うことにしました。
MithrilコンポーネントのviewメソッドにHTMLっぽい記述をしておいて、msxをコマンドラインで実行するとMithrilの形式に変換してくれるというツールです

インストール

gulpとgrantとでどちらでもokですが、とりあえずgulpで

npm install gulp gulp-msx

実装例

以下のようにJavascriptの公文的にはエラーなんですけど、わかりやすい記述が可能になります。

変換前ファイル

var Sample = 
{
    controller: function() {
    }

    view: function(controller) {
        return <a href="#">リンク</a>
    }
}

変換後ファイル
>||
var Sample = 
{
    controller: function() {
    }

    view: function(controller) {
        return {tag: "a", attrs: {href:"#"}, children: ["リンク"]}
    }
}

msxを直接実行

// msxコマンド 変換前ファイルがあるフォルダ 変換後ファイルの出力先
./node_modules/gulp-msx/node_modules/.bin/msx src/ dest/

gulpfile.jsで設定してgulpコマンドで実行

gulpfile.js

var gulp = require("gulp");
var msx = require("gulp-msx");

gulp.task('msx', function() {
    gulp.src('src/*.js')                      // 変換前ファイル
        .pipe(msx()) 
        .pipe(gulp.dest('dest/'))         // 変換後ファイル出力先
})

実行

./node_modules/.bin/gulp msx

gruntの場合

ほとんど同じだけどいちおうメモ

インストール

npm install grunt-cli grunt-msx

Gruntfile.js

module.exports = function(grunt)
{
    grunt.initConfig({
        msx: {
            dist: {
                files: 
                    expand: true,
                    cwd: "src/",
                    src: "*.js",
                    dest: "compile/",
                }]
            }
        },
    });
    grunt.loadNpmTasks("grunt-msx");
    grunt.registerTask("default", ["msx"]);
};

実行コマンド

./node_modules/grunt-cli/bin/grunt

まとまりないけど、以上です