Posted: 2017.03.15 / Category: 開発環境 / Tag: Vue

VueはJavaScriptを読み込むだけお手軽に始めることはできますが、プラグインとか使おうと思ったとき require で読み込むのが前提になっているので、やっぱり開発環境からやらないといけないんですよね。

browserifyやwebpackを使用した開発環境を構築するには vue-cli を導入するのが早いです。
ただ、SASSのビルドでGulpを使用していたので、この既存の環境を拡張する形でVueを使えるようにしたいと思いました。

npmのインストール

npmはnode.jsをインストールすると使えるようになりますので、入っていない場合はインストールしてください。
あとGulpもグローバルにインストールします。

package.json

{
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babelify": "^7.3.0",
    "browserify": "^14.1.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^2.2.0",
    "gulp-sourcemaps": "^2.4.1",
    "vinyl-source-stream": "^1.1.0",
    "vueify": "^9.4.0",
    "vuex": "^2.2.1"
  },
  "dependencies": {
    "vue": "^2.2.1"
  },
  "browserify": {
    "transform": [
      "vueify",
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ]
        }
      ]
    ]
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

package.jsonを適当なディレクトリに入れたらカレント下記を実行します。

$ npm install

gulpfile.js

jsファイルは「htdocs/assets/js」に入れて、scssは「htdocs/assets/scss」に入れるという構造にしました。
書き出したファイルは「htdocs/assets/dist」に入ります。

gulpfile.js

var gulp = require("gulp");
// css
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var plumber = require("gulp-plumber");
var sourcemaps = require('gulp-sourcemaps');
// js
var browserify = require('browserify');
var source     = require('vinyl-source-stream');
gulp.task('sass', function() {
  gulp.src('html/assets/scss/**/*scss')
      .pipe(plumber())
      .pipe(sourcemaps.init())
      .pipe(sass())
      .pipe(autoprefixer({
          browsers: ['last 2 versions', 'ie >= 8', 'Android >= 4','ios_saf >= 8'],
          cascade: false
      }))
      .pipe(sourcemaps.write('../maps'))
      .pipe(gulp.dest('./html/assets/dist/css'));
});

gulp.task('build', function() {
    browserify({
        'entries': ['./html/assets/js/main.js']
    })
        .bundle()
        .pipe(plumber())
        .pipe(source('./html/assets/dist/app.js'))
        .pipe(gulp.dest('./'));
});

gulp.task('default', function() {
  gulp.watch("html/assets/scss/**/*.scss",["sass"]);
  gulp.watch(["html/assets/js/**/*.js", "html/assets/js/**/*.vue"],["build"]);
});

設定が終わりましたらターミナルから下記を実行します。

$ gulp

これでファイルが監視されてコンパイルが実行されます。

試してみる

簡単なファイルで試してみます。

index.html

<div id="app">
<app></app>
</div>
<script type="text/javascript" src="assets/dist/app.js"></script>

assets/js/main.js

import Vue from 'vue'
import App from './app.vue'
export default new Vue({
	el: '#app',
	components: { App }
});

assets/js/app.vue

<template>
<p>{{ message }}</p>
</template>
<script>
export default {
    data() {
        return {
            message: "Hello Vue !!!"
        }
    }
}
</script>

参考ページ
はじめてのVue.js – 単一ファイルコンポーネントを作れる環境構築編 (npm + gulp + browserify + babel + vueify)