Sass(scss)를 자동 빌드하면서 브라우저도 자동 리로드하여 개발 속도를 올린다

빨리 html LP 또는 캠프를 만들고 싶을 때의 절차. Sass를 사용하면서 파일 변경으로 브라우저도 자동 재로드하고 싶었습니다.

TL;DR

htps : // 기주 b. 코 m / 츠요시 누마 / 시 mp ぇ 복제 npm i && npm run dev

그것도 귀찮은 사람은 이하를 자신의 package.json 에 덧붙인다 (변경 검지의 폴더는 임의의 장소를!)

npm run dev

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를 빌드하면서 브라우저도 자동 재로드

배경

"왠지 사이트의 모형 만들어라."같은 것을 말했을 때, 최근의 프런트 엔드 환경에 너무 익숙한 결과

1에서 html 환경을 준비하는 것이 번거롭다.

라고 해서 html5-boilerplate 은 풀 스택감이 있다. . .

sass 파일 변경 감지로 자동 빌드 및 자동 다시로드하고 싶습니다.

라고 생각했으므로, 오레오 레보일러 플레이트 를 만들어 보았습니다.

해설

node-sass에서 sass 파일을 css 파일로 빌드하여 변환

그래서 몬 에서 변경 watch

browser-sync 파일 변경 사항을 감지하고 자동 다시로드

nodemon 및 browser-sync 작업을 병렬로 실행하려면 concurrently을 사용합니다.

빌드에 관해서는 npm으로 최소한의 시작 Sass 를 참고로 했습니다

파일 변경 후의 자동 리로드만 딱 사용하고 싶은 것만이라면 browser-sync만으로 충분.

browser-sync로 간편한 자동 리로드 환경

$ npm i browser-sync -g
$ browser-sync start --server --files "**/*"

참고

npm으로 최소한의 시작 Sass

nodemon을 단순한 파일 감시자로 사용

How can I run multiple npm scripts in parallel?

이제부터 CSS는 Sass로 쓰자.

HTML5의 사이트가 신속하게 만들 수 있는 프레임워크 「HTML5 Boilerplate」를 제대로 만져 보았다

소감

2018 년이기 때문에 더 좋은 방법이있을 것 같습니다

css grid system이라든지 포함할지 궁금했지만 목적에 대해 too match이므로 그만두었습니다.