npm から node-sass を使う（ package.json の scripts ）

npm の scripts について、 node-sass を例に使い方を確認していきます。

npm の scripts を使って scss から css を生成する

package.json の scripts に build という名前を用意し、 node-sass で css を生成するためのコマンドを追記します。

  "scripts": {
    "build": "node-sass src/css/style.scss public/assets/css/style.css"
  },

package.json の全体は、次のようになります。

{
  "name": "blueleaf",
  "version": "1.0.0",
  "description": "",
  "main": "src/css/style.scss",
  "scripts": {
    "build": "node-sass src/css/style.scss public/assets/css/style.css"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "node-sass": "^4.12.0"
  }
}

npm コマンドを使って node-sass を実行するには、次のように実行します。

npm run build

scripts に定義した node-sass のコマンドが実行され css が生成されます。 scripts は複数用意することができるので、 package.json を次のように用意することもできます。

{
  "name": "blueleaf",
  "version": "1.0.0",
  "description": "",
  "main": "src/css/style.scss",
  "scripts": {
    "compile": "node-sass src/css/style.scss public/assets/css/style.css",
    "build": "node-sass src/css/style.scss public/assets/css/style.css --output-style compressed",
    "watch": "node-sass src/css/style.scss public/assets/css/style.css -w"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "node-sass": "^4.12.0"
  }
}

これらは、実行したいスクリプトを run の後に指定してそれぞれ実行することができます。

npm run compile
npm run build
npm run watch