# npm-scriptsでSCSSをコンパイルする環境を構築する方法

URL: https://webrandum.net/npm-script-sass-compile/
公開日: 2020-07-23
更新日: 2020-07-23
カテゴリー: コーディング
タグ: npm-scripts, Sass
出典: Webrandum（著者: サイトウ マサカズ）

今まではgulpを使ってきたのですが、最近はnpm-scriptsが流行りつつあります。

というのも、gulpだとどうしてもパッケージを大量に管理する必要があったり、`gulpfile.js`がかなり複雑になりがちです。

`package.json`にある程度まとめて記述することで、管理するファイルも少なくなり、開発環境もシンプルになります。

今回はそんなnpm-scriptsで、SCSSのコンパイル方法についてまとめておきます。

## npm scriptsを使う準備

gulpを使ったことがある人であれば問題ありませんが、npmを使う必要があるのでNode.jsをインストールしている必要があります。

過去にいくつか記事にしているので、まだインストールしていない人はそちらを参考にインストールしてください。

現時点では、nodenvを使ってインストールするのをオススメしています。

[Node.jsのバージョン管理をnodebrewからnodenvに移行する方法](https://webrandum.net/nodenv)

[mac環境にnodebrew経由でNode.jsをインストールしてバージョンを管理する方法](https://webrandum.net/nodebrew-install)

## package.jsonの生成と必要パッケージのインストール

ターミナルで作業ディレクトリを開いて、下記のコマンドを入力します。

```
$ npm init -y
```

package.jsonが生成されていればOKです。

次に下記のコマンドでそれぞれ必要となるパッケージをインストールします。

今回はSCSSのコンパイルに必要な最低限のパッケージのみにしています。

```
## SCSSのコンパイル
$ npm i -D node-sass

## ベンダープレフィックスの付与（Autoprefixer）とCSS圧縮
$ npm i -D postcss-cli cssnano autoprefixer

## ファイル変更の監視
$ npm i -D watch

## タスクを同時に実行する
$ npm i -D npm-run-all
```

これで必要なパッケージは揃いました。

## package.jsonの設定

`package.json`を開いて、`"scripts"`の部分に下記を追加します。

```
"scripts": {
  "all" : "run-p watch",
  "watch": "watch 'run-s scss postcss' ./src/assets/scss",
  "scss": "node-sass src/assets/scss/style.scss -o src/assets/css --source-map src/assets/css",
  "postcss": "postcss src/assets/css/style.css -o src/assets/css/style.min.css"
},
```

パス部分はフォルダ階層に合わせて調整が必要ですが、これで保存すればOKです。

この`"scripts"`部分に書くのがnpm scriptです。

基本的には下記の書き方になりますが、その辺はパッケージによって微妙に変わったり、オプションがあったりします。

```
"タスク名": "パッケージ名 元にするファイル指定 生成後のファイル指定",
```

## Post CSSの設定

今回はAutoprefixerやcssnanoといったPost CSSを使用しているので、`pakcage.json`と同じ階層に`postcss.config.js`を作成して、下記のコードを入力しておきます。

```
module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default',
    })
  ]
}
```

次に、package.jsonと同じ階層に.browserslistrcを作成して、下記のコードを入力しておきます。

```
> 0.5%
last 2 versions
ie >= 11
Android >= 4
```

とりあえずこれでAutoprefixerとcssnanoの設定は完了です。

## 実行方法

ターミナルで`package.json`と同じ階層を開いて、下記のコマンドを実行します。

```
npm run all
```

特定のタスクのみを実行したい場合は、下記のように`npm run`のあとに、設定したタスク名を入力すれば実行できます。

```
npm run scss
```