前回書いたこちらの記事では普通のWebサイトをNuxt.jsで作り変える流れをざっと書きました。
普通の受託系Web制作者による普通のWebサイトをNuxt.jsで作り変えてみた話
今回は上記の記事では割愛したNuxtでSassやpugなど、これまでgulpで使っていた便利なものを同じように使うためにはどうすれば良いか、ということを書いていこうと思います。
あくまで僕の環境（Mac）でこうしたら動くようになった、という記録なので正しいやり方ではないかもしれません。でも大事なのは成果物で、環境なんてのは自分が便利に使えれば良いの精神で書いていきます。
（沢山の人が関わるような大規模プロジェクトはちゃんとした環境構築しないとやばいとは思いますが）
なぜSassとpugとjQuery（プラグイン群）を使いたいか？
まず自分にどんな前提知識があったかをざっと説明しておきます。
・Sassやpugをgulpで使っていた。
・少し前にwebpackでもgulpと同じように構築する環境を整えた。
・Vue.jsは公式サイトに書いてあることを一通りやってみたけど実際の開発経験は無し。
とまあ僕はこんな感じの経験値でした。
制作スピード的に手慣れたものでやりたかったのでこれらを使えるようにしたいと思います。
そしてjQueryとそれに付随するプラグイン群。
「jQueryなんてもう使わなくても良いじゃん！」という声が台頭して結構な月日が経ちますし、ブラウザ間の互換性もかなり是正されてきた昨今それはそんなに間違ってないんですが、何気に困るのが圧倒的な数を誇るプラグイン群の代わりはあるのか？という話です。
レスポンシブまで自動で対応してくれる、
ライトボックスとか
スライダーとか
アコーディオンとか
オリジナルスクロールバーとか
フォトギャラリーとか
それらの細かい処理をスクラッチでちゃんと書こうとすると面倒ですし、なおかつ細かい演出部分までカスタマイズ出来る。そんなプラグイン群の代用品を探すのはかなり時間がかかります。正直やりたくない。
いやWebサービスとかアプリ作ってるとこは別に良いんですよ。
コンテンツ要素も自分らで検討出来るし、そういった箇所に演出を求めないと決めるもとい無理なく出来る範囲で上手く見せるとかそういう選択肢が取れるので。
ただ受託のWeb制作をしているとそういう選択肢があまり取れない事も多いので、まだしばらくはこれらのプラグインは使いたい…。
というわけでこれらのプラグインもNuxt.jsに入れて動かせるようにしたいと思います。
まずは必要なモジュールを追加していこう（package.jsonに追加）
Next.jsを「create-nuxt-app」でインストールすると、package.jsonが生成されますよね。
初めはここに”nuxt”しかないと思うんですがここに色々追加していきましょう。僕が前述の諸々をNuxtで使えるようにするために入れたのは下記になります。
とはいえコマンド打つよりもコピペでパッケージ入れちゃった方が早いと思うので、以下が僕が入れたモジュール一覧になります。
"dependencies": {
"cross-env": "^5.2.0",
"gsap": "^2.1.2",
"imports-loader": "^0.8.0",
"node-sass": "^4.11.0",
"nuxt": "^2.0.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"pug-plain-loader": "^1.0.0",
"raw-loader": "^2.0.0",
"sass-loader": "^7.1.0",
"slick-carousel": "^1.8.1",
"style-loader": "^0.23.1",
"venobox": "^1.8.5"
},
※バージョンが古くなってたりすると思うので、その辺は好きにバージョンアップしたら良いと思います。
package.jsonにこれらの項目を追加して、もう一度npmでもyarnでもインストールすればモジュールはまとめて追加されます。
（やや乱暴なやり方かもですがどうやるのが正しいんでしょうね）
細かい解説はしませんがだいたい「loader」って書いてあるものがSassやpugを使うために必要なものです。
「slick-carousel」や「venobox」はjQueryプラグインです。このようにnpmやyarnにパッケージが置いてあるものはここで一緒にインストールしてしまっても良いでしょう。置いてないものに関しても後でやり方書いておきます。
Nuxt.jsへのSassの導入
ここからは主にnuxt.config.jsの中身を書いていきます。
まずはSassを使うための手順を見てみましょう。必要なものはpackageで読み込み済みです。
１）「assets/css/style.scss」にまずSassファイルを置きます。
２）nuxt.config.jsのGlobal CSSとコメントが書いてあるところにSassファイルへのパスを記述。
css: [
'~/assets/css/style.scss'
],
※ちなみにNuxtでパスを記述するときはパスの先頭に”~”を付けます。最終的に書き出す際に作業ファイルのディレクトリはなくなるのでこれを付けないと参照出来ません。ルートから参照したい、ファイルを残したいものはstaticに置きます。
３）nuxt.config.jsにSassを読み込むためのloaderを追加。
ここやることほとんどwebpackと同じです。nuxt.config.jsのbuildの項目に下記のようにloaderを記述しました。
これでstyle.scssにスタイルを記述すれば反映されるはずです。
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
module: {
rules: [
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
]
}
}
}
Nuxt.jsへのpugの導入
次はpugを使うための手順を見てみましょう。必要なものはpackageで読み込み済みです。
pugをどこで使うかというとpugファイルを読み込むという訳ではなく、.vueファイルでpug使えるようにします。
初期状態だとindex.vueの中身はtemplateで囲まれた中にhtmlが書いてあると思いますがそこにpugで書けるようにしていきましょう。
１）nuxt.config.jsにpugを読み込むためのloaderを追加。
先ほどの記述に増やしていきます。これで.vueファイルにpugの記述をする準備が出来ました。
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
module: {
rules: [
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
/* pugのloaderを追加 */
{
test: /\.pug$/,
oneOf: [
{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
},
{
use: ['raw-loader', {
loader: 'pug-plain-loader',
// trueでhtmlのminifyを解除出来る
options: {
'pretty': false,
}
}]
}
]
},
]
}
}
}
２）index.vueのtemplateにlang属性を指定
vueファイルのtemplateタグに下記のようにlang属性を追加してpugを指定します。
そうする事でそのファイルのtemplateの中ではpug式の記述が許されるようになります。
<template lang="pug">
追加したら試しにpugで書いてみましょう。
デフォルトのタグを手動でpug式に書き直すのは面倒臭いと思うので、まるっとコピーして下記のサービス等で変換してしまうのが良いでしょう。
意外とあっさりpugが使えるようになったと思います。
Nuxt.jsへのjQueryとかプラグインの導入
さて問題（？）のjQueryたちです。ここ僕の腕不足もあってやや変則的になります。
１）jQuery本体はCDNを読み込むようにしました。
いやこれjQueryはnpmにもちゃんと置いてあるんですが、webpackで使う時と違ってpluguinsとして読み込む方法だといまいち上手くいきませんでした。
なのでCDNで読み込むようにしました。nuxt.config.jsのheadにscriptとして追加します。
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
2）いろいろなプラグインたちはモジュールor通常のファイル参照で
モジュールで読み込めるにこした事はないかもですが、プラグイン以外にもファイルとして切り分けたいjsは出てくる事でしょう。
なのでここでは両方のやり方を併記しておきます。とは言ってもここはwebpackの記述の仕方と変わりませんが。
使いたいvueファイルのscriptに下記のように書くと使うことが出来ます。
/* モジュールとしてインポート出来る場合 */
import {TweenMax, Expo} from 'gsap';
import ScrollToPlugin from 'gsap/umd/ScrollToPlugin';
import 'slick-carousel';
/* assetsディレクトリにあるファイルを参照したい場合 */
import CommonSet from '~/assets/js/common-set.js';
またこれらでインポートしたファイルはそのまま使っても良いですが、こんな感じでmountedメソッドで使うのが良いのかなーと思っています。
export default {
components: {
},
mounted:function(){
CommonSet();
},
}
まとめ
以上で、Next.jsの作業環境でSass、pug、jQuery関係を扱うことが出来るようになったと思います。
今回はとにかくgulpで使っていた時短手段を移植することを主眼に置いたので、とりあえずNuxtならではのあれこれに関しては書きませんでした。
ただこうやってこれまでの制作手法を引き継げるというだけで、Nuxtによる利点にも目が向けやすくなるんじゃないでしょうか。
僕自身、環境構築が嫌いでやりたくないけどやらねばいけないシーンが多くて辛いので、似たような人の一助になればと思いますー。
Vue.js入門 基礎から実践アプリケーション開発まで
