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

5962 단어 BrowserSyncHTMLnpmCSSSass
빨리 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이므로 그만두었습니다.
    • 반응성 데이터 스트림 - 빠른 rxJava 요약
    NgZone 외부에 이벤트 리스너 추가

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage