Posted at

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

More than 1 year has passed since last update.

手早く 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 なのでやめました