PostSS와 Browsersync를 사용하여 Tailwind CSS를 설정하려면 어떻게 해야 합니까?
17395 단어 tailwindcsshtmlgulp
Gulp js를 사용하여 파일을 저장할 때 브라우저를 자동으로 다시 로드하고 최적화된 버전의 Tailwind CSS를 만들며 프로덕션 이미지를 최적화하는 방법에 대해 알아봅니다.
순풍 CSS 수출은 생산과 사용에 최적화가 필요하다.CSS 파일의 개발 버전은 거의 4MB로 운영 사이트에 좋지 않습니다.Read this for more details .
따라서 프로젝트를 개발할 때 전체 버전의 Tailwind CSS를 편집할 수 있어야 합니다.너는 생산을 위해 그것을 최적화시켜야 한다.서버를 감시 파일의 변경 사항으로 설정하고 업데이트된 후에 자동으로 브라우저를 다시 불러와야 합니다.
Google은gulpjs를 사용하여 자동화를 실현하여 우리의 업무 절차를 강화할 것입니다.
우리는 결국 어떤 성과를 거둘 것인가?
You can find the following code on GitHub as Tailwind CSS Boilerplate
시작하자.
프로젝트 설정
새 디렉토리를 만들고 VS 코드에서 엽니다.
mkdir tailwind-starter
cd tailwind-starter
code .
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
이제
tailwind.config.js 및 postcss.config.js 파일을 생성합니다.npx tailwindcss init -p
tailwind.config.js 파일을 사용하여 우리의 순풍을 설정할 것이다.우리가 설정할 첫 번째 일은 설정을 지우는 것입니다.설정을 지우려면 CSS 파일과 HTML 파일을 배열에 추가합니다.이것들은 우리가 순풍 과정을 사용할 위치이다.
// tailwind.config.js
module.exports = {
purge: ["./src/**/*.css", "./**/*.html"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
CSS 및 HTML 파일 추가
이제 CSS 파일을 먼저 추가합니다.tailwind 명령을 주입할 것입니다.
프로젝트의 루트 디렉터리에
src 폴더를 만듭니다.이 디렉터리에 새 파일을 추가합니다. 이름은 styles.css.입니다. 다음 내용을 새로 만든 CSS 파일에 추가합니다.자세한 내용은 this link 참조/* ./src/styles.css */
@tailwind base;
@tailwind components;
body {
@apply bg-white text-gray-700;
}
@tailwind utilities;
assets이라는 새 폴더를 만듭니다.이 폴더를 사용하여 프로젝트에 필요한 모든 자산을 저장할 것입니다.이 새 폴더에는 css과 images에 대한 별도의 폴더가 만들어집니다.Google CSS 파일의 컴파일된 버전은gulp 작업을 통해 이 폴더에 저장됩니다.이제 루트 디렉토리에
index.html을 추가하고 컴파일된 CSS 파일의 경로를 포함합니다.<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/assets/css/styles.css" rel="stylesheet" />
<title>
Tailwind CSS Boilerplate (PostCSS + Browsersync + Gulp 4 + Imagemin)
</title>
</head>
<body>
<div class="container mx-auto py-12">
<h1 class="text-4xl font-bold text-gray-900">
Tailwind CSS Boilerplate (PostCSS + Browsersync + Gulp 4 +
Imagemin)
</h1>
<p class="text-lg mt-4">
Tailwind CSS boilerplate for HTML projects. Bare-bones HTML
template with Tailwind CSS, PostCSS, Gulp, Imagemin &
Browsersync.
</p>
</div>
</body>
</html>
Gulp &Browsersync 추가
다음으로는 Gulp, Browsersync 및 Gulp postcss 플러그인을 설치해야 합니다.
npm install -D gulp browser-sync gulp-postcss gulp-imagemin
이제 gulpfile을 만듭니다.프로젝트의 루트 폴더에 새 파일을 만들고 이름을
gulpfile.js으로 지정합니다.편집기에서 이 파일을 열고 다음 코드를 추가합니다.// gulpfile.js
const { watch, series, src, dest } = require("gulp");
var browserSync = require("browser-sync").create();
var postcss = require("gulp-postcss");
const imagemin = require("gulp-imagemin");
// Task for compiling our CSS files using PostCSS
function cssTask(cb) {
return src("./src/*.css") // read .css files from ./src/ folder
.pipe(postcss()) // compile using postcss
.pipe(dest("./assets/css")) // paste them in ./assets/css folder
.pipe(browserSync.stream());
cb();
}
// Task for minifying images
function imageminTask(cb) {
return src("./assets/images/*")
.pipe(imagemin())
.pipe(dest("./assets/images"));
cb();
}
// Serve from browserSync server
function browsersyncServe(cb) {
browserSync.init({
server: {
baseDir: "./",
},
});
cb();
}
function browsersyncReload(cb) {
browserSync.reload();
cb();
}
// Watch Files & Reload browser after tasks
function watchTask() {
watch("./**/*.html", browsersyncReload);
watch(["./src/*.css"], series(cssTask, browsersyncReload));
}
// Default Gulp Task
exports.default = series(cssTask, browsersyncServe, watchTask);
exports.css = cssTask;
exports.images = imageminTask;
./src 폴더의 CSS 파일을 읽고 PostCSS로 컴파일한 다음 컴파일된 CSS 파일을 ./assets/css 폴더에 붙여넣고 있습니다.작업 디렉토리에서 서버를 시작할 다른 작업을 만듭니다.기본 '삼키기' 임무로서, 우리는 일련의 보고 있는 임무가 있다.html&.css 파일입니다. 파일을 변경하고 컴파일하며 브라우저를 다시 불러옵니다.
패키지에서 스크립트를 정의합니다.json
현재, 이 삼키는 작업을 실행하기 위해서, 가방에 스크립트를 정의할 것입니다.json 파일.우리는 여기에 세 개의 스크립트를 정의할 것이다.다음 코드를 참고하시기 바랍니다.나는 완전한 가방을 추가하지 않았다.json, 파일의 다른 내용을 변경할 필요가 없습니다.가방에서
scripts 대상을 찾으면 됩니다.json 및 다음 코드를 추가합니다.// package.json
{
// ...
"scripts": {
"dev": "gulp",
"build": "NODE_ENV=production gulp css",
"build-images": "gulp images"
},
// ...
}
Dell 템플릿 사용
프로젝트의 루트 디렉토리에서 실행
npm run dev
생산을 위해 건설하다
프로젝트의 루트 디렉토리에서 실행
npm run build
./assets/css/ 디렉토리에 저장됩니다../assets/images/ 디렉토리에 저장된 이미지의 최적화 버전을 만들려면 npm run build-images을 실행하십시오.그러면 원래 이미지가 최적화 버전으로 바뀝니다.너도 GitHub에서 전체 Tailwind CSS boilerplate을 찾을 수 있다.클론을 생성하여
npm install을 실행한 다음 시작할 수 있습니다.만약 당신이 이것이 매우 유용하다고 생각한다면, 우리의 GitHub 환매를 시작하는 것을 잊지 마세요.그리고 저는 인도 포나에서 소규모 기업 web development company을 운영하고 있습니다.우리 회사 홈페이지를 꼭 방문해 주세요.
읽어주셔서 감사합니다.나는 이것이 너에게 도움이 되기를 바란다.
Reference
이 문제에 관하여(PostSS와 Browsersync를 사용하여 Tailwind CSS를 설정하려면 어떻게 해야 합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/salttechno/how-to-setup-tailwind-css-with-postcss-browsersync-1j41텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
