【webpack / gulp超初心者入門】とりあえず一緒にvue.jsでも用意してみようぜ！！

# はじめに

jsのバージョン管理！
`npm install`！！
はい、node_modulesフォルダ配下にデータが入りました～～！

……で？？？？？

だから何やねん！！
そっからどう使うねん！！

そんなフロントエンド初心者がとうとうwebpackの勉強をはじめました。


# ゴール

vue.jsの「単一ファイルコンポーネント」が動くところまでやっていきたいと思います。


# 前準備

私はWindowsで環境を準備しますが、
Mac Loveな方は適宜Macのコマンドに置き換えてください。


## プロジェクトフォルダの準備

ひとまずtestフォルダを作成。
その後、その中にindex.htmlを用意します。
ここで作業を行っていこうと思います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/63338/26196a60-f2d0-97f1-b34a-f4d945e35d72.png)



## npmを準備

npmはなんかJavaScriptのバージョン管理ツールらしいです。
brewとかyumとかapt-getとかchocoみたいな感じかな。

ひとまず準備します。


Windowsの方は[Chocolatey](https://chocolatey.org/)、
Macの方は[Home Brew](https://brew.sh/index_ja)を準備します。

この辺は適当にググればわかりやすい参考サイトがあるので割愛します。
Chocolateyでのnpmの準備は、[私の記事](https://qiita.com/nnahito/items/eff6d73f7ee1c1007d93)を参考に入れていただいても大丈夫です。

その後、Node.jsを入れればnpmも一緒に入るかとおもいます。



## yarnの準備

npmでinstallコマンドを叩くより、[yarn](https://yarnpkg.com/lang/ja/)というものを使えば早く可愛くフレンドリーにパッケージを入れてくれるので、
それも準備します。

コマンドプロンプトを「管理者で実行」します。
そして以下のコマンドを叩きます。

```
choco install yarn
```


## gulpの準備

コンパイル処理とかを助けてくれる便利屋さんの「gulp」を導入します。
Windowsの場合、グローバルに入れなければ実行できないのでグローバルに入れます。

```
npm install -g gulp
```

↑これでgulpが入ります。

```
gulp -v
```

↑これを叩いて、バージョンが表示されたらOK


## 必要なパッケージを入れる

ごそっと入れていきましょう！

```
yarn add -y gulp gulp-rename gulp-uglify webpack-stream webpack gulp-concat gulp-vueify vue
```

↑これを叩くとnode_modulesフォルダが作成され、
その中に色々入っていきます！

何を入れたか。

- gulp .... いろいろタスクを自動化してくれる便利なやつ
- gulp-rename .... ファイル名をリネームして出力するためのやつ
- gulp-uglify .... JS（JavaScript）を圧縮（ミニファイ）してくれるやつ
- webpack-stream .... Webpackの処理をストリーミングで実行してくれるやつ
- webpack .... WebPack本体
- gulp-concat .... 複数のファイルを一つのファイルに結合してくれるやつ
- gulp-vueify .... Vueの単一コンポーネント用ファイルを、JSファイルにコンパイルしてくれるやつ
- vue .... vue.js本体なやつ

ってな感じです。



## webpack.config.jsの作成

「webpack.config.js」を以下の内容で作成します。
ファイルを置く場所は、ディレクトリのトップです。

```javascript
const path = require('path');

// Webpack化して出力する設定
module.exports = {
    // モード値を production に設定すると最適化された状態で、
    // development に設定するとソースマップ有効でJSファイルが出力される
    mode: "production",

    // コンパイル元
    entry: path.resolve(__dirname, "resources/js/app.js"),
    // コンパイル先のファイル名
    output: {
        filename: "[name].js",
    },
    // vuejsの単一ファイルコンポーネント用のコンパイル処理をやるやつ
    resolve: {
        alias: {
            'vue$': 'node_modules/vue/dist/vue.common.js'
        }
    }
}
```


## app.jsの準備

コンパイル対象のapp.jsを準備します。
コヤツにコンパイルしたい内容を書いていくことになります。

場所は上のwebpack.config.jsで指定した、`resources/js/app.js`に作りましょう。

<img width="442" alt="a.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/a78b815a-2b21-9b1b-65e7-b1af031eca62.png">


ファイルの中身は以下のようにします。

```javascript
// 今自分のいる場所からのvue.jsまでのパス
import Vue from '../../node_modules/vue/dist/vue.js'

// コンポーネント登録
import MyComponent from './my-component.js';

// 今回使う単一ファイルコンポーネントの設定
Vue.component('my-component', MyComponent);

new Vue({
    el: '#my-component',
    components: {
        MyComponent
    },
    template: '<my-component></my-component>'
});
```



## 「my-component」の準備

テスト用のvueの単一ファイルコンポーネントを作成しましょう！
ファイルの場所は`resources/vue/my-component.vue`にしてみます！

```html
<template>
    <div>A custom component!!!</div>
</template>
```

<img width="223" alt="a.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/008449ec-3cd2-85d9-fb03-ec027a5203bd.png">


## gulpでコンパイルを行う準備

`gulpfile.js`というファイルを作成します。
場所はディレクトリのトップです。

```JavaScript
const gulp = require('gulp');
const webpackStream = require("webpack-stream");
const webpack = require("webpack");
const vueify = require('gulp-vueify');


// webpackの設定ファイルの読み込み
const webpackConfig = require("./webpack.config");

gulp.task('default', function () {
});

// task
gulp.task('jsmin', function () {
    // 設定ファイルで指定してあるデータをコンパイルして、吐き出す
    return webpackStream(webpackConfig, webpack)
        .pipe(gulp.dest("public/js/dist/"));
});


gulp.task('vueify', function () {
    return gulp.src('resources/vue/*.vue')
        .pipe(vueify())
        .pipe(gulp.dest('resources/js/'));
});

gulp.task('watch-js', function () {
    // JSが変更されたとき
    gulp.watch('resources/js/*.js', ['jsmin']);
});

gulp.task('watch-vue', function () {
    // vueが変更されたとき
    gulp.watch('resources/vue/*.vue', ['vueify']);
});



// デフォルト実行対象
gulp.task('default', ['watch-css', 'watch-vue', 'watch-js']);
```

<img width="235" alt="a.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/b586e4ec-90e9-3ed9-d908-dd5dcd95114c.png">



## index.htmlの作成

vue.jsの内容を表示するindex.htmlを作成します。
場所はディレクトリのトップです。

```html
<html>
<head>
    <meta charset="utf8">
</head>
<body>

<!-- 今回作るvue.jsの単一ファイルコンポーネントの中身が表示される場所 -->
<div id="my-component"></div>

<!-- 今回作るvue.jsの単一ファイルコンポーネントとvue.jsをあわせたもの -->
<script src="public/js/dist/main.js"></script>

</body>
</html>
```

<img width="238" alt="a.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/d0c73c41-046d-b3ba-c519-0bbf6a4806cb.png">



# gulpで単一ファイルコンポーネントをコンパイル！

my-component.vueなどの、「.vue」ファイルは、ブラウザではJavaScriptで有ることが認識できません。
なので、正規のJavaScriptにコンパイルしてあげましょう。

gulpfile.jsファイルで定義した以下のコマンドを実行します。

```
gulp vueify
```

いろいろ文字がコマンドプロンプトに出たあと、
`resources/js/`配下に`my-component.js`というファイルが出来上がるかと思います。

<img width="668" alt="a.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/373b28e9-b79d-0c61-e247-fd9d62de06b6.png">

中身は純粋なJavaScriptですね。


# gulpでvue.jsとmy-component.jsをまとめてしまう

さて、せっかくなので`my-component.js`と`vue.js`を一つのJSファイルに纏めて、
HTML側から一つ呼び出せば使えるようにしてしまいましょう！

gulpfile.jsファイルで定義した以下のコマンドを実行します。

```
gulp jsmin
```

すると、`public/js/dist/`配下に`main.js`というファイルが出来上がると思います。

<img width="712" alt="a.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/af5786ff-3abd-2d9f-7b64-b15ca01ef316.png">

コヤツにすべてのデータが入っているわけですね！


# index.htmlにアクセスしてみる

<img width="741" alt="a.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/d51b8f8a-82ed-8e7f-4ddf-370811f30126.png">

↑`my-component.js`で定義した文言が正常に出力されています！
できたぜ！！


# まとめ

Riot.jsのほうが楽でいいね！（


# 参考

- http://top-men.hatenablog.com/entry/2018/04/30/110538


# 宣伝

個人ブログやってます！
ちょっとギークな内容をまとめたりしてるので、ご興味のある方はぜひ！
https://nnahito.com/