Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

目次

前提

  • タスクはnpm scriptsで一限管理
  • コマンドはyarnを使用
  • vue-cliwebpack-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を自由に操作できるようにしていきましょう。

buchiya4th
空前絶後の超絶怒涛のフロントエンドエンジニア。 フロントエンドを愛しフロントエンドに愛された男。 HTML、CSS、JavaScriptすべてのフロントエンドの産みの親。 フロントエンド界に舞い降りたキングオブ人見知り。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away