Middlemanにはアセットパイプラインという便利な機能があるのですが、名前空間の管理のことを考えると取っ付く勇気がありません。

RequireJSはそこらへん考えずにファイルを分けて好きなようにディレクトリに放り込んでおくだけでいいので、このラクチンさはやめられません。

で、いままではコンパイルをr.jsで行っていたのですがこれをもっとラクにするために、耳に聞こえしGruntという便利なものを使ってみました。

まずは

grunt-contrib-requirejsを試してみた

を参考にしてRequireJSのmain.jsを監視して変更されたら即all.jsをコンパイルする方法を検討。

...
    watch: {
      files: [
        './source/js/main.js',
        './source/js/main-*.js'
      ],
      tasks: ['requirejs']
    },
    requirejs: {
      compile: {
        options: {
          name : 'main',
          baseUrl: "./source/js",
          mainConfigFile: './source/js/build.js',
          out: "./source/js/all.js",
          optimize: "none"
        }
      }
    },
    ...

これで

grunt watch

で監視できたのですが、コンパイル後のファイルはビルド前は必要ないのでmiddleman buildのタイミングで1回コンパイルしてくれれば十分かも。

というわけで、次に

Grunt + TypeScript + Middleman によるフロントエンド開発環境を作ってみる

こちらを参考にして、RequireJSをコンパイル→Middlemanをビルド、をタスク化する方法を検討。 grunt-middlemanを導入して次のようにタスクに登録。ついでにサーバーを起動する時に

middleman s -h x.x.x.x

を毎回打つのが面倒なので

grunt server

で起動できるようにしておく

...
    middleman: {
      options: {
        useBundle: true
      },
      server: {
        options: {
          command: "server",
          useBundle: false,
          environment: "development",
          host: "x.x.x.x",
          port: 4567,
          clean: true,
        }
      },
      build: {
        options: {
          command: 'build'
        }
      }
    }
    ...
    grunt.registerTask('server', ['middleman:server']);
    grunt.registerTask('build', ['requirejs:compile', 'middleman:build']);

この方がいいね。