看板マート公式ブログ

看板マートが運営する公式ブログです。お客様の声や、施工事例なども紹介して参ります!

VS CodeでSassのコンパイルをGulpから拡張機能Live Sass Compilerに変えました!

はじめに

看板マートではサイト制作・運営も自社で行っています。今回は制作環境をブラッシュアップ?したので、ちょっとご紹介しようかなと思います。

ちなみに、看板の話題は全く出てきませんので、悪しからず😅

 

これまでの制作環境

エディタはVS Code(Visual Studio Code)を使用しています。cssは基本的にはSass(SCSS)で、コンパイルはGulp。

ちなみにこんな感じのをつかってました👇

f:id:kanbanmart:20191017131637p:plain

で、これ見て頂くとjsの書き方がちょっと古いですよね…。

書き換えようと思いながら、面倒でずっとそのまま使ってました。

当然、package.jsonにはgulp v3の記述が😅

"gulp""^3.9.1",

gulpもv4が出てから随分たちますし、ちょっと私自身の制作状況も落ち着いてきたので、環境を見直すことにしました。

 

現在の制作環境

現在もエディタは継続してVS Codeを使っています。そしてSassのコンパイルには拡張機能のLive Sass Compilerを使っています。

setting.jsonで色々と設定できます。私はこんな感じにしています。

スクショ貼り付けですみません🙏

f:id:kanbanmart:20191017133414p:plain

sourcemapは個人的に使わないのでfalseにしちゃってます。だいたいどこに書いたのか分かるので…。

formatsは欲張りなので2つ。アップロードするのはminだけですけど。

autoprefixもがっつりしっかり目でやってます。

 

他にも色々と設定できます。

詳細はこちら:https://github.com/ritwickdey/vscode-live-sass-compiler

 

じつは、そもそもGulpを使うのをやめました…!

Gulpでは同一の環境構築ができることがメリットですが、ほぼ1人ですし、制作のメインは自社サイトなので、必要ないのでは…?と。

また、Gulpでは色々タスクを走らせていましたが、Sassのコンパイル以外のタスクもだいたい補完できたので、当分はこれで進めようかなと思っています。

困ってるのは、css-mqpacker。いい方法がないかと調べてますが、とりあえずバラバラ記述で・・・

 

おわりに

お察し頂いたと思いますが、gulp3→gulp4に書き換えでエラーが出る事が多くて、直しても次のエラーが出て、ちょっと現実逃避していたら拡張機能でできるじゃん!となりました。

このままgulp4の修正のために調べたりして時間を使うより、拡張機能でサクッとやっちゃおう…、となりました。そして、ほんとうにサクッと出来てしまって、費やした時間を返して…😭という気持ちです。

 

みなさんも、一つのやり方に固執せずに、いろいろな手法を試しましょう(自戒を込めて・・・)