Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。
目次
前提
- タスクは
npm scriptsで一限管理 - コマンドは
yarnを使用 -
vue-cliのwebpack-simpleを使用
バージョン
- "vue": "^2.5.11"
- "webpack": "^3.6.0"
npm scriptsの確認
このチュートリアルの流れでnpm scriptsに開発用コマンドを書いて使ってきました。
現状は大体以下のようになっているかと思います。
{
// 省略
"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がこちらです。
{
// 省略
"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を自由に操作できるようにしていきましょう。