HTML
CSS
Sass
npm
BrowserSync

Sass(scss) を自動ビルドしつつブラウザも自動リロードして開発速度を上げる

手早く html の LP とかカンプを作りたい時のための手順。Sass を使いつつ、ファイル変更でブラウザも自動リロードしたかった。

TL;DR

package.json
{
  "scripts": {
    "build-css": "node-sass --include-path scss scss/style.scss css/style.css",
    "watch-css": "nodemon -e scss -x \"npm run build-css\"",
    "sync": "browser-sync start --server --files \"**/*\" ",
    "dev": "concurrently --kill-others \"npm run watch-css\" \"npm run sync\""
  },
  "devDependencies": {
    "browser-sync": "^2.23.3",
    "concurrently": "^3.5.1",
    "node-sass": "^4.7.2",
    "nodemon": "^1.14.7"
  }
}
ファイル更新で sass をビルドしつつ、ブラウザも自動リロード
recortde3.gif

背景

「なんかサイトのモック作ってよ。」みたいなことを言われた時に、最近のフロントエンド環境に慣れすぎた結果

  • 1から html 環境を用意するのが面倒。
  • かといって html5-boilerplate はフルスタック感がある。。。
  • sass ファイルの変更検知で自動ビルド&自動リロードしたいだけ

と思ったので、オレオレボイラープレートを作ってみました。

解説

  1. node-sass で sass ファイルを css ファイルにビルドして変換
  2. nodemon で変更を watch
  3. browser-sync でファイルの変更を検知して自動リロード
  4. nodemon と browser-sync のタスクをパラレルで実行するため concurrently を利用

ビルドに関しては npmでミニマムに始めるSass を参考にさせていただきました:bow:(ありがたや〜)

ファイル変更後の自動リロードだけパッと使いたいだけなら browser-sync だけで十分。

browser-syncでお手軽自動リロード環境
$ npm i browser-sync -g
$ browser-sync start --server --files "**/*"

参考

所感

  • 2018 年なんだからもっと良い方法がありそう
  • css grid system とか含めようか迷ったけど目的に対して too match なのでやめました