css의 자동 컴파일과 browser-sync의 환경을 오랜만에 만들어 보았습니다.

이전에는 glup을 사용하고 있었습니다만, 최근에는 npm-scripts가 주류군요.
최근 우연히 HTML을 만들 수 있었기 때문에 드디어 기사로 보았습니다.

그래서 이번에는 npm-scripts를 사용하여 Sass/Scss 컴파일과 브라우저 동기화를 말합니다.
초기본적이지만, 사용할 수 있는 태스크 러너를 구축했습니다.

결국 실행하면 이런 느낌이 듭니다.

html과 css가 변경 저장되면 자동으로 Sass/Scss를 컴파일하고 브라우저 리로드가 실행됩니다.

이미지가 조금 전해지기가 어렵지만 저장할 때 브라우저가
자동으로 리로드가 걸리는 순간은 두근거리는군요.



node와 npm은 미리 설치되어 있다고 가정합니다!

$ node -v
v12.16.1
$ npm -v
6.14.2
$

npm 초기 설정

먼저 작업 디렉토리에 가서 init 명령을 치자.

$ npm init
$ ls
package.json
$

그런 다음 사용할 npm 모듈을 설치합시다.

마지막 --save-dev는 로컬 설치입니다.
개발 단계에서는 우선 붙여 두는 것이 좋을 것입니다.
이번 사용하는 것은 다음과 같습니다.
바삭바삭하게 하는 것도 가능하므로, 아무것도 생각하지 않고 인스톨해 버립니다 w

## ブラウザ同期
npm install browser-sync --save-dev
## Sass/Scss をcssに変換
npm install node-sass --save-dev
## ベンダープレィックスと圧縮を行う
npm install postcss-cli cssnano autoprefixer --save-dev
## 変更監視モジュール
npm install watch --save-dev
## 同時タスク実行
npm install npm-run-all --save-dev

폴더 구성

디렉토리 구성은 이런 느낌입니다.
(지금 생각하면 별로 assets 폴더는 필요 없었다...?)

./src/assets/images  ## 今回の記事では未使用
./src/assets/js      ## 今回の記事では未使用
./src/assets/html
./src/assets/css  ## ここはscssがコンパイルされたら配置される
./src/assets/scss

package.json 설정

package.json이 npm을 시작할 때 열쇠입니다.
이번 설정에서는 scripts의 곳만을 이렇게 변경하고 있습니다.

(略)
  "scripts": {
    "all" : "run-p server watch:css",
    "css:scss": "node-sass src/assets/scss/style.scss -o src/assets/css --source-map src/assets/css",
    "css:postcss": "postcss src/assets/css/style.css -o src/assets/css/style.min.css",
    "watch:css": "watch 'run-s css:scss css:postcss' ./src/assets/scss",
    "server": "browser-sync start --server --files='src/assets/html/*.html, src/assets/css/*.css, src/assets/js/*.js' --startPath='src/assets/html'",
    "test": "echo 'npm run test....'"
  },
(略)

postcss.config.js

postcss-cli를 사용하는 데 사용할 정의 파일입니다.
이번에는 다른 것을 팩하고 참고로 했습니다.
package.json과 같은 디렉토리에 넣으면 괜찮습니다.

$ cat ./postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['last 2 versions'],
      cascade: false
    }),
    require('cssnano')({
      preset: 'default',
    })
  ]
}
$

마지막은 이런 느낌입니다.

$find . -type f  | egrep -v '(node_modules|git)'
./package-lock.json
./package.json
./postcss.config.js
./src/assets/css/style.min.css.map ※コンパイル後作成される
./src/assets/css/style.min.css　　　※コンパイル後作成される
./src/assets/css/style.css.map　　　※コンパイル後作成される
./src/assets/css/style.css　　　　　 ※コンパイル後作成される
./src/assets/scss/style.scss
./src/assets/html/index.html
$

실행 방법

package.json과 동일한 계층 구조에서 다음을 수행합니다.

## ブラウザsyncとコンパイル
npm run all

## 特定の作業のみを行いたい場合(例えばcssのコンパイル)
npm run watch:css

동영상의 오른쪽 하단의 터미널에서는 변경할 때마다 ↓같은 것이 나오고, 처음으로 움직였을 때라든가는
가슴열이 됩니다만, PC명이라든지 풀 패스가 곧 표시되어 있었으므로 출력을/dev/null로 해 속임하고 있습니다w

[Browsersync] File event [change] : src/assets/css/style.min.css

마지막으로

이하 사이트를 참고로 했습니다.
처음의 brawserSync
npm-script로 개발 환경을 만들어 보자.

그럼 좋은 프런트 엔드 라이프!