VScode住人の探検記

Visual Studio Codeでなんでもこなすのがポリシー。LaTeX（2020/7/19~）, C（2021/1/25~）, C#（2/4~）, HTML&CSS（2/14~）, Python（2/16~）, JavaScript（2/28~）, jQuery（3/18~）, Sass(Scss)（3/20~）,シェルスクリプト（3/21~）, jCanvas（5/21~）, WordPress（5/23~）, PHP（5/31~）

vscodeでのDart Sass開発環境構築、さらにシェルスクリプトで全自動化【Autoprefixer使用・Compass共存可】

Visual Stadio Code プログラミング bash shell
WARMING

2021/4/19追記

この記事に掲載しているソースコードは、時々原因不明のエラーを吐きます。
改良版のソースコードをこちらの記事にて公開しました。

この記事はSass環境構築の解説というよりも、npmやシェルスクリプト文法（特にパイプ）の解説としてご活用いただければ幸いです。

Webサイト制作本を何冊か読み、『先ほどのCSSをコピペして〜』という記述に若干の反発を感じ始めた頃、Sassの存在を知った。

Sassを使うと一般的なプログラミング言語のような分岐処理、繰り返し処理、演算などを使ってCSSを書くことができる。念願の脱コピペ。やっぱりみんな考えることは一緒だよね…

※Compassの使用方針について

Compassのサポートは2016年に終了しているので、今から使い始めるのは推奨されていない。
この記事では、基本的に雛形作成（ディレクトリの整理整頓）のためだけにCompassを利用し、Compassを使わない場合にも似たようなディレクトリ構成が用意されるようにコードの修正点を明記していく。

Sassのコンパイルには、速度が遅いCompassコマンドは使用せず、これからも新機能が増築されていく最新のDart Sassを用いる。

しかし、どんどん新たなツールが生み出されているとはいえ、CSSスプライト作成機能など、未だCompassにしかない機能もいくつかあるらしい。そんなわけで、いつでもCompassも使えるように環境だけは残しておくことにする。

インストールするもの

Visual Studio Code（この記事では必須）
コードを編集するためのテキストエディタ。テキストエディタとは名ばかりで、実際のところこれ一つでなんでもできる統合開発環境。
普通、統合開発環境といえば各言語専用だが、VScodeは本当になんでもできる。今のところ、C, C++, C#, Python, JavaScript, Ruby, HTML, CSS, Sass(Scss), LaTeX…などあらゆる言語をここで編集し、実行できている。
適当にググってカスタマイズしてほしい。
node.js（この記事では必須）
node.jsをインストールすると使えるようになるnpmコマンドがこの記事では（というかいろいろな場面で）必須になる。
インストール方法はOSによって異なるようなので、ググって…
Dart SassやAutoprefixerはPC本体には格納せず、npmコマンドでその都度ローカルインストール（自分で作ったSassコードなどと一緒に共有できるように作業ディレクトリにインストール）するので、Compassと共存させない場合はこれ以上のインストール作業は必要ない。
Ruby（Compassと共存させる場合）
Sassコードをコンパイル（ブラウザが認識可能なCSSに変換）するために必要。
Macは最初から入っているのでスルー。Windowsの方は申し訳ないがググって…
Sass（Compassと共存させる場合）
CSSをプログラミング言語のように効率的に書ける言語。
黒い画面からgem install sassでインストールできるはず。Macの方はsudoを先頭につけて。
compass（Compassと共存させる場合）
Sassで使える便利グッズ集（Sassのミックスインや関数をライブラリ化したもの）。Sassのコンパイラとしても使える。
黒い画面からgem install compassでインストールできるはず。Macの方はsudoを先頭につけて。
autoprefixer-rails（Compassと共存させる場合）
CSSベンダープレフィックス（ブラウザごとの表示の差異をなくすために必要なコード）を自動で追加してくれるツール。
黒い画面からgem install autoprefixer-railsでインストールできるはず。Macの方はsudoを先頭につけて。
csso-rails（Compassと共存させる場合）
CSS縮小化ツール。別に入れなくてもよさそうだけど一応…
黒い画面からgem install csso-railsでインストールできるはず。Macの方はsudoを先頭につけて。

npmの意義

npmでは一つのアプリケーションを構成するソースファイルetc.を集めたフォルダをパッケージという。

ここではあえてソースファイルetc.と書いた。
npmの凄いところは、自分で書いたソースファイルだけでなく、それをコンパイルするコンパイラなども含めて一つのアプリケーションとしてまとめられるところだ。

例えば、作ったアプリケーションを人に提供するとき、中身がHTML, CSS, Javascriptのみであれば、相手のPCでもすぐにブラウザで実行できるだろう。
しかし、TypeScriptで書かれたファイルなどは、JavaScriptへコンパイルしなければ実行できない。相手にわざわざ『TypeScriptのコンパイラをインストールしておいてね』と伝えなくてはならない。これは面倒くさい。

そこでnpmが活躍する。npmでは、ローカルインストールという機能によって、コンパイラなどを好きなディレクトリにインストールすることができる。
アプリケーションをコンパイラとセットで相手に渡せば、相手の環境にかかわらずそれを実行できる。
また、コンパイルのためのコマンドは、オプション指定などで長くなることも多い。npmでは、それらのコマンドを短いコマンドに置き換えられるように、そのパッケージ専用の独自のコマンドを設定することができる。

これから行う工程の目的はこれくらいで理解できるはず。もっと詳しく学びたい方にはこちらの記事をお勧めしておく。（まだ私も読んでいる途中）

Dart Sassをコンパイルするまでの道のり

さて、新しいnpmパッケージを作成してSassをコンパイルするまでの道のりは、結構面倒なものである。

  1. パッケージの雛形を作成
  2. パッケージ内にSassをローカルインストール
  3. package.jsonに自作コンパイルコマンドを追加

これに加えて、パッケージ内で、拡張子が.scssやsassのファイルはsassフォルダに収納し、それをコンパイルして得られる拡張子が.cssのファイルはcssフォルダに吐き出されるように設定したい。
（これはcompassプロジェクトとして作成した雛形を少し書き換えてそれをnpmパッケージとして登録すれば容易に実現できるが、compassを使わない方法も紹介する。）

また、CSSベンダープレフィックス（ブラウザごとの表示の差異を埋めるための追加コード）を自動で書き加えるためのツールを導入した方が良い。

これらの作業を、新たなディレクトリでSassを書くたびに行うのか？

…それは面倒くさすぎるので、自動化ツールを作りました。

Sassを使う環境（npmパッケージ）作成の自動化

初期設定

下のMySassCreate.shとMyConfig.rbを同じディレクトリにコピーしてね。

参考までに、私はホームディレクトリ/Users/tomixyにMyShellScriptというフォルダを作って、その中にMySassCreate.shとMyConfig.rbを置いている。
置き場所に応じて、以降登場する/Users/tomixy/MyShellScript/をそのディレクトリ名に書き換えてね。

macの方はchmod u+x /Users/tomixy/MyShellScript/MySassCreate.shを実行するのを忘れずに。これを実行しないとMySassCreate.shは動きません。

実行方法

  1. 黒い画面を開く
  2. Windowsならbashコマンドでbashを起動
  3. パッケージ（作業ディレクトリ）を作りたい場所にcdコマンドで移動
  4. /Users/tomixy/MyShellScript/MySassCreate.sh パッケージ名を実行

すると、次のようなフォルダが生成される。

f:id:nix_campane:20210322104246p:plain
例として、パッケージ名はsampleとした。

自動化シェルスクリプトMySassCreate.sh全文

zshでしか動作確認していないが、bashでも使えるはず。（というかそもそもbashのためのコード）
windowsの方は…そうだなあ。私はwindows時代、この記事を見ながらbashを導入した気がする。

あ、そうだ忘れてた…jqをインストールしておかないと動かないので注意。
macならsudo brew install jqでインストールできるけど…OSによって違うのでjq インストール OS名と検索。

MySassCreate.sh

#!/bin/sh

PROJECT=$1

compass create $PROJECT # compassを使わない場合はコメントアウト
# mkdir $PROJECT # compassを使わない場合はコメントイン
cd $PROJECT 
# mkdir sass # compassを使わない場合はコメントイン
mkdir css

# compassを使わない場合は下の5行をコメントアウト
cd stylesheets
mv *.css ../css
cd ..
rm -d stylesheets
cp -f /Users/tomixy/MyShellScript/MyConfig.rb config.rb

npm init -y
npm install sass fibers --save-dev
npm install postcss postcss-cli autoprefixer --save-dev 

cat package.json|jq '.scripts += {"start": "sass sas$FILENAMEscss:css/$FILENAME.css --style expanded --watch | postcs--useautoprefixer -b \"last 10 versions\" css/$FILENAME.css -css$FILENAME.css "}' > package.txt
cat package.txt > package.json
rm -f package.txt

細かく解説

※ここからしばらくはコードの解説なので、早く実行したい人はここに飛んでね

シェバン

MySassCreate.shの一部

#!/bin/sh

『これはbashスクリプトですよ〜』とPCに宣言する部分。この記述のあるファイル名を黒い画面で入力＋Enterすると、PCは自動的にbashでこのスクリプトを実行しようとする。

もしzshで実行したのなら、この部分は『これはbashスクリプトですよ〜、でもあなたはzshみたいね…まあいいわ、うまくやってあげる。』とPCに呼びかける意味合いになる。 Z ShellのWikiより、

zshを/bin/shとして実行したとき、Bourne Shellの振りをするようにできる。

bashはBourne Shell、zshはZ Shellの略らしいよ。

しかしシェルとはいえ、Power ShellではMySassCreate.shは実行できないと思われる。構文が結構違うらしい。

コマンドライン引数の取得

MySassCreate.shの一部

PROJECT=$1

/Users/tomixy/MyShellScript/MySassCreate.sh パッケージ名としてこのシェルスクリプトを実行するわけだが、このとき与えたパッケージ名が$1に格納されている。
この定数を、これからはPROJECTと呼ぶよ〜という意味。

不思議なことに、PROJECT = $1としてはダメらしい。=の左右にスペースを空けてはいけません。

compassプロジェクト（npmパッケージとなるフォルダ）の作成

MySassCreate.shの一部

compass create compass create $PROJECT # compassを使わない場合はコメントアウト
# mkdir $PROJECT # compassを使わない場合はコメントイン

compass create フォルダ名で、指定したフォルダ内をSass作業用に整理してくれる。具体的には、次のような中身になる。

f:id:nix_campane:20210322125512p:plain
compass create sampleの実行例

私も詳しくは知らないが、

ie.css
Internet Exprorer対応のCSSを書くための雛形
print.css
印刷用のCSSを書くための雛形
screen.css
画面表示用の(つまり普通の)CSSを書くための雛形（CSSリセットの宣言つき）
config.rb
compassコマンドでのコンパイル用の設定を書いておくファイル


…らしい。

とはいえ、前述したようにcompassのサポートは既に終了しているので、ここで作られたie.cssを使ったところで最新のものに対応できるかはわからない。

シェルスクリプトでは、#以降は実行されない部分になる。よって、ここには何を書いても良い。
#!だけは例外なので注意。#!で始まるものはシェバンとして解釈されてしまう。

compassを使わない場合は、compass createの前に#を置く（コメントアウトする）ことでcompass createコマンドを無効化にする。 また、その場合はcompassが作るはずだったフォルダを手動で作成しなければならないため、# mkdir $PROJECTの先頭の#を取る（コメントインする）。

言い忘れていたが、シェルスクリプトでは、事前に宣言しておいた変数は$変数名で参照できる。

パッケージ内のフォルダをカスタマイズする

MySassCreate.shの一部

cd $PROJECT 
# mkdir sass # compassを使わない場合はコメントイン
mkdir css

# compassを使わない場合は下の5行をコメントアウト
cd stylesheets
mv *.css ../css
cd ..
rm -d stylesheets

おそらく、今のカレントディレクトリは$PROJECTフォルダを置いた場所（つまり、$PROJECTフォルダの手前のフォルダ）になっていると思うので、cd $PROJECTでパッケージフォルダ内に移動する。

compassを使わなかった場合は、まだsassフォルダもcssフォルダも作成されていないので、mkdirコマンドで作成する。

compassで自動作成した場合は、拡張子が.cssのファイルがstylesheetsフォルダに格納されている。
わかりづらいので、stylesheetsフォルダは削除し、新規に作成したcssフォルダに中身を移すことにする。

cd stylesheets以降はこの移行作業になるので、compassを使わない場合はコメントアウトで無効化した方が良い。

cd stylesheetsでstylesheetsフォルダ内に移動し、中のファイルをcssフォルダ内に移動する。
*はワイルドカードといい、どんな文字列でもよいことを表す。つまり、*.cssは拡張子が.cssのすべてのファイルである。
../cssは、一つ前のディレクトリに戻って（stylesheetsディレクトリから出て）、その後cssディレクトリ内に入った場所を表す。

mv *.css ../css
すべてのcssファイル（*.css）をcssディレクトリ（../css）にmoveする
cd ..
cssディレクトリから出る（一つ前のディレクトリに戻る）
rm -d stylesheets
stylesheetsというディレクトリ（-d）を削除（remove）する


compassコマンドによるコンパイルの設定をする

compass createコマンドによって作られたconfig.rbファイルの中身はデフォルトのものである。 これをカスタマイズしたものをMyConfig.rbとし、これをそっくりそのままconfig.rbにcopyする。

MySassCreate.shの一部

cp -f /Users/tomixy/MyShellScript/MyConfig.rb config.rb

デフォルトのconfig.rb

require 'compass/import-once/activate'

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

compass設定ファイルの雛形のMyConfig.rb

require 'compass/import-once/activate'

# compassコマンドによるコンパイルでもベンダープレフィックスを使用するための設定
require "autoprefixer-rails"
require "csso"
on_stylesheet_saved do |file|
  css = File.read(file)
  File.open(file, "w") do |io|
    io << AutoprefixerRails.process(css, browsers: ["> 1%", "last 2 versions", "ie 10"])
  end
end

http_path = "/"
css_dir = "css" # 新規に作ったcssフォルダにcssファイルが出力されるようにする
sass_dir = "sass"
images_dir = "image"
javascripts_dir = "js"

# その他の設定
output_style = :expanded
relative_assets = true
line_comments = false

ベンダープレフィックスの設定は、このブログから丸ごとコピペした。
その他の設定については、このブログを参考に選択した。

npmパッケージを作成

MySassCreate.shの一部

npm init -y

これで$PROJECTフォルダ内にpackage.jsonファイルやnode_modulesフォルダが作成される。package-look.jsonファイルも作成されているかも。
npm initコマンドを実行すると、途中でパッケージの設定についていろいろと質問されるが、それらをすべてスキップしてデフォルト値を埋め込むために-yオプションをつけている。

Sassコンパイラなどをnpmでローカルインストール

MySassCreate.shの一部

npm install sass fibers --save-dev
npm install postcss postcss-cli autoprefixer --save-dev

npm install パッケージ名
カレントディレクトリにパッケージをローカルインストールする
fibers
よくわからないが、速くインストールするために処理の仕方を変えるオプション
--save-dev
インストールしたパッケージを、package.jsonに依存パッケージ（これがないとこのアプリは動かないよ！というパッケージ）として記述するオプション。
依存パッケージがアップデートすると今まで使えていたコマンドなどが使えなくなり、コードの修正が必要になることもある。依存パッケージをpackage.jsonに書いておくと、npm側でいろいろな管理処理をしてくれるらしい。
PostCSS
CSSを変換するツール
postcss-cli
PostCSSを黒い画面で使えるようにするツール
Autoprefixer
PostCSSによってベンダープレフィックスを追加するツール

package.jsonの修正点

JSONは、簡単にいえば{ key : value }という形で表されたデータの集まりである。

npm init -yコマンドによりデフォルトで作成されるpackage.jsonは、次のようになっている。

デフォルトのpackage.json

{
  "name": "$PROJECT",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

このファイルを自動で次のように書き換えることを目指す。（scriptsインデックスの値に"start":"コンパイルコマンド"を追加した）

修正後のpackage.json（イメージ）

{
  "name": "$PROJECT",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &exit 1",
    "start":"コンパイルコマンド"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

コンパイルとベンダープレフィックス付加を一気に行うコマンドを作成

コンパイルコマンドとだけ示した部分には、次のコードが入る。 （$filenameは、コンパイルコマンド実行時に渡す引数）

コンパイルコマンド

sass sass/$FILENAME.scss:css/$FILENAME.css --style expanded --watch | postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.css
sassコマンドについて
sass
拡張子が.scss、.sassのファイルをコンパイル（.cssファイルに変換）するコマンド
sass sass/$FILENAME.scss:css/$FILENAME.css
sass コンパイルするファイル:コンパイル後のファイル
--style expanded
コンパイル後のCSSファイルの書式をexpanded（わかりやすいブログはこちら）に設定
--watch
以後、黒い画面を開いている間は保存する度にコンパイルを実行してCSSファイルを更新する
postcssコマンドについて
postcss ファイル名.css
引数として指定したCSSファイルを解析
--use autoprefixer
postcssでautoprefixerを使うオプション
-b "last 10 versions"
10バージョン前のブラウザまで対応
-o ファイル名
指定したファイルに改変後のCSSを出力
シェルスクリプトにおけるパイプ|
コマンドA | コマンドB
コマンドAを実行し、その標準出力をコマンドBの引数としてコマンドBを実行
標準出力
黒い画面に吐き出されたテキストのこと


コマンドAがファイルの中身を黒い画面に表示するというものなら、表示されたファイルの中身をコマンドBで加工するということになる。

ただし、sassコマンドは.cssファイルを作成するだけで、黒い画面には何も表示しない。このままではpostcssの引数は空であり、エラーになってしまうので、postcssにはcss/$FILENAME.cssという引数をわざわざ渡している。

コマンドBにあたる部分である次のコード

コマンドB

postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.css

を解体すると、コマンド本体がpostcss、引数がcss/$FILENAME.css、オプションが--use autoprefixerと-b \"last 10 versions\"と-o css/$FILENAME.cssということになる。

このように、コマンドAが表示系のコマンドではなく、コマンドBに明示的に引数を渡している場合、パイプ|はただ単にコマンドAを実行した後にコマンドBを実行するという意味の記号として使われている。

コマンドを書き加えたjsonテキストを一旦package.txtに吐き出す

MySassCreate.shの一部

cat package.json|jq '.scripts += {"start": "sass sass/$FILENAME.scss:css/$FILENAME.css --style expanded --watch | postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.css "}' > package.txt

もっとわかりやすく表すと、

MySassCreate.shの一部

cat package.json | jq '.scripts += {"start": " さっきのコマンド "}' > package.txt
cat ファイル名
ファイルの中身を黒い画面に表示する
表示系コマンド > ファイル
コマンドの結果を黒い画面に表示するのではなく、ファイルに書き出す
jq '処理' JSON形式のファイル
JSON形式のファイルの中身を取得し、指定された処理をして、黒い画面に表示
.KEY
インデックスがKEYである要素{ "KEY" : "value" }
.KEY += { ITEM }
インデックスがKEYである要素{ "KEY" : value }のvalueの部分にITEMを追加して、要素全体を書き換える


jqコマンドの引数は一見存在しないかのように見える。
しかし、catが表示コマンドであるので、catで表示したファイルの中身をそのままjqコマンドに渡していることになる。
引数として渡されたpackage.jsonのデータを、jqコマンドで処理する。

jq '.scripts += {"start": " コンパイルコマンド "}' package.json > package.txtでも.jsonファイルは正しく作成されるが、コンパイルコマンドの実行時になぜかコンパイル不良が頻出するので、没とした。
おそらくテキストをそのままjqで処理させるのではなく、catコマンドでテキストをリスト化してからjqで処理させた方がいいのだろう。
どちらにしてもシェルスクリプトは原因不明の不具合が日常茶飯事らしいので、スマートなコードを目指すよりも経験的にうまくいく方法をとった方がよさそう。

jq '.scripts += {"start": ""sass sass/$FILENAME.scss:css/$FILENAME.css --style expanded --watch | postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.css"}'というコマンドによって、インデックスがscriptsである要素は次のように変わる。

BEFORE

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }

AFTER

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "sass sass/$FILENAME.scss:css/$FILENAME.css --style expanded --watch | postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.css "
  }

そして、上のようにscriptsの値を書き換えたものを、本来なら黒い画面に表示するわけだが、代わりに> packge.txtによってpackage.txtファイルに書き出すことになる。

最初からpackage.jsonに吐き出せばいいのでは？と思うかもしれないが、そうするとpackage.jsonの中身は空になってしまう。この記事に書かれてあるように、直接package.jsonに上書きするのは原理的に不可能なようだ。

package.txtの中身

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "sass sass/$FILENAME.scss:css/$FILENAME.css --style expanded --watch | postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.css "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "fibers": "^5.0.0",
    "postcss": "^8.2.8",
    "postcss-cli": "^8.3.1",
    "sass": "^1.32.8"}
  }
}

package.txtの中身をpackage.jsonにコピーする

MySassCreate.shの一部

cat package.txt > package.json
rm -f package.txt

cat package.txt > package.jsonによって、package.txtの中身を黒い画面に表示する代わりに、package.jsonに吐き出す。 このとき、元々のpackage.jsonの内容は消去され、完全に上書きされる。

一時的なデータ保管用であったpackage.txtはもう不要なので、rm -f package.txtで削除する。 『削除していいのですか？』的な確認メッセージが出ると、それに回答する手間が生じるので、確認メッセージを表示しないために-fオプションをつけておく。

作成した自動化ツールの使い方

初期設定が済んでいることを前提で話を進めます。

あと、VScodeユーザーならこの章は読むだけ無駄です。ここに進むことをおすすめします。

SassやCSSを作成するフォルダの作成

実行方法に書かれてある通りなので略。

Sassを書く

さっき作ったフォルダの中の、sassフォルダの中にオリジナルの.scssファイル（または.sassファイル）を追加していってね

Sassのコンパイル

  1. cdコマンドでsassファイルの中へ移動
  2. FILENAME=コンパイルしたいファイル名 npm run startコマンドを実行

startというのがpackage.jsonで定義したコンパイルコマンドだが、このコマンドに直接引数を渡すことは不可能なので、FILENAMEという定数を事前に定義して、それをコマンド内で参照する手段をとっている。

cssフォルダを覗いてみると、コンパイルしたかったファイルと同名の.cssファイル（と.css.mapファイル）が作成されているはず。ベンダープレフィックスも自動で追加されています!!

なお、このコマンドの実行以降は、sassファイルをいじって再保存したり、新たなsassファイルを作って保存したりすると、勝手にコンパイルされてcssフォルダ内が更新されていくよ。黒い画面を閉じない限りね!!

…って、これだとまだ面倒臭いじゃん

…と思いませんでした？

VScodeユーザーなら、ワンクリックでできるようになります!!

VScodeで簡単にパッケージ作成＆Sassコンパイルできるようにする

初期設定

task.jsonを開く

  1. shift ctrl P（macならshift(⬆️) command P）
  2. taskと入力
  3. ユーザータスクを開くをクリック

開かれたtask.jsonに次の内容をコピペ

task.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Sass new project create",
            "type": "shell",
            "command": "/Users/tomixy/MyShellScript/MySassCreate.sh",
            "args": ["${input:SassProjectName}"],
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "Sass compile & watch start",
            "type": "shell",
            "command": "cd ${fileDirname} && cd .. && FILENAME=${fileBasenameNoExtension} npm run start",
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ],
    "inputs": [
        {
            "id": "SassProjectName", // ${input:***}で指定したID
            "description": "Sass new project name:", // 入力説明文
            "default": "sample", // デフォルト入力値
            "type": "promptString" // 入力タイプ
        }
    ],
}

使い方

SassやCSSを作成するフォルダの作成

  1. shift ctrl B（macならshift(⬆️) command B）
  2. Sass new project createをクリック
  3. 作成したいフォルダ名を入力（デフォルトではsample）

Sassを書く

さっき作ったフォルダの中の、sassフォルダの中にオリジナルの.scssファイル（または.sassファイル）を追加していってね

Sassのコンパイル

  1. shift ctrl B（macならshift(⬆️) command B）
  2. Sass compile & watch startをクリック

cssフォルダを覗いてみると、コンパイルしたかったファイルと同名の.cssファイル（と.css.mapファイル）が作成されているはず。ベンダープレフィックスも自動で追加されています!!

これ以降はsassファイルをいじって再保存したり、新たなsassファイルを作って保存したりすると、勝手にコンパイルされてcssフォルダ内が更新されていくよ。

あとがき

この自動化を実現するために初めてきちんとシェルスクリプトを勉強したので、ほぼほぼシェルスクリプト文法のアウトプットブログになってしまった。

実は、ブログに載せるために何度もテストしていく中で、MySassCreate.shに重大な欠陥があることに気がついた。もちろん修正済みのものを掲載している。ブログにまとめること自体がデバッグ作業。 それにしても、その欠陥というものは他の言語であれば即エラーを吐き出すようなヤバいものだった。あんなコードで動いてしまうシェルスクリプトって怖い。

実を言うとSassの勉強はまだしていないので、これからいろいろコンパイルしていく中でエラーが出る可能性も…そうしたらまたこの記事を修正しよう。安定して動作できることがある程度確認できたらGitHubにも載せる。

task.jsonの書き方についてもいつか追記するかも。とりあえず疲れたからこれでおしまい。