【改良版】VScodeでのDart Sass環境構築、さらに自動で作業フォルダ作成
jQueryを勉強中なのだが、動作を確認するにはhtmlファイルを作成し、jsファイルを作成し、cssファイルを作成し、場合によっては画像も作業フォルダに入れておかなければならない。
これらをすべて同じフォルダに入れておくとごちゃごちゃになるので、作業フォルダ内にいくつかフォルダを作成し、jsファイルはjsフォルダに、cssファイルはcssフォルダに、画像はimagesフォルダに入れておくことにしよう。
また、私はsassを用いてcssを書いているので、scssファイルを入れておくsassフォルダも作っておこう。そしてコンパイルによって生成されたcssファイルはcssフォルダ内に格納されるようにしたい。
…さて、こんなことをいちいち手動で行うのは泥臭すぎるので、ここはプログラミングの力を借りて自動化しよう、というのが本記事の主題である。
快適なWebページ制作環境となる雛形フォルダを一発で作成できるようにしたい。さらに、前記事のコードを改良し、scssファイルのコンパイルも簡単に行えるようにしたい。
本記事で実現するもの
快適なWebページ制作環境となる雛形フォルダの作成
プロジェクトフォルダを置きたいフォルダをVScodeで開いた上で、shift ctrl B（macならshift(⬆️) command B）を押すと、画面上部が次のようになる。
そこで、Sass new project createを選択する。
デフォルトではプロジェクトフォルダ名がsampleになっているが、ここはお好みの名称に書き換えてEnterキーを押せば良い。
sampleフォルダの中身を覗いてみよう。
自動的にimagesフォルダ、cssフォルダ、sassフォルダ、jsフォルダ、index.htmlが作成されているのがわかる。config.rbについては後述する。
それぞれのフォルダの中身も覗いてみよう。
scripts.js、style.scss、index.htmlは空のファイルであるので、この中にコードを書いていけば良い。もちろん、お好みでファイル名を変えることもできるが、大概はこのタイトルのままでいいだろう。
また、cssフォルダ内にはreset.cssが用意されている。これは基本的に編集せず、そのままhtmlファイル内で読み込めば良い。
こうして、ショートカットキーとプロジェクト名の入力だけで、快適にWebページ制作を始められる環境が整う。
.scssファイルのコンパイル
コンパイルしたいscssファイルをVScodeで開いた状態で、
1. shift ctrl B（macならshift(⬆️) command B）を押す
2. Sass compileを選択する
すると、そのscssファイルがcssファイルに変換され、cssフォルダ内に吐き出される。
実現のための設定
さて、上述の便利機能をVScodeに増設するまでの過程をこれから解説していく。
インストールするもの
- Visual Studio Code
-
コードを編集するためのテキストエディタ。テキストエディタとは名ばかりで、実際のところこれ一つでなんでもできる統合開発環境。
普通、統合開発環境といえば各言語専用だが、VScodeは本当になんでもできる。今のところ、C, C++, C#, Python, JavaScript, Ruby, HTML, CSS, Sass(Scss), LaTeX…などあらゆる言語をここで編集し、実行できている。
適当にググってカスタマイズしてほしい。 - node.js
- node.jsをインストールすると使えるようになるnpmコマンドがこの記事では（というかいろいろな場面で）必須になる。
インストール方法はOSによって異なるようなので、ググって… - Ruby（Compassと共存させる場合）
-
Sassコードをコンパイル（ブラウザが認識可能なCSSに変換）するために必要。
Macは最初から入っているのでスルー。Windowsの方は申し訳ないがググって… - Sass（SCSS）
-
CSSをプログラミング言語のように効率的に書ける言語。
黒い画面からgem install sassでインストールできるはず。Macの方はsudoを先頭につけて。 - compass
-
Sassで使える便利グッズ集（Sassのミックスインや関数をライブラリ化したもの）。Sassのコンパイラとしても使える。
黒い画面からgem install compassでインストールできるはず。Macの方はsudoを先頭につけて。 Compassのサポートは2016年に終了しているので、今から使い始めるのは推奨されていない。
この記事では、基本的に雛形作成（ディレクトリの整理整頓）とreset.cssの生成のためだけにCompassを利用し、Sassのコンパイルには、速度が遅いCompassコマンドは使用せず、これからも新機能が増築されていく最新のDart Sassを用いる。
しかし、どんどん新たなツールが生み出されているとはいえ、CSSスプライト作成機能など、未だCompassにしかない機能もいくつかあるらしい。そんなわけで、いつでもCompassも使えるように環境だけは残しておくことにする。
npmコマンドでインストールするもの
まず、sassのコンパイルに必要なものをインストールする。
前記事ではローカルインストールしていたが、プロジェクトフォルダ作成の度にいちいちダウンロードするのは時間がかかるので、個人で使う分にはグローバルインストールで良いと思う。というわけで-gオプションをつけている。
Terminal or CommandPrompt
npm install -g sass fibers次に、ベンダープレフィックス（ブラウザごとの表示の差異をなくすために必要なコード）の自動付与に必要なものをインストールする。
Terminal or CommandPrompt
npm install -g postcss postcss-cli autoprefixer初期設定
MySassCreate.shの配置
次のMySassCreate.shをどこかしらに置く。
zshでしか動作確認していないが、bashでも使えるはず。（というかそもそもbashのためのコード）
windowsの方は…そうだなあ。私はwindows時代、この記事を見ながらbashを導入した気がする。
参考までに、私はホームディレクトリ/Users/tomixyにMyShellScriptというフォルダを作って、その中にMySassCreate.shを置いている。
置き場所に応じて、以降登場する/Users/tomixy/MyShellScript/をそのディレクトリ名に書き換えてね。
macの方はchmod u+x /Users/tomixy/MyShellScript/MySassCreate.shを実行するのを忘れずに。これを実行しないとMySassCreate.shは動きません。
MySassCreate.sh
#!/bin/sh
PROJECT=$1
compass create $PROJECT
cd $PROJECT
mkdir css
cd stylesheets
rm -f ie.css
rm -f print.css
mv screen.css ../css
cd ..
rm -d stylesheets
cd css
mv screen.css reset.css
cd ../sass
rm -f *.scss
touch styles.scss
cd ..
mkdir js
cd js
touch scripts.js
cd ..
mkdir images
touch index.htmltask.jsonを開く
shift ctrl P（macならshift(⬆️) command P）taskと入力ユーザータスクを開くをクリック
task.jsonの編集
次の内容をtask.jsonにコピペする。
task.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Sass new project create",
"type": "shell",
"command": "/Users/tomixy/MyShellScript/MySassCreate.sh",
"args": ["${input:SassProjectName}"],
"group": {
"kind": "build",
"isDefault": true
}
},
{
"label": "Sass compile",
"type": "shell",
"command": "cd ${fileDirname} && cd .. && sass ${file}:css/${fileBasenameNoExtension}.css --style expanded --sourcemap=none && cd css && npx postcss *.css --use autoprefixer -d ./ ",
"group": {
"kind": "build",
"isDefault": true
}
},
],
"inputs": [
{
"id": "SassProjectName",
"description": "Sass new project name:",
"default": "sample",
"type": "promptString"
}
],
}MySassCreate.shのコード解説
シェバン
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 $PROJECTcompass create フォルダ名で、指定したフォルダ内をSass作業用に整理してくれる。具体的には、次のような中身になる。
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の先頭の#を取る（コメントインする）。
言い忘れていたが、シェルスクリプトでは、事前に宣言しておいた変数は$変数名で参照できる。
フォルダ内をWeb制作用にカスタマイズする
MySassCreate.shの一部
cd $PROJECT
おそらく、今のカレントディレクトリは$PROJECTフォルダを置いた場所（つまり、$PROJECTフォルダの手前のフォルダ）になっていると思うので、cd $PROJECTでプロジェクトフォルダ内に移動する。
cd フォルダ名- 指定したフォルダ内に移動
MySassCreate.shの一部
mkdir css
compassで自動作成した場合、拡張子が.cssのファイルがstylesheetsフォルダに格納されている。
わかりづらいので、拡張子が.cssのファイルはcssフォルダに格納されるようにしたい。そのために、まずはmkdir cssでプロジェクトフォルダ内にcssフォルダを作成する。
mkdir フォルダ名- 今いるフォルダ内に指定した名前のフォルダを作成
MySassCreate.shの一部
cd stylesheets
rm -f ie.css
rm -f print.css
mv screen.css ../csscd stylesheetsでstylesheetsフォルダ内に移動し、この中にあるie.cssとprint.cssは削除し、screen.cssは新たに作成したcssフォルダに移動させる。
../cssは、一つ前のディレクトリに戻って（stylesheetsディレクトリから出て）、その後cssディレクトリ内に入った場所を表す。
rm -f ファイル名- 指定したファイルを削除（
remove）する
（-fは警告を表示せず処理を実行するためのオプション） mv ファイル名 移動先フォルダのパス- 指定したファイルを指定したフォルダに移動（
move）させる
MySassCreate.shの一部
cd ..
rm -d stylesheetscd ..で今いるstylesheetsフォルダから出て、stylesheetsフォルダを削除する。
cd ..- 今いるフォルダから出る（一つ前のフォルダに戻る）
rm -d フォルダ(ディレクトリ)名- 指定したディレクトリ（
-d）を削除（remove）する
MySassCreate.shの一部
cd css
mv screen.css reset.csscd cssでcssフォルダ内に移動し、mv screen.css reset.cssでscreen.cssをreset.cssに改名する。
mv ファイル名 変更後のファイル名- ファイル名を変更する
MySassCreate.shの一部
cd ../sass
rm -f *.scss
touch styles.scss
cd ..cd ../sassでcssフォルダから出たところにあるsassフォルダに移動する。
その後、rm -f *.scssでsassフォルダ内の全てのファイルを消去する。*はワイルドカードといい、どんな文字列でもよいことを表す。つまり、*.scssは拡張子が.scssのすべてのファイルである。
touch styles.scssで空のファイルstyles.scssを作成し、cd ..でsassフォルダから出る。
touch ファイル名- 指定した名前のファイルを作成する。このコマンドで作成したファイルの中には、何も書かれていない。
MySassCreate.shの一部
mkdir js
cd js
touch scripts.js
cd ..mkdir jsでプロジェクトフォルダ内にjsフォルダを作成し、cd jsでjsフォルダ内に移動する。
touch scripts.jsで空のファイルscripts.jsを作成し、cd..でjsフォルダから出る。
MySassCreate.shの一部
mkdir imagesプロジェクトフォルダ内にimagesフォルダを作成する。
MySassCreate.shの一部
touch index.htmlプロジェクトフォルダ内に空のファイルindex.htmlを作成する。
task.jsonのコード解説
MySassCreate.shの実行
task.jsonの一部
"tasks": [
{
"label": "Sass new project create",
"type": "shell",
"command": "/Users/tomixy/MyShellScript/MySassCreate.sh",
"args": ["${input:SassProjectName}"],
"group": {
"kind": "build",
"isDefault": true
}
}
], "inputs": [
{
"id": "SassProjectName",
"description": "Sass new project name:",
"default": "sample",
"type": "promptString"
}
]"tasks": [ ]
"label"では、shift ctrl B（macならshift(⬆️) command B）を押した時に表示されるタスク名を設定する。
今回実行する
Run Command
/Users/tomixy/MyShellScript/MySassCreate.sh プロジェクト名というコマンドはターミナルで実行するものなので、"type"はshellとする。
引数であるプロジェクト名は、"args"で管理する。
${input}は入力された文字列を表し、後の設定時に参照するために${input:id}という書式でid（名前）をつけておく。
"group"では、このタスクの分類を指定する。
"kind"には開発用タスクを表すbuildか、デバッグ用タスクを表すtestを指定することができる。今回は前者である。
shift ctrl B（macならshift(⬆️) command B）を押したときにすぐに実行できるように、"isDefault": trueとしておく。
inputs: [ ]
idがSassProjectNameである入力引数の設定を行う。
"description"で何を入力すべきかの説明文を指定し、"default"でデフォルト入力値を設定する。
最終的にこのコマンドはターミナルで実行されるので、入力タイプはターミナルに表示する文字列であるpromptStringと指定する。
Sassコンパイルコマンドの設定
task.jsonの一部
{
"label": "Sass compile",
"type": "shell",
"command": "cd ${fileDirname} && cd .. && sass ${file}:css/${fileBasenameNoExtension}.css --style expanded --sourcemap=none && cd css && npx postcss *.css --use autoprefixer -d ./ ",
"group": {
"kind": "build",
"isDefault": true
}
}shift ctrl B（macならshift(⬆️) command B）を押し、Sass compileを選択したときに実行されるコマンドは、次のものである。
"command"
cd ${fileDirname} && cd .. && sass ${file}:css/${fileBasenameNoExtension}.css --style expanded --sourcemap=none && cd css && npx postcss *.css --use autoprefixer -d ./ ",&&を使うことで、複数のコマンドを一気に実行することができる。
コマンド1 && コマンド2- コマンド1が正常に実行されたら、コマンド2を実行する
&&で結ばれたコマンド一つ一つを見ていこう。
task.jsonで使える変数
${fileDirname}- task.jsonで使える変数で、今開いているファイルが置かれているディレクトリを表す。
${file}- task.jsonで使える変数で、今開いているファイルのパスを表す。
${fileBasenameNoExtension}- task.jsonで使える変数で、今開いているファイル名から拡張子を除いたものを表す。
今開いているファイルがstyles.scssなら、${fileBasenameNoExtension}はstylesを表す。
コンパイルコマンドの解剖
cd ${fileDirname}- 今はコンパイルしたいscssファイルを開いているはずなので、
${fileDirname}はsassフォルダを表す。
つまり、sassフォルダ内に移動するという意味。 cd ..- sassフォルダから出て、プロジェクトフォルダに移動する。
sass コンパイルするファイル:コンパイル後のファイルsassコマンドで、拡張子が.scssまたは.sassのファイルをコンパイルし、cssファイルに変換できる。sass ${file}:css/${fileBasenameNoExtension}.css- コンパイルしたいファイルは今開いているファイルなので、
${file}とする。
コンパイル後のファイルはcssフォルダ内に置きたいのでcss/をつけ、その中にコンパイル前のscssファイルと同名のcssファイル（${fileBasenameNoExtension}.css）として出力する。 --style expanded- コンパイル後のcssファイルの書式を一般的なものに指定するオプション。
他にもいろいろな書式にコンパイルすることができる。詳細を知りたい方はこのブログを読むのがオススメ。 --sourcemap=none- ソースマップファイルを出力しないためのオプション。cssフォルダの中にはcssファイルだけを入れておきたいので、このオプションを付与した。
cssが長文になる場合はこのオプションをつけない方が良い気がする。
他にもいろいろなオプションがある。その他のオプションや、ソースマップファイルの存在意義についてはこのブログを読むのがオススメ。
ベンダープレフィックス自動付与コマンドの解剖
cd css- コンパイル済みのcssファイルを改変するため、cssフォルダ内に移動する。
npx postcss *.css- postcssは、cssファイルを解析、改変するツール。ここでは解析対象をcssフォルダ内にあるすべてのcssファイルにしている。
--use autoprefixer- autoprefixerは、ベンダープレフィックスを自動付与するツール。
postcssによって解析したcssファイルにベンダープレフィックスを付与する。 -d ./-dは、ベンダープレフィックス付与後のcssファイルの置き場所を指定するためのオプション。.は今いるフォルダ（cssフォルダ）を表し、./とすることでcssフォルダ内にベンダープレフィックスが付加されたcssファイルが置かれることになる。
同名のファイルは自動的に置換されるので、結局は元のcssファイルを書き換えた事になる。
index.html編集用スペニットの登録
cssファイルやjsファイルを外部に配置すると、htmlファイル内でファイルを読み込むために必ず記述しなければならないコードが増えてしまう。
それをいちいち書くのも面倒なので、htmlファイルの雛形（スペニット）を作っておこう。
html.jsonの開き方
html.jsonの編集
html.jsonの{ }の中に、次のコードを追加し、保存する。
html.json
"external jQuery and JavaScript and CSS" : {
"prefix": "exjQJSCSS",
"body": [
"<!DOCTYPE html>",
"<html lang=\"ja\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<title>$1</title>",
"\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/reset.css\" />",
"\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/${2:styles}.css\" />",
"\t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/${3:3.4.1}/jquery.min.js\"></script>",
"\t<script src=\"js/${4:scripts}.js\"></script>",
"</head>",
"<body>",
"\t$5",
"</body>",
"</html>"
]
}
スペニットの威力
早速、登録したスペニットをindex.htmlで使用してみよう。
読み込むcssファイルやjsファイルの名称は、MySassCreate.shでデフォルトで作成されるファイル名になっている。
特に変更する気がなければ、そのままtabキーを押すことでスキップできる。
また、jQueryは端末にダウンロードすることなく使えるように読み込んである。使用するバージョンは適宜変更してほしい。
私は今のところはデフォルトのまま使っていて支障がないので、タイトルを入力した後は4回tabキーを押し、すぐにbody内部の編集に取り掛かっている。
