อึกหมายถึงอะไรใน nodejs

ผู้เขียน：Eve Cole เวลาอัปเดต：2022-07-18 16:15:28

Gulp เป็นเครื่องมือสร้างโค้ดแบบโฟลว์ในกระบวนการพัฒนาส่วนหน้า โดยเป็น Task runner อัตโนมัติที่ใช้ Nodejs ไม่เพียงแต่จะเพิ่มประสิทธิภาพทรัพยากรของเว็บไซต์เท่านั้น แต่ยังทำให้การทดสอบ การตรวจสอบ การผสาน การบีบอัด และการจัดรูปแบบเสร็จสมบูรณ์โดยอัตโนมัติอีกด้วย ของโค้ดส่วนหน้า รีเฟรชเบราว์เซอร์โดยอัตโนมัติ สร้างไฟล์การปรับใช้ และตรวจสอบไฟล์เพื่อทำซ้ำขั้นตอนที่ระบุหลังการเปลี่ยนแปลง การใช้มัน เราไม่เพียงแต่สามารถเขียนโค้ดได้อย่างมีความสุข แต่ยังปรับปรุงประสิทธิภาพการทำงานของเราอย่างมากอีกด้วย

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 7, nodejs เวอร์ชัน 16, คอมพิวเตอร์ DELL G3

1. อึกคืออะไร?

Gulp เป็นเครื่องมือสร้างโค้ดแบบโฟลว์ในกระบวนการพัฒนาส่วนหน้า เป็นเครื่องมือสำหรับสร้างโปรเจ็กต์อัตโนมัติไม่เพียงแต่เพิ่มประสิทธิภาพทรัพยากรของเว็บไซต์เท่านั้น แต่ยังสามารถทำงานซ้ำๆ มากมายในระหว่างกระบวนการพัฒนาได้โดยอัตโนมัติโดยใช้โค้ดที่ถูกต้อง เครื่องมือ; ใช้มันไม่เพียงแต่สามารถเขียนโค้ดได้อย่างมีความสุข แต่ยังปรับปรุงประสิทธิภาพการทำงานของเราอย่างมาก

Gulp คือตัวรันงานอัตโนมัติที่ใช้ Nodejs โดยสามารถทำการทดสอบ การตรวจสอบ การรวม การบีบอัด การจัดรูปแบบโค้ดส่วนหน้า การรีเฟรชเบราว์เซอร์อัตโนมัติ การสร้างไฟล์ปรับใช้ และตรวจสอบไฟล์เพื่อทำซ้ำขั้นตอนที่ระบุหลังการเปลี่ยนแปลง

2. กระแสคืออะไร?

ไหล ไหล เปรียบเทียบไฟล์กับแม่น้ำ จากนั้นแม่น้ำสายหนึ่งก็ไหลออกและอีกแม่น้ำหนึ่งไหลเข้า นี่คือวิธีที่อึกทำงานบนสตรีมไฟล์ ผลลัพธ์ของการดำเนินการหนึ่งจะถูกใช้เป็นอินพุตของการดำเนินการอื่น เช่นนี้

การดำเนินการนี้ค่อนข้างคล้ายกับการดำเนินการลูกโซ่ของ jQuery: $("").html("gg").css({}).parent().find("a".......; เมื่อใช้สตรีม , gulp จะลบไฟล์ระดับกลางและเขียนเฉพาะเอาต์พุตสุดท้ายลงดิสก์ ทำให้กระบวนการทั้งหมดเร็วขึ้น

3. การติดตั้งอึก

Gulp ขึ้นอยู่กับสภาพแวดล้อมของโหนด ขั้นแรกตรวจสอบให้แน่ใจว่าได้ติดตั้งโหนดแล้ว

หลังจากติดตั้งโหนดแล้ว npm [(ตัวจัดการแพ็คเกจโหนด) ตัวจัดการแพ็คเกจ nodejs ที่ใช้สำหรับการจัดการปลั๊กอินของโหนด (รวมถึงการติดตั้ง การถอนการติดตั้ง การจัดการการพึ่งพา ฯลฯ)] จะถูกติดตั้งโดยอัตโนมัติเช่นกัน

เนื่องจากปลั๊กอินการติดตั้ง npm ถูกดาวน์โหลดจากเซิร์ฟเวอร์ต่างประเทศ จึงได้รับผลกระทบอย่างมากจากเครือข่ายและอาจก่อให้เกิดความผิดปกติ ดังนั้นจึงควรใช้ cnpm ที่ Taobao จัดเตรียมไว้ให้เพื่อติดตั้งปลั๊กอินของโหนด

ติดตั้ง cnpm: http://npm.taobao.org/

หลังการติดตั้ง ให้ตรวจสอบเวอร์ชัน cnpm เพื่อให้แน่ใจว่าการติดตั้งสำเร็จ

ถัดไปคุณสามารถติดตั้ง gulp ขั้นแรกให้ติดตั้ง gulp ทั่วโลก: cnpm install -g gulp

จากนั้นไปที่ desktop demo/bbs2.0/src เข้าสู่สภาพแวดล้อม bash และใช้ cnpm install gulp เพื่อติดตั้ง gulp ลงในไดเร็กทอรีปัจจุบัน

หลังจากการติดตั้งสำเร็จ โฟลเดอร์ node_modules จะปรากฏขึ้น จากนั้นสร้าง package.json ผ่าน cnpm init (ไฟล์การกำหนดค่าโครงการโหนด: เนื่องจากแพ็คเกจปลั๊กอินโหนดมีขนาดค่อนข้างใหญ่ จึงไม่รวมการจัดการเวอร์ชัน เขียนข้อมูลการกำหนดค่าลงในแพ็คเกจ .json และเพิ่มลงในการจัดการเวอร์ชัน และนักพัฒนาอื่นๆ สามารถดาวน์โหลดได้ตามลำดับ)

ป้อนจนสุดแล้วไฟล์ package.json จะถูกสร้างขึ้นในโฟลเดอร์ปัจจุบัน ในขณะนี้ หากคุณพยายามใช้อึกเพื่อเริ่มอึก คุณจะพบว่ามีการรายงานข้อผิดพลาด

ตามข้อความแสดงข้อผิดพลาด เราจำเป็นต้องสร้างไฟล์ gulpfile.js

แล้ววิ่งอึก

คุณจะพบว่าคำว่า "ตกลง" ที่เราต้องการนั้นถูกพิมพ์ออกมา และโดยทั่วไปแล้วอึกก็สามารถทำงานได้ตามปกติที่นี่

4. การใช้ปลั๊กอินที่ใช้กันทั่วไปในอึก

1) บีบอัดไฟล์ที่ผสาน

สร้างไฟล์ index.html ใหม่

สร้างไฟล์ js ใหม่สองไฟล์ในไดเร็กทอรี js

แก้ไขไฟล์ gulpfile ดังต่อไปนี้:

เนื่องจากเราใช้ปลั๊กอินสองตัวคือ gulp-uglify และ gulp-concat เราจึงต้องติดตั้งปลั๊กอินสองตัวนี้ลงในไดเร็กทอรีปัจจุบันก่อน

เมื่อติดตั้งปลั๊กอิน ให้ใช้ --save-dev เพื่อเพิ่มลงใน package.json เราสามารถตรวจสอบได้ว่าไฟล์ถูกเขียนไปยัง package.json สำเร็จหรือไม่

ตกลง ใช่ จากนั้นทำการติดตั้ง gulp-concat ต่อไปในไดเร็กทอรี หลังจากการติดตั้งเสร็จสิ้น เราคลิกที่ node_modules และเราจะพบว่าปลั๊กอินได้รับการติดตั้งสำเร็จแล้ว

ตกลง หากไม่มีการรายงานข้อผิดพลาด แสดงว่าสำเร็จ จากนั้นให้ตรวจสอบไฟล์และพบว่ามีไฟล์ all.min.js ภายใต้ src ที่เราต้องการบีบอัดและรวม

2)อึก-sass

หากต้องการติดตั้ง sass คุณต้องติดตั้ง Ruby ก่อนและเข้าสู่บทช่วยสอน sass

คลิกติดตั้งแล้วคุณจะได้รับคำแนะนำเกี่ยวกับวิธีการติดตั้ง sass และ ruby

หลังจากติดตั้ง Ruby สำเร็จแล้ว ให้ตรวจสอบเวอร์ชัน Ruby

หลังจากสำเร็จ ให้ติดตั้ง sass ผ่าน gem

หากคุณต้องการใช้เข็มทิศ (ความสัมพันธ์ระหว่างเข็มทิศกับ sass เทียบเท่ากับ jQuery และ js) ให้ติดตั้งเข็มทิศก่อน

สิ่งที่ต้องสังเกตที่นี่คือมีปัญหากับแหล่งที่มาของ gem ซึ่งจะทำให้การติดตั้งล้มเหลว: จะมีการรายงานข้อผิดพลาด: SSL_connect return=1 errno=0 state=SSLv3 read server ใบรับรอง B: ce rtificate การตรวจสอบล้มเหลว . คุณสามารถเปลี่ยนแหล่งที่มาของอัญมณีเป็น https://ruby.taobao.org/ หากยังไม่ได้ผล ให้เปลี่ยนเป็น http://gems.ruby-china.org/ ปัญหาตัวละคร

ต่อไปใช้ Compass Create เพื่อสร้างโปรเจ็กต์หน้าด้าน