ติดตั้ง gulp-htmlmin ด้วย NPM ผ่านคำสั่งหนึ่งคำสั่ง:
npm ติดตั้ง gulp-htmlmin-save-dev
หลังจากการติดตั้งเสร็จสมบูรณ์ให้เปิดไฟล์ gulpfile.js เราจะเขียนงานเพื่อบีบอัด HTML โดยเฉพาะและดำเนินการตามชุดของการประมวลผลบน HTML:
var gulp = ต้องการ ('gulp'); var htmlmin = reghed ('gulp-htmlmin'); gulp.task ('html', function () {ตัวเลือก var = {clotapsewhitespace: จริง, clolapsbooleanattributes: true, removeComments: true, remvereMpyAttributes: จริง, ลบ. }; gulp.src ('app/**/*. html'). pipe (htmlmin (ตัวเลือก)). pipe (gulp.dest ('dest/'));เราเห็นว่ามีตัวเลือกการตั้งค่าในงานซึ่งจะแนะนำบทบาทของคุณสมบัติของพวกเขา:
1.CollapSewhitespace: จากความหมายตามตัวอักษรควรเห็นได้ว่าการล้างพื้นที่และการบีบอัด HTML มีความสำคัญมากกว่าโดยมีผลค่อนข้างใหญ่และปริมาณการบีบอัดที่เกิดจากการเปลี่ยนแปลงก็มีขนาดใหญ่โดยเฉพาะเช่นกัน
2.CollapsBooleanAttributes: ละเว้นค่าของแอตทริบิวต์บูลีนเช่น: <อินพุต checked = "ตรวจสอบ"/> จากนั้นหลังจากตั้งค่าแอตทริบิวต์นี้มันจะกลายเป็น <อินพุตตรวจสอบ/>;
3. การเปิดเผย: ล้างความคิดเห็นใน HTML เราควรลดความคิดเห็นในหน้า HTML
4. RemoveAmpTyAttributes: ล้างแอตทริบิวต์ที่ว่างเปล่าทั้งหมด
5. RemovescipttyPeatTributes: ล้างแอตทริบิวต์ type = "text/javaScript" ในแท็กสคริปต์ทั้งหมด
6. Removestylelinktypeattributes: ล้างแอตทริบิวต์ประเภทบนแท็กลิงก์ทั้งหมด
7. MINIFYJS: บีบอัดรหัส JavaScript ใน HTML
8. MINIFYCSS: บีบอัดรหัส CSS ใน HTML
ในระยะสั้นหลักการของการบีบอัด HTML คือการล้างรหัสที่ไร้ประโยชน์ลบแอตทริบิวต์ที่มีค่าเริ่มต้นและบีบอัด HTML เป็นค่าต่ำสุดเพื่อปรับปรุงประสิทธิภาพของการดำเนินงานโครงการ