Vue.jsでSPAサイトを作成するチュートリアル【8. ビルド編】 #Vue.js

Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。

前提

タスクはnpm scriptsで一限管理
コマンドはyarnを使用
vue-cliのwebpack-simpleを使用

バージョン

"vue": "^2.5.11"
"webpack": "^3.6.0"

npm scriptsの確認

このチュートリアルの流れでnpm scriptsに開発用コマンドを書いて使ってきました。
現状は大体以下のようになっているかと思います。

package.json

{
  // 省略
  "scripts": {
    "eslint": "eslint src --fix",
    "watch:server": "browser-sync start --config bs-config.js",
    "watch:file": "cpx \"./src/**/{*.html,*.jpg,*.png,*.gif,*.svg,*.eot,*.ttf,*.woff,package.json}\" ./dist",
    "watch:css": "node-sass src/css/style.scss dist/css/style.css -w --source-map true",
    "watch:js": "webpack -w",
    "start": "run-p watch:*",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  // 省略

メインの開発はyarn startで/srcを監視し変更ファイルを/distへコンパイル等をおこなっています。
必要に応じてCSSプロパティの並べ替えやESLintをコマンドで実行していました。
/distを製品版として扱っても良いのですが、不要ファイルが残っていたり製品版として含まなくても良いもの（mapファイル等）が吐き出されている場合があり、不要なものはなるべく含めないほうが良いかと思います。
そこで今回は/dist内をきれいにして必要なものだけ吐き出すコマンドを用意します。

ディレクトリを削除して作成しなおすためにパッケージを追加します。


$ yarn add -D rimraf mkdirp

そして完成したnpm scriptsがこちらです。

package.json

{
  // 省略
  "scripts": {
    "eslint": "eslint src --fix",
    "watch:server": "browser-sync start --config bs-config.js",
    "watch:file": "cpx \"./src/**/{*.html,*.jpg,*.png,*.gif,*.svg,*.eot,*.ttf,*.woff,package.json}\" ./dist",
    "watch:css": "node-sass src/css/style.scss dist/css/style.css -w --source-map true",
    "watch:js": "webpack -w",
    "start": "run-p watch:*",
    "build:clean": "rimraf ./dist",
    "build:create-dir": "mkdirp dist/js",
    "build:file": "cpx \"./src/**/{*.html,*.jpg,*.png,*.gif,*.svg,*.eot,*.ttf,*.woff,package.json}\" ./dist",
    "build:css": "node-sass src/css/style.scss dist/css/style.css",
    "build:js": "webpack",
    "build": "run-s build:clean build:create-dir build:file build:css eslint build:js"
  },
  // 省略
}

devを削除してbuildを一新しています。
watchはrun-pで平行処理をおこなっていましたが、buildでは順番が必要なものがあるのでrun-sで直列処理をおこないます。
watchで監視していたものを監視しないコマンドでbuildに複製しているものと新しく追加したコマンドがあります。新しいものを説明します。
build:cleanは、rimrafで/distを削除します。
build:create-dirは、mkdirpで/distを作成します。（コンパイル前に存在しないとうまく動作しないため
あとは、順番を考慮してrun-sコマンドの後に順番に並べていきます。
以下のコマンドを実行して/distがきれいになったら成功です。

$ yarn build

まとめ

npm scriptsは慣れてしまえば難しいものではありません。
便利なパッケージがいろいろあるので、パッケージの使い方がわかれば駆使して高度なこともできるかと思います。
開発に必要な環境構築をできるようにnpm scriptsを自由に操作できるようにしていきましょう。

Vue.jsでSPAサイトを作成するチュートリアル【8. ビルド編】

目次

前提

バージョン

npm scriptsの確認

まとめ