Sassコンパイル(ベンダープレフィックス/圧縮編)

# 前提

<strong>この記事ではSassコンパイル時に`ベンダープレフィックス`と`圧縮`を行います。</strong>

環境はmacです。
個人練習ようなので実務ではパッケージ管理ツールやscriptの書き方は異なる部分もあるので予めご了承ください。

`npmとSassの環境があることが前提`のため、これからSassを使い始める方は以下で下準備があるとかなりスムーズです。
[Sassコンパイル(とりあえずコンパイル編)](https://qiita.com/nakamurashun0621/items/b87c25943076bf59051c)

【使用するSassパッケージ】
○ : Dart Sass =　パッケージ名`sass`
× : node Sass =　パッケージ名`node-sass`

下記理由のためDart Sassを採用しております。

> @rithmetyさんコメントより(ありがとうございます)
node-sass の公式より引用（ google 翻訳 ）
警告: LibSass と NodeSass は非推奨です。これらは無期限にメンテナンスされ続けますが、追加機能を追加したり、新しい css または Sass 機能との互換性を追加したりする予定はありません。それをまだ使用しているプロジェクトは、 DartSass に移動する必要があります。
https://sass-lang.com/blog/libsass-is-deprecated
https://github.com/sass/node-sass#node-sass


# 手順

1.必要なモジュールとプラグインのインストール
2.package.jsonにscriptを記述
3.コンパイル実行

# 1.必要なモジュールとプラグインのインストール

- `postcss-cli`は、CSSを変換できるツール「PostCSS」をコマンドから利用できるパッケージです。
- `autoprefixer`は、そのPostCSSでベンダープレフィックスを追加できるプラグインとなります。

```
npm install postcss postcss-cli autoprefixer --save-dev 
```

# 2.package.jsonにscriptを記述

## スクリプト　

```
"scripts": {
  "dev-compile:css": "sass sass/main.scss css/style.css --style expanded --watch | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css",
  "pro-compile:css": "sass sass/main.scss css/style.css --style compressed | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css"
},
```
先にスクリプトを載せます。ワンライナーでオプションもあるので少し長めですが
1行目は`開発用(dev-compile:css)`で2行目は`本番用(pro-compile:css)`です。

### ポイント
２行それぞれのスクリプトは `"キー": "コマンド"`という構成です(イメージ)。
ターミナルで`npm run キー`で`コマンド`部分の処理が実行されます。
また、`コマンド`部分は`パイプライン(|)`でつなげているので、１行ですが`２つのコマンドが実行されている`ということになります。

※ 最初の`sass`が実行されるためには、冒頭記載しましたが`sass`パッケージはインストールされている必要があります。まだの方は以下からお願いします。
[Sassコンパイル(とりあえずコンパイル編)](https://qiita.com/nakamurashun0621/items/b87c25943076bf59051c)

## コマンド部分の解説

### 開発用(dev-compile:css)１行目

```
"dev-compile:css": "sass sass/main.scss css/style.css --style expanded --watch | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css"
```

<strong>意図</strong>
開発中にいちいちコンパイルするのは面倒だから、Scssファイルを編集/保存すると同時に勝手にコンパイルして欲しい！
コンパイル後のstyle.cssファイルには、ベンダープレフィックスを付けて欲しいのと
確認することもあるから人が見てもわかるような普通の形式で出力してね👍
とコマンドは申しています。

<strong>説明</strong>
1. `sass sass/main.scss css/style.css`でsass/main.scss→css/style.cssにコンパイルします。
2. `--style expanded`オプションでコンパイル後の`出力形式で普通のCSSの書き方`を指定しています。
3. `--watch`オプションでScssファイルを編集/保存した際自動的にコンパイルされるようになります。
4. `postcss --use autoprefixer -b 'last 10 versions'`で`最後の10バージョンのブラウザ`で崩れないようにベンダープレフィックスが自動でつきます。


### 本番用(pro-compile:css)２行目

```
"pro-compile:css": "sass sass/main.scss css/style.css --style compressed | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css"
```

<strong>意図</strong>
コンパイル後のstyle.cssファイルには、ベンダープレフィックスを付けて欲しいのとパフォーマンス重視でソースコードをぎゅっと圧縮してね👌
とコマンドは申しています。

<strong>説明（開発用との違いのみ)</strong>
1. `--style compressed`オプションでコンパイル後の`出力形式を圧縮`を指定しています。
2. `--watch`オプションは不要なので削除しています。

## 補足
■「--style expanded」オプションは用途に応じて４種類`nested/expanded/compact/compressed`あります。
※以下サイトはnode-sassの`--output-style`で書かれてますが、今回のDart-sassの`--style`に置き換えてご覧ください。
(詳しくは[こちら](https://utano.jp/entry/2018/02/hello-sass-output-style/))

■「postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css」の`-o`オプションはoutputの略。
左のファイルに加工を加え右のファイルが出来上がるということです。
今回は上書きして欲しいので同じファイル名にしてます。

■「last 10 versions」はより詳細にどのブラウザのどのバージョンまでに対応させるかを設定できます。
(詳しくは[こちら](https://parashuto.com/rriver/tools/using-custom-data-for-autoprefixer))

# 3.コンパイル実行
1. ターミナル起動。cdでプロジェクトディレクトリに移動。
2. `npm run dev-compile:css (もしくは、pro-compile:css)`を実行。

> dev-compile:cssを実行した場合、--watchオプションがついているため常にプロセスが実行されるので、これ用のターミナルを新たにたてて実行することをおすすめします。(プロセスを終了したいとき : Ctl+C )

# 個人メモ

### 今回使用したpackage.json
※iconfontの外部CSSをcatするためにconcatも入ってますが特に不要です。
新しいプロジェクトで流用する場合は上をルートディレクトリに設置後以下コマンドで同じ環境が再現できる。
パッケージ数にもよりますがnpmやNode.jsの環境がすでに整っている場合は、この作業ですぐにSassコンパイルが使えるようになります。


```
npm install
```

```package.json
{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "xxxxxxxxxxxx",
  "main": "index.js",
  "scripts": {
    "dev-compile:css": "sass sass/main.scss css/style.css --style expanded --watch | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css",
    "pro-compile:css": "sass sass/main.scss css/style.css --style compressed | postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.0.2",
    "concat": "^1.0.3",
    "fibers": "^5.0.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.1.10",
    "postcss-cli": "^8.3.0",
    "sass": "^1.29.0"
  }
}
```

### liveServerはエディタの拡張機能で
編集内容がブラウザにリアルタイムで反映されるliveServer機能は、エディタに実装しています。
(VScodeの[liveServer](https://life-care.site/programming/liveserver_install_how_to_use))

今回のSassコンパイルのケースも、ファイル更新は「--watch」しているので
上記拡張機能入れておくとコンパイルと同時にブラウザにも変更内容が反映されてより便利かと思います。

# 参考記事
https://qiita.com/baan_nasebanaru/items/1974467f834bc6640ee6