VSCodeでscssの自動ビルド環境を作る

なんども環境作ることになってめんどくさいので自分用メモ。
この記事はVSCode公式の方法に従ってビルド環境を作ったメモです。公式サイトに余計な情報が多いので必要最低限のことだけまとめました。動けばいいんだよ、動けば。

前提条件

• OS X (10.11.6)
• Node.js (9.4.0)
• npm (6.1.0)
• gulp (3.9.1)
• VSCode本体 (1.24.0)

Windowsもショートカットキー以外はほぼ同じはずなのですが、手元にWindows機がないので確認できません。ので今回はMac前提ということで。

gulpがインストールされてない場合は、下記のリンクにインストール方法があるので参照してください。
gulpはオワコンとかだいぶ前から言われてるので使うのやめたいんですが、公式でこの方法を推奨しているのでなんとなく使ってるだけです。より良い方法があれば教えてください。

公式

プロジェクトごとに作るもの

gulpfile.js

プロジェクトの直下に「gulpfile.js」というファイルを作成する。gulpはあんまり詳しくないけど、中身はこんな感じ。

var gulp = require('gulp');
var sass = require('gulp-sass');

// SCSSファイル格納先。**/*で下層のディレクトリにも対応
const SCSS_SRC = './styles/scss/**/*.scss';  

// css出力先
const SCSS_DEST = './styles/css/';

// メインのビルドタスク
gulp.task('build:scss', function() {
    gulp.src(SCSS_SRC)  
        .pipe(sass({ outputStyle: 'expanded'})) // 出力するcssのスタイル
        .pipe(gulp.dest(SCSS_DEST));
});

// watchタスクが動いたときにビルドするよう設定
gulp.task('scss:watch', function(){
    gulp.watch(SCSS_SRC, ['build:scss']);
});

// gulpのデフォルトタスク。ここにwatchを指定してファイルの変更を監視する
gulp.task('default', ['scss:watch'])

これをコピペして、フォルダパスさえ変更すればたいていのプロジェクトで使えるはず。cssの格納場所が複数あったりすると面倒ですが、そのへんはプロジェクト運用で頑張ってください。
outputStyleは数種類あるのでお好みで。scssがあればcssを直接触ることはないはずなので、本当はcompactとかcompressedがいいんでしょうが、自分の場合はわかりやすさ重視でexpandedにしています。

task.json

VSCodeから作成します。

1. コマンドパレットを開く(command + shift + P)
2. コマンドパレットに「tasks」と入力して、Tasks:Configure Task > Create tasks.json file from template > Others の順に選択。
3. プロジェクトの直下に「.vscode」というフォルダ、その下に「taksk.js」というファイルが作成される。 たぶん手動で作ってしまってもいいんでしょうけど、このほうが確実で早いです。

tasks.jsonの中身はこんなかんじ。最低限です。

{
    "version": "2.0.0",
    "command": "gulp",  // ここにgulpを指定
    "isShellCommand": true,
    "tasks": [
        {
            "label": "Sass Compile",
            "type": "shell",
            "command": "node-sass styles.scss styles.css",
            "group": "build"
        }
    ]
}

これでscssを保存したときに自動でcssを出力してくれる環境ができました。

タスクが動くか確認する

まずはscssファイルを用意します。この時点でプロジェクトのフォルダ構成はこんな風になってます。

Project/
 ├ .vscode/
 │    └ tasks.json
 │
 ├ styles/
 │    └ scss/
 │       └ hoge.scss
 │
 ├ index.html
 └ main.js

hoge.scssの中身はサンプルとしてこんなものにしました。

/*このコメントは出力される*/
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
}

// 変数
$bk-color: darkblue;
$font-color: white;

// こっちのコメントは出力されない
#content{
    background-color: $bk-color;
    div {
        width: auto;
        height: 20px;
        color: $font-color;
        margin: 0 auto;
    }
}

タスクを動かす

command + shift + B　を押すとタスクが起動します。複数のタスクがある場合は選択肢が出てきますが、「gulp: scss:watch [プロジェクト名]」を選択します。

うまく行けばTERMINALウィンドウにログが出るはず。エラーが出たら焦らずログを見て手順を確認しましょう。たいてい何かがインストールされてなかったり、jsonの書き方が間違っているのが原因です。

Finishedのログが出たら、hoge.scssファイルを保存します。gulpfile.jsで出力先として指定したパスにhoge.cssが作成されたら成功です。やったね！

cssフォルダは作っておかなくても自動で作成されます。ビルド後はこんなフォルダ構成になりました。

Project/
 ├ .vscode/
 │    └ tasks.json
 │
 ├ styles/
 │    ├ css/
 │    │  └ hoge.css
 │    │
 │    └ scss/
 │       └ hoge.scss
 │
 ├ index.html
 └ main.js

出力されたcssはこうなってます。

@charset "UTF-8";
/*このコメントは出力される*/
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
}

#content {
  background-color: darkblue;
}

#content div {
  width: auto;
  height: 20px;
  color: white;
  margin: 0 auto;
}

階層も変数もちゃんとビルドされてますね。outputStyleに指定した形式に応じて出力結果はかわりますが、とにかく.cssが作成されれば成功です。あとはゴリゴリscssを書くだけです。

ただし、scssにエラーがあるとタスクが止まってしまうので、こまめにターミナルウィンドウをチェックして正常にビルドされているか確認する必要があります。再度 command + shift + B　で動かせばOK。タスクを止めたいときは command + shift + PからTask:Terminate Taskを選択すると停止できます。

以上、最低限のscssをVSCodeで自動ビルドする方法でした。