npm scriptでscssのビルドをリアルタイムで反映させる

npm

scssを使って開発をしていると、毎回毎回ビルドするのが手間になってくることがありますよね。。。

npm-scriptを使って、scssを変更したら、cssにビルドし、ブラウザを自動で更新してくれる環境を作っていきたいと思います。

スポンサーリンク

必要なパッケージをインストールする

まずはじめに、必要なパッケージをインストールしていきます。今回はnpmとnodeはすでに入っている状態を想定しています。まだ入っていない方はnodeとnpmのインストールから初めてください。

$ npm init -y
$ npm install npm-run-all watch browser-syn node-sass postcss postcss-cli autoprefixer --save-dev

これでブラウザの起動とリロード、scssのビルドができるパッケージのインストールが完了します。

npm-run-all
これは、npm-scriptを複数同時に実行することができるようになるパッケージです。並列実行や、直列実行をすることができるようになります。

watch
ファイルの更新を監視し、更新があった時にnpm-scriptを実行できるパッケージ

browser-sync
これは、3000番にサーバーを立ち上げて、ブラウザでそのページを開きます。

node-sass postcss postcss-cli
この3つはscssのビルドに必要なパッケージです。

autoprefixer
cssのプレフィックスを自動で付与してくれるパッケージです。

package.jsonにnpm-scriptを記述する

パッケージのインストールが完了したら、次はpackage.jsonにnpm-scriptを記述していきます。今回のディレクトリ構成は下記のようなものを想定しています。

.
├── index.html
├── package.json
├── scss
| └── style.scss
|
└── css
  └── style.css

npm-scriptはpackage.jsonのscriptsの部分に記述していきます。

scssのビルド

まずは、scssのビルドです。下記をpackage.jsonに記述し、nom run build:scssとコマンドを叩くと、scssがビルドされて、cssファイルが書き出されます。

scripts: {
  "build:scss": "node-sass --include-path scss scss/style.scss css/style.css --output-style compressed"
}

プレフィックス付与

次にcssのプレフィックスを付与していきます。今回のメインの話からは脱線しますが、せっかくscssを入れるのであれば、これは入れておいた方がいいので紹介がてら、追加しておきます。

これを実行することで、cssプレフィックスが自動で付与されるようになります。これで実装時にプレフィックスを気にせずに実装することができます。

scripts: {
  "build:autoprefixer": "postcss --use autoprefixer --no-map css/style.css -d css/"
}

scssとautoprefixerを連続して実行する

scssとautoprefixerのnpm-scriptを見てきましたが、別々のscriptに記述していると、二回コマンドを叩くことになるので、手間になってしまいます。
そこで、scssのビルドして、autoprefixerを連続して実行するようにします。

  "scripts": {
    "build": "npm run build:scss && npm run build:autoprefixer",
    "build:scss": "node-sass --include-path scss scss/style.scss css/style.css --output-style compressed",
    "build:autoprefixer": "postcss --use autoprefixer --no-map css/style.css -d css/"
  },

scssの更新の監視

次にscssの更新を監視しながら、自動でnpm run buildを実行していくようにします。watchは指定したディレクトリ配下を監視し、変更があった場合に指定したコマンドを実行します。

watch {実行コマンド} {ディレクトリ}で指定します。

  "scripts": {
    "watch:build": "watch 'npm run build' ./scss",
    "build": "npm run build:scss && npm run build:autoprefixer",
    "build:scss": "node-sass --include-path scss scss/style.scss css/style.css --output-style compressed",
    "build:autoprefixer": "postcss --use autoprefixer --no-map css/style.css -d css/"
  },

“watch:build”: “watch ‘npm run build’ ./scss”,を追加します。scssディレクトリ配下の更新を監視し更新のたびに、npm run buildが実行されます。

ブラウザの起動と自動読み込み

cssに変更があった場合にブラウザを自動更新するようにします。localhost:3000でサーバーが立ち上がり、ブラウザが開きます。そして、cssディレクトリ配下のcssファイルに更新があった場合に、ページが自動で更新されます。

scripts: {
  "watch:browser": "browser-sync start --server --files='./css/*.css'",
}

最後にcssのビルドとブラウザ同期を同時実行する

run-pを使って同時実行していきます。npm-run-allはbuild:*としているすことで、build:で始まるnpm-scriptを同時実行することができます。

"scripts": {
  "watch": "run-p watch:*"
}

完成形

ここまで手順通りに作ってくると、package.jsonが下記のようになっているかと思います。この状態で、npm run watch を実行することで、ブラウザが立ち上がり、scssを更新することで、ブラウザが再読み込みされて更新されるようになります。

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "run-p watch:*",
    "watch:browser": "browser-sync start --server --files='./css/*.css'",
    "watch:build": "watch 'npm run build' ./scss",
    "build": "npm run build:scss && npm run build:autoprefixer",
    "build:scss": "node-sass --include-path scss scss/style.scss css/style.css --output-style compressed",
    "build:autoprefixer": "postcss --use autoprefixer --no-map css/style.css -d css/"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^9.7.1",
    "node-sass": "^4.13.0",
    "postcss": "^7.0.21",
    "postcss-cli": "^6.1.3"
  },
  "browserslist": [
    "last 2 versions",
    "Android >= 4",
    "iOS >= 9"
  ],
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "npm-run-all": "^4.1.5"
  }
}

scssの自動ビルド&ブラウザの自動読み込みで快適なscssを使った開発環境を構築して見てください。