npm-scriptsのSCSSコンパイルが遅くてGulpを同居させてみた

こんにちは！オークファンWEBデザイナーのazneです。

NETSEAという卸サイトのデザインを担当しています。
NETSEAは2018年にリビルドしてるのですが、なんていうか、、重いんですね。

NETSEAはLaravelとnpm-scripts使ってるんですが、
CSSとかほぼ全ページで同じファイルを読み込んでいるので、ページや機能が増えれば増えるほどページ表示速度が遅くなるというガッカリな仕様…(´・ω・`)
SCSSのコンパイルにも1分以上かかったりしていて、いったい1ヶ月間に何十時間コンパイル待ってるのかという気持ちになります。

というわけで、まずSCSSのコンパイルを早くしたいので、弊社サービス開発部のデザイナーのMGRに助けを求めました。
結論はタイトルの通りなのですが、なぜそうなってしまったのかを書こうと思います。

現状なぜ遅いのか？

私にはわからない。教えてください。
Laravel MixでSCSSのコンパイルをしてます。このへんはエンジニアさんに任せっきりだったので後から知ったのですが、こちらの記事→『Laravel Mixでwebpackをもっと簡単に使う方法』のようなやり方をしています。
これ、SCSSファイルが増えるたびにwebpack.mix.jsに追記しないといけないようなんですね。

webpack.mix.js

let mix = require('laravel-mix');
let sass_option = require('./mix/sass');

mix.sass('public/pc/assets/scss/buyer.scss', 'public/pc/assets/css', sass_option)
    .sass('public/pc/assets/scss/common.scss', 'public/pc/assets/css', sass_option)
    .sass('public/pc/assets/scss/special.scss', 'public/pc/assets/css', sass_option)
    .sass('public/pc/assets/scss/help.scss', 'public/pc/assets/css', sass_option)
    .sass('public/pc/assets/scss/header_bnr.scss', 'public/pc/assets/css', sass_option)
    .sass('public/sp/assets/scss/common.scss', 'public/sp/assets/css', sass_option)
    .sass('public/sp/assets/scss/buyer.scss', 'public/sp/assets/css', sass_option)
    .sass('public/sp/assets/scss/special.scss', 'public/sp/assets/css', sass_option)

ナニコレ・・・(；´Д`)

今後ページ表示速度の高速化をしたいときに、ページごとにSCSSファイル作ったらここが無限に増えていくということですね。
（今はbuyer.scssにほとんどのスタイルつっこんでる…。）

こんなのscssフォルダにscssファイル作ったら勝手にcssフォルダに入れてほしいですよね。
↑やり方あるのかもしれませんが見つけられず…

さらにNode-sass使うと早いよ！などの情報があったりして混乱。
compass-mixinsは使ってるけどCompassは使ってない…
（@q@）？？？？結局何が原因で遅いのかはわからない。元々こんなものなの？

Gulpを入れよう

時代は脱Gulp！Gulpは学習コストかかる！npm-scriptsでシンプルかつ高速な開発環境！
ググるとそんなページばかり出てきます。しかし、

うちくらいの規模のサイトになるとnpm-scriptsで書き換えるにしたってpackage.jsonの中がめっちゃ長くなってメンテナンス性が悪くなるよ

という神のお告げがあり、やはりGulpを入れようということになりました。
なんも知らないので学習コストで言ったら私にとってはどっちも同じだしね！！d=(^o^)=b

弊社の別プロジェクトで神が作った爆速のGulp環境があるので、まるごとコピーして使わせてもらうことにしました。
（scssフォルダにscssファイル作ったら勝手にcssフォルダに入るようになってます！）
ちなみに、GulpでコンパイルするSCSSと、これまでのSCSSのフォルダは別にして、少しずつ移動させて細切れにリリースすることにしました。（全部移動しちゃうと一度に全ページ検証することになるので）

ぶつかるnode_modules

Gulpファイルをコピーしてきて、プロジェクトファイル直下でnpm install。
node_modules/.bin/gulpに成功！はやいぞ！

そして、既存の環境が動かなければ意味がないのでnpm run dev！！

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/XXX/.npm/_logs/XXX.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/XXX/.npm/_logs/XXX.log

エラーだ！

[Laravel] "npm run dev"の実行時にエラー"ERR! code ELIFECYCLE"が発生した時
なんだかこれっぽいのですが、嫌な予感がしますね。

npm installし直してnpm run devが成功したら今度はGulpができなくなりますね。

これもう別々のnode_modules使うしかないよね？

というわけで、プロジェクトファイル直下には既存のnpm-scriptsのnode_modules、
もう1階層下でnpm installして、Gulp用のnode_modulesができました＼(^o^)／
これでめでたく同時に両方が実行できるようになりました！！ﾔｯﾀー！

まとめ

実はここまでくるのにもっと色んなエラーやなんかに悩まされました。
失敗しても大丈夫なように別のvagrantfile作ってもらったのに、結局一緒になっちゃったりとか。
特にMGR3人の貴重な時間を結構いただいてしまって申し訳なかったです。

今回のことで、少しだけnpmとかが理解できたので良かったのですが、ここからが大変です(；^o^)
SCSSを移動したあとはJSをwebpackでモジュール化したいし、
ゆくゆくはnpm-scriptsとGulpの同居解消を目指します！俺たちの戦いはこれからだ！

こうしたらいいよとかご意見ありましたら、コメントいただけると嬉しいです