TailwindCSS 및 Gulp 워크플로 시작하기

CSS 유틸리티 프레임워크인 TailwindCSS를 접한 것은 거의 2.5년 전 또는 거의 3년 전입니다. 대부분의 경우 PSD to HTML 또는 Custom Wordpress Themes가 사용되던 시기였습니다. 저는 부트스트랩, 파운데이션 등과 같은 CSS 프레임워크의 팬이 아니었습니다. 저는 항상 제가 작업한 모든 프로젝트에 대해 기본 스타일을 그대로 유지하는 나만의 스타일 세트를 만들었습니다(기본 스타일이 있는 나만의 그리드 시스템이라고 할 수 있습니다 😎 ).

저는 TailwindCSS가 아직 초기 단계였을 때 사용하기 시작했습니다. 여기commit에서 볼 수 있듯이 TailwindCSS v0.7 버전이었습니다. Gulp Workflow를 사용하여 TailwindCSS용 StarterKit을 만들었을 때 개발 워크플로에 Gulp를 사용했습니다.

오늘 저는 Gulp와 TailwindCSS가 그 이후로 많은 발전을 이루면서 최근에 업데이트한 이 워크플로를 여러분 모두와 공유하기 위해 왔습니다. 시작하겠습니다. 🤟

시작하기

1단계: here을 클릭하여 github에서 zip 파일을 다운로드하거나 명령줄 담당자인 경우 저장소를 복제하기만 하면 됩니다.

$ git clone https://github.com/manjumjn/gulp-with-tailwindcss.git

참고: 진행하기 전에 시스템에 NodeJS 및 Git이 설치되어 있는지 확인하십시오.

2단계: 필요한 모든 패키지를 설치합니다.

$ npm install

용법

사용할 수 있는 두 가지 명령이 있습니다. 하나는 파일 변경 사항을 다시 로드하는 실시간 미리보기에 사용할 개발용browsersync이고 다른 하나는 프로덕션 사이트용으로 최적화되고 축소된 파일을 빌드하는 프로덕션 빌드용입니다.

$ npm run dev // for development

$ npm run prod // for production

파일 구조

|-- Folder
    |-- config.js
    |-- gulpfile.js
    |-- tailwind.config.js
    |-- src
        |-- index.html
        |-- css
        |   |-- a.tailwind.scss
        |   |-- main.scss
        |-- img
        |   |-- cover.jpg
        |-- js
            |-- main.js
            |-- external
            |   |-- external.js
            |-- libs
                |-- library.js

폴더 구조에서 볼 수 있듯이

config.js - 디렉토리 이름과 browsersync의 포트를 변경하는 데 사용할 수 있는 꿀꺽 꿀꺽하는 데 사용되는 구성 파일

tailwind.config.js - TailwindCSS 구성용

js > external - 축소/연결을 위해 컴파일할 때 이 폴더의 파일이 제외됩니다

.

명심해야 할 몇 가지 팁

gulp가 연결 시 알파벳 순서를 사용하므로 파일 연결 순서를 변경하려면 파일 이름에 접두어를 사용하십시오. tailwind.scss의 이름이 a.tailwind.scss인 것과 같은 이유입니다. js 파일 이름 지정도 마찬가지입니다.

scss에서 tailwindCss@apply 속성을 사용할 때 줄을 세미콜론으로 끝내야 합니다. 누락된 경우 다음 줄이 무시됩니다.

더 많은 정보와 업데이트로 이 기사를 업데이트하겠습니다. 동일하거나 문제를 제기하기 위해 저장소를 팔로우할 수 있습니다.

만줌인 / gulp-with-tailwindcss

TailwindCSS 스타터 키트를 사용한 꿀꺽 꿀꺽