--- title: 【webpack / gulp超初心者入門】とりあえず一緒にvue.jsでも用意してみようぜ!! tags: webpack YARN Vue.js npm gulp author: nnahito slide: false --- # はじめに 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`に作りましょう。 a.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」の準備 テスト用のvueの単一ファイルコンポーネントを作成しましょう! ファイルの場所は`resources/vue/my-component.vue`にしてみます! ```html ``` a.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']); ``` a.png ## index.htmlの作成 vue.jsの内容を表示するindex.htmlを作成します。 場所はディレクトリのトップです。 ```html
``` a.png # gulpで単一ファイルコンポーネントをコンパイル! my-component.vueなどの、「.vue」ファイルは、ブラウザではJavaScriptで有ることが認識できません。 なので、正規のJavaScriptにコンパイルしてあげましょう。 gulpfile.jsファイルで定義した以下のコマンドを実行します。 ``` gulp vueify ``` いろいろ文字がコマンドプロンプトに出たあと、 `resources/js/`配下に`my-component.js`というファイルが出来上がるかと思います。 a.png 中身は純粋なJavaScriptですね。 # gulpでvue.jsとmy-component.jsをまとめてしまう さて、せっかくなので`my-component.js`と`vue.js`を一つのJSファイルに纏めて、 HTML側から一つ呼び出せば使えるようにしてしまいましょう! gulpfile.jsファイルで定義した以下のコマンドを実行します。 ``` gulp jsmin ``` すると、`public/js/dist/`配下に`main.js`というファイルが出来上がると思います。 a.png コヤツにすべてのデータが入っているわけですね! # index.htmlにアクセスしてみる a.png ↑`my-component.js`で定義した文言が正常に出力されています! できたぜ!! # まとめ Riot.jsのほうが楽でいいね!( # 参考 - http://top-men.hatenablog.com/entry/2018/04/30/110538 # 宣伝 個人ブログやってます! ちょっとギークな内容をまとめたりしてるので、ご興味のある方はぜひ! https://nnahito.com/