Vue.js × vue-router × browserifyで SPAのHTMLの画面ごとに切り出し

HTMLファイルを画面ごとに切り出したい

前回、vue-routerでVue.jsでSPAっぽくURLごとに

DOMを切り替えた。

ただ、一つのHTML全て画面の要素を書いていくのは

・肥大化してみづらい

・管理しづらい

などなどのため、画面ごとにHTMLファイルに切り出したい

browserifyを用いて実現する

HTMLファイルをbrowserifyのrequireで取り込むことでできないかと

調べたらできた。

JSソース

$(function(){
  var hoge = Vue.extend({template: require('../html/hoge.html')});
  var fuga = Vue.extend({template: require('../html/fuga.html')});

  var App = Vue.extend({});
  var router = new VueRouter();

  router.map({
  '/hoge': { component: hoge},
  '/fuga': { component: fuga}
  });

  router.start(App, '#app');

});

 前回はtemplateの値に#hogeで要素をしていたが、

requireでファイルを読み込む形とした。

browserify導入

npmで以下をinstall

browserify本体

npm install --save-dev browserify

stringify

htmlをjsに文字列としてrequireを可能にしてくれる人と理解

npm install --save-dev stringify

vinyl-source-stream

browserifyをgulpで使えるようにしてくれる人と理解

npm install --save-dev vinyl-source-stream

gulpfile.jsはこんな感じ

  gulp.task('browserify', function(){

    browserify({

      entries: ['../js/index.js'] // index.jsをbrowserifyにかける

    })

.transform(stringify([".html"])) // htmlファイルをrequireできるように指定

    .bundle()

    .pipe(source('../js/dest.js')) // コンパイル後のファイルをdest.jsとして出力

    .pipe(gulp.dest('.')); // コンパイル後ファイルの出力先を指定

  });

  gulp.task("default", function() {

    gulp.watch("../js/index.js", ["browserify"]); //index.jsを変更したらbrowserifyタスクを実行

  });

コンパイル後のdest.jsをhtml本体に読み込ませておけば、

gulpを実行して、index.jsでrequireを書きながら作業ができる。

便利な世の中。