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

今まではgulpを使ってきたのですが、最近はnpm-scriptsが流行りつつあります。
というのも、gulpだとどうしてもパッケージを大量に管理する必要があったり、gulpfile.jsがかなり複雑になりがちです。

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

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

npm scriptsを使う準備

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

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

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

Webrandum

Node.jsのバージョン管理をnodebrewからnodenvに移行する方法

https://webrandum.net/nodenv

プログラミング言語のバージョン管理はanyenvで管理するようにしたいと思うようになりました。そこで、いままでNode.jsのバージョン管理のために使っていたnodebrewから、nodenvに乗り換えてみます。nodebrewのアンインストールホームディレクトリにある.nodebrewというフォルダと、下記パスにあるnodebrewというファイルを削除します。/usr/local/bin/nodebrewあとは今後使わないので、シェル設定ファイルに書いてある下記のコードも削除しました。export PATH=$HOME/.nodebrew/current/bin:$PATHexport PATH=$PATH:/Users/ユーザー名...

Webrandum

mac環境にnodebrew経由でNode.jsをインストールしてバージョンを管理する方法

https://webrandum.net/nodebrew-install

フロントエンドの開発を行うにあたって、避けては通れないのがNode.jsのインストールです。今回はNode.jsのインストール方法をひと通りまとめてみます。Node.jsとは何なのか？JavaScriptは本来クライアントサイド（ブラウザ側）で処理を行う言語なのですが、それをサーバーサイドでの制御も出来るようにしたのが「Node.js」です。Node.jsを利用することでWebサービスの開発環境が作れるようになります。開発環境を作るには、Node.jsをインストールする際に一緒にインストールされる「npm」というパッケージ管理ツールを利用します。npm...

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