はじめに
看板マートではサイト制作・運営も自社で行っています。今回は制作環境をブラッシュアップ？したので、ちょっとご紹介しようかなと思います。
ちなみに、看板の話題は全く出てきませんので、悪しからず😅
これまでの制作環境
エディタはVS Code（Visual Studio Code）を使用しています。cssは基本的にはSass（SCSS）で、コンパイルはGulp。
ちなみにこんな感じのをつかってました👇
で、これ見て頂くとjsの書き方がちょっと古いですよね…。
書き換えようと思いながら、面倒でずっとそのまま使ってました。
当然、package.jsonにはgulp v3の記述が😅
gulpもv4が出てから随分たちますし、ちょっと私自身の制作状況も落ち着いてきたので、環境を見直すことにしました。
現在の制作環境
現在もエディタは継続してVS Codeを使っています。そしてSassのコンパイルには拡張機能のLive Sass Compilerを使っています。
setting.jsonで色々と設定できます。私はこんな感じにしています。
スクショ貼り付けですみません🙏
sourcemapは個人的に使わないのでfalseにしちゃってます。だいたいどこに書いたのか分かるので…。
formatsは欲張りなので2つ。アップロードするのはminだけですけど。
autoprefixもがっつりしっかり目でやってます。
他にも色々と設定できます。
詳細はこちら：https://github.com/ritwickdey/vscode-live-sass-compiler
じつは、そもそもGulpを使うのをやめました…！
Gulpでは同一の環境構築ができることがメリットですが、ほぼ１人ですし、制作のメインは自社サイトなので、必要ないのでは…？と。
また、Gulpでは色々タスクを走らせていましたが、Sassのコンパイル以外のタスクもだいたい補完できたので、当分はこれで進めようかなと思っています。
困ってるのは、css-mqpacker。いい方法がないかと調べてますが、とりあえずバラバラ記述で・・・
おわりに
お察し頂いたと思いますが、gulp3→gulp4に書き換えでエラーが出る事が多くて、直しても次のエラーが出て、ちょっと現実逃避していたら拡張機能でできるじゃん！となりました。
このままgulp4の修正のために調べたりして時間を使うより、拡張機能でサクッとやっちゃおう…、となりました。そして、ほんとうにサクッと出来てしまって、費やした時間を返して…😭という気持ちです。
みなさんも、一つのやり方に固執せずに、いろいろな手法を試しましょう（自戒を込めて・・・）
