Edited at

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を自由に操作できるようにしていきましょう。