tailwind template
v1.11.9
ก่อนอื่นให้แน่ใจว่าได้เรียกใช้ pnpm install ในเทอร์มินัลในไดเรกทอรีรากของโครงการนี้ สิ่งนี้จะติดตั้งการพึ่งพาทั้งหมดที่ต้องการและสร้างโฟลเดอร์ Node_Modules ของคุณ ขั้นตอนนี้สำคัญมาก
โครงการนี้ใช้ Tailwind CSS ซึ่งเป็นเฟรมเวิร์ก CSS ยูทิลิตี้แรก การพึ่งพาที่ต้องการควรรวมอยู่ในโครงการนี้แล้ว หากคุณพลาดโฟลเดอร์ Node_Modules เพียงเรียกใช้ pnpm install และควรสร้างขึ้นตามการอ้างอิงที่ระบุในไฟล์ package.json
ในการเปิดใช้งาน Tailwind CSS Intellisense คุณจะต้องมีการขยายรหัส VS ฉันขอแนะนำให้ติดตั้งแพ็คส่วนขยาย CSS Tailwind ซึ่งมาพร้อมกับส่วนขยายสองสามส่วนที่ทำงานร่วมกันเพื่อให้ใช้ Tailwind CSS เป็นประสบการณ์ที่ดีกว่ามาก หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้คลิกลิงก์ด้านบน
ในโฟลเดอร์รูทของโครงการมีโฟลเดอร์ สินทรัพย์/สไตล์ นี่เป็นที่ตั้งของไฟล์ tailwind.css ไฟล์นี้ใช้ในการสร้างสไตล์ CSS Tailwind ที่รวบรวมได้อย่างสมบูรณ์ เมื่อรวบรวมแล้วมันจะส่งออกคลาสไปยังไฟล์ Styles.css ซึ่งอยู่ในโฟลเดอร์ สินทรัพย์/สไตล์
ในการทำงานในสภาพแวดล้อมการพัฒนาให้เรียกใช้สคริปต์ dev NPM ในการทำเช่นนั้นให้ใช้วิธีใดวิธีหนึ่งที่ระบุไว้ด้านล่าง
pnpm run dev ในโฟลเดอร์รูทของโครงการสิ่งนี้จะเริ่มต้น กระบวนการดูระยะยาว ที่จะ สร้าง สไตล์ของคุณ ตามความต้องการ แทนที่จะสร้างทุกอย่างล่วงหน้า สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการพัฒนาที่รวดเร็วและมีประสิทธิภาพมากขึ้น ในเทอร์มินัลคุณควรเห็นข้อความคอมไพล์เริ่มต้นและระยะเวลาที่ใช้ เมื่อใดก็ตามที่คุณบันทึกไฟล์ html, ไฟล์ tailwind.css หรือไฟล์ tailwind.config.js , CSS จะถูกประมวลผลและคอมไพล์ใหม่ รูปแบบเหล่านี้จะไม่ถูกลดน้อยลงในกระบวนการพัฒนา
โปรดทราบว่ามีการเพิ่มคลาสตามความต้องการ แต่ไม่ได้ลบตามความต้องการ นี่คือการออกแบบตามที่ระบุไว้โดย Adam Wathan ผู้สร้าง Tailwind CSS ในการแก้ไขปัญหานี้ (แคชจับมัน) เพียงบันทึกไฟล์ tailwind.css มันจะบังคับให้แข่งขันกันใหม่ได้อย่างเต็มรูปแบบและลบคลาสที่ไม่ได้ใช้ใด ๆ
ในการฆ่ากระบวนการเฝ้าดูให้ให้ความสำคัญกับเทอร์มินัลว่ากระบวนการกำลังทำงานอยู่และกด CTRL + C คุณควรได้รับแจ้งให้ยืนยันการยกเลิกกระบวนการของคุณ ยืนยันตัวเลือกของคุณโดยป้อน Y ตามด้วยปุ่ม ENTER
เราจะใช้ส่วนขยายรหัส VS เพื่อเริ่มเซิร์ฟเวอร์ของเรา ค้นหา "เซิร์ฟเวอร์สด" ในแท็บส่วนขยายรหัส VS หรือคุณสามารถค้นหาได้ในตลาด Visual Studio
เมื่อคุณดาวน์โหลดและติดตั้งส่วนขยายคุณอาจเห็นปุ่มใหม่ที่มุมขวาล่างของหน้าต่างในริบบิ้นสีน้ำเงิน มันบอกว่า Go Live เมื่อคุณคลิกสิ่งนั้นควรเริ่มต้นเซิร์ฟเวอร์และเปิดบนเบราว์เซอร์ของคุณ
หากคุณไม่เห็นปุ่มเพียงคลิกขวาที่ไฟล์ index.html ใน VS Code File Explorer แล้วคลิก เปิดด้วย Live Server
การสร้างเพื่อการผลิตนั้นคล้ายคลึงกับการสร้างเพื่อการพัฒนา ทำอย่างใดอย่างหนึ่งต่อไปนี้เพื่อสร้าง CSS สำหรับการผลิต
pnpm run prod ในโฟลเดอร์รูทของโครงการprod ในทางลัดสคริปต์ NPM ที่อยู่ที่ด้านล่างซ้ายของแท็บ File Explorer ในรหัส VSตรงกันข้ามกับสคริปต์การพัฒนาที่เราใช้มาก่อนสิ่งนี้จะ ไม่ เริ่มกระบวนการดูระยะยาว ค่อนข้างสคริปต์นี้รวบรวม CSS หนึ่งครั้งและเพียงครั้งเดียว จะใช้เฉพาะคลาสที่พบในไฟล์ HTML ที่อยู่ในโฟลเดอร์รูทและรวบรวมไว้ในไฟล์ styles.css ที่อยู่ใน สินทรัพย์/สไตล์/styles.css สไตล์เหล่านี้จะลดลง
โครงการนี้ใช้อึกเพื่อสร้างโครงการสำหรับการปรับใช้ ด้วยการเรียกใช้อึกมันจะสร้างโฟลเดอร์ DIST ในรูทของโครงการของคุณ Gulp จะคัดลอกไฟล์ที่จำเป็นทั้งหมดจากแหล่งที่มาของโครงการและสินทรัพย์ลงในโฟลเดอร์ DIST
นอกจากนั้นอึกจะเพิ่มประสิทธิภาพและลดไฟล์ตามต้องการ ไฟล์ HTML, SVG และ JavaScript ทั้งหมดจะลดลง การย่อยไฟล์นั้นหมายถึงการลบช่องว่างและอักขระ/สัญลักษณ์ที่ไม่จำเป็นอื่น ๆ เราทำสิ่งนี้เพื่อลดขนาดของไฟล์
สไตล์ (CSS) จะถูกคัดลอกไปยัง Dist เช่นกัน เนื่องจาก CSS ได้รับการลดลงโดย Tailwind CLI ของ POSTCSS และเครื่องยนต์ JIT เราไม่จำเป็นต้องลดขนาดที่นี่ มันเป็น สิ่งสำคัญ ที่จะเรียกใช้ pnpm run prod ก่อนที่จะใช้ gulp โดยไม่ทำเช่นนี้อึกจะใช้ CSS เวอร์ชันที่ไม่ได้ระบุ
ภาพจะถูกคัดลอกไปเช่นกันและปรับให้เหมาะสมโดยใช้ Gulp-Image ซึ่งเป็นเครื่องมือเพิ่มประสิทธิภาพรูปภาพ สิ่งนี้จะเพิ่มประสิทธิภาพ เฉพาะ ภาพ PNG, JPG และ GIF เกือบทุกประเภทภาพอื่น ๆ จะถูกคัดลอก แต่ไม่ได้รับการปรับให้เหมาะสมรวมถึงไฟล์ PDF
แล้วคุณจะใช้ Gulp ได้อย่างไร? ง่ายมาก! นี่คือสามตัวเลือก 1) เปิดเทอร์มินัลรหัส VS และเรียกใช้ gulp คำสั่ง สิ่งนี้จะดำเนินการงานเริ่มต้นที่พบในไฟล์ gulpfile.js ในไดเรกทอรีรูท งานเริ่มต้นจะดำเนินการตามลำดับงานอื่น ๆ ทั้งหมดเพื่อสร้างโครงการ 2) อีกวิธีหนึ่งฉันได้สร้างสคริปต์ NPM ที่เรียกว่า gulp คุณสามารถเรียกใช้สิ่งนี้ได้จากมุมล่างซ้ายของหน้าต่างรหัส VS ในแท็บสคริปต์ NPM 3) หากคุณไม่เห็นแท็บสคริปต์ NPM คุณอาจเรียกใช้คำสั่งนี้ในเทอร์มินัลโดยเรียกใช้ pnpm run gulp แต่ ณ จุดนั้นเพียงแค่พิมพ์ gulp ก็ง่ายกว่า
ในกรณีที่คุณต้องเปลี่ยนชื่อของโฟลเดอร์เอาต์พุตจาก DIST เป็นอย่างอื่นเพียงแค่นำทางไปยังไฟล์ gulpfile.js และค้นหา destination ตัวแปรที่อยู่ใกล้กับด้านบนของไฟล์ โดยค่าเริ่มต้นจะถูกตั้งค่าเป็น dist แต่คุณอาจเปลี่ยนสิ่งนี้โดยแทนที่ส่วน dist ของสตริงเป็นสิ่งที่คุณต้องการ ชื่อโฟลเดอร์ปลายทางทั่วไปอื่นคือ docs ซึ่งใช้สำหรับการปรับใช้โครงการไปยังหน้า GitHub
