tailwind 익스텐션 및 세팅 (2)

1. 새로고침 및 수정사항 반영

npm run dev

혹은 watch라는 모드가 있다.

npm run dev는 1회성으로 수정 사항에 대해 그 순간 새로고침이 되어 반영이 되게 만드는 것이다.

근데 watch는 저장을 할 때마다, 수정한 사항에 대해 계속 반영이 될 수 있도록 하는 것이다.

아래와 같이 pakage.json 파일에 입력을 하면 된다.

그래서 만약에 파일명을 수정하게 된다면 dev 값만 수정을 하게 되면 아래 watch도 같이 수정된다.

터미널에

1. 상시 업데이트 : npm run watch 라고 입력하면 된다.

2. 일회성으로 하고 싶다면 npm run dev 이다.

{
  "scripts": {
    "dev": "tailwindcss -i ./src/styles/input.css -o ./src/styles/main.css",
    "watch": "npm run dev -- --watch"
  },
  "devDependencies": {
     "tailwindcss": "^3.4.10"
  }
}

 

2. html 수정 및 업데이트

이는 새로운 사항에 대해 수정을 하게 된다면, 최신으로 업데이트를 해주는 것이다.

index.html파일을 수정 후 main.css를 확인해보면 바뀌는 것을 볼 수가 있다.

이를 추가하려면

스크립트 안에

    "update": "npm run dev -- --watch --update", 를 추가하면 된다.

그리고 할 때 npm run update 라고 터미널에 입력하면 된다.

{
  "scripts": {
    "dev": "tailwindcss -i ./src/styles/input.css -o ./src/styles/main.css",
    "watch": "npm run dev -- --watch",
    "update": "npm run dev -- --watch --update"
  },
  "devDependencies": {
    "tailwindcss": "^3.4.10"
  }
}

 

3. live-sever

이는 개발 환경에서 실시간으로 확인을 할 수 있도록, 환경 설정을 하는 것이다.

즉 서버가 시작되면, 해당 경로를 자동으로 브라우저에서 열도록 하는 스크립트이다. 이 스크립트는 주로 개발 중인 웹 애플리케이션을 빠르게 실행하고 실시간으로 변경 사항을 확인할 때 유용하다.

 

처음 아래 명령어를 입력하여 설치를 해야한다.

• npm i -D live-server 
  • npm는 노드 패키지 매니저이며, i는 install의 약어이다.
  • -D는 --save-dev의 약어로, 패키지를 개발 의존성(devDependencies)으로 설치한다는 의미이다.
  • live-sever : live-server는 간단한 개발용 웹 서버로, 파일 변경을 감지하여 자동으로 브라우저를 새로고침해주는 기능을 제공한다.

설치를 한 후 package.json 파일에다가

아래와 같이

 "serve": "live-server --open=/src/" 를 입력해야 한다. 그리고 터미널에 입력 후 npm i -D live-server 설치하게 된다면 아래 라이브서버의 버젼도 나오며 설치된 것을 확인 할 수 있다.

 

{
  "scripts": {
    "dev": "tailwindcss -i ./src/styles/input.css -o ./src/styles/main.css",
    "watch": "npm run dev -- --watch",
    "update": "npm run dev -- --watch --update",
    "serve": "live-server --open=/src/"
  },
  "devDependencies": {
    "live-server": "^1.2.2",
    "tailwindcss": "^3.4.10"
  }
}

 

4. 서버와 watch 동시에 하기

터미널에 npm i -D npm-run-all 이라는 명령어를 입력 한 후 설치를 한다.

npm install npm-run-all --save-dev 이것도 같이 설치해야한다.

그리고 아래 스크립트 안에 "start": "run-p watch serve" 를 입력한다. 이는 -p는 watch와 serve를 둘다 사용하겠다 라는 것이다.

그리고 npm run start를 하게되면 watch와 sever가 동시에 실행이 되며 서버는 계속 실행이 되어있는 상태로 실시간으로 업데이트가 된다.

이는 npm start 만 입력해도 된다.

{
  "scripts": {
    "start": "run-p watch serve",
    "dev": "tailwindcss -i ./src/styles/input.css -o ./src/styles/main.css",
    "watch": "npm run dev -- --watch",
    "serve": "live-server --open=/src/"
  },
  "devDependencies": {
    "live-server": "^1.2.2",
    "npm-run-all": "^4.1.5",
    "tailwindcss": "^3.4.10"
  }
}