Gulp - ปลั๊กอินที่มีประโยชน์

Gulp มีปลั๊กอินที่มีประโยชน์สำหรับทำงานกับ HTML & CSS, JavaScript, กราฟิกและสิ่งอื่น ๆ ตามที่อธิบายไว้ในตารางต่อไปนี้

ปลั๊กอิน HTML และ CSS

ซีเนียร์ ปลั๊กอินและคำอธิบาย
1 autoprefixer

ประกอบด้วยคำนำหน้าคุณสมบัติ CSS โดยอัตโนมัติ

2 gulp-browser-sync

ใช้เพื่อดูไฟล์ HTML และ CSS ทั้งหมดในไดเรกทอรี CSS และทำการรีโหลดสดไปยังหน้าในเบราว์เซอร์ทั้งหมดเมื่อใดก็ตามที่ไฟล์มีการเปลี่ยนแปลง

3 gulp-useref

ใช้เพื่อแทนที่การอ้างอิงไปยังสคริปต์หรือสไตล์ชีตที่ไม่ได้ปรับให้เหมาะสม

4 gulp-email-design

สร้างเทมเพลตอีเมล HTML ที่แปลงสไตล์ CSS เป็นแบบอินไลน์

5 gulp-uncss

เพิ่มประสิทธิภาพไฟล์ CSS และค้นหาสไตล์ที่ไม่ได้ใช้และซ้ำกัน

6 gulp-csso

เป็นเครื่องมือเพิ่มประสิทธิภาพ CSS ซึ่งย่อขนาดไฟล์ CSS ทำให้ขนาดไฟล์เล็กลง

7 gulp-htmlmin

มันย่อไฟล์ HTML

8 gulp-csscomb

ใช้เพื่อสร้างรูปแบบรูปแบบสำหรับ CSS

9 gulp-csslint

ระบุ CSS linter

10 gulp-htmlhint

ระบุตัวตรวจสอบ HTML

ปลั๊กอิน JavaScript

ซีเนียร์ ปลั๊กอินและคำอธิบาย
1 gulp-autopolyfiller

เหมือนกับ autoprefixer ซึ่งรวมถึง polyfills ที่จำเป็นสำหรับ JavaScript

2 gulp-jsfmt

ใช้สำหรับค้นหาข้อมูลโค้ดเฉพาะ

3 gulp-jscs

ใช้เพื่อตรวจสอบรูปแบบโค้ด JavaScript

4 gulp-modernizr

โดยระบุคุณลักษณะของ HTML, CSS และ JavaScript ที่เบราว์เซอร์ของผู้ใช้นำเสนอ

5 gulp-express

เริ่มต้นเว็บเซิร์ฟเวอร์ gulp express.js

6 gulp-requirejs

ใช้ require.js เพื่อรวมโมดูล AMD require.js เป็นไฟล์เดียว

7 gulp-plato

สร้างรายงานการวิเคราะห์ความซับซ้อน

8 gulp-complexity

วิเคราะห์ความซับซ้อนและความสามารถในการบำรุงรักษาของโค้ด

9 fixmyjs

มันแก้ไขผลลัพธ์ JSHint

10 gulp-jscpd

ใช้เป็นตัวตรวจจับการคัดลอก / วางสำหรับซอร์สโค้ด

11 gulp-jsonlint

เป็นโปรแกรมตรวจสอบ JSON

12 gulp-uglify

มันย่อขนาดไฟล์ JavaScript

13 gulp-concat

มันเชื่อมไฟล์ CSS เข้าด้วยกัน

ปลั๊กอินการทดสอบหน่วย

ซีเนียร์ ปลั๊กอินและคำอธิบาย
1 gulp-nodeunit

รันการทดสอบหน่วยโหนดจาก Gulp

2 gulp-jasmine

ใช้เพื่อรายงานปัญหาที่เกี่ยวข้องกับผลลัพธ์

3 gulp-qunit

มีเอาต์พุตคอนโซลพื้นฐานสำหรับการทดสอบ QUnit และใช้โมดูลโหนด PhantomJS และปลั๊กอิน PhantomJS runner QUnit

4 gulp-mocha

ระบุกระดาษห่อบาง ๆ รอบ ๆ มอคค่าและดำเนินการทดสอบมอคค่า

5 gulp-karma

เลิกใช้แล้วใน Gulp

ปลั๊กอินกราฟิก

ซีเนียร์ ปลั๊กอินและคำอธิบาย
1 gulpicon

มันสร้างสไปรต์จาก SVG และแปลงเป็น PNG

2 gulp-iconfont

ใช้กับแบบอักษรของเว็บเพื่อสร้างไฟล์ WOFF, EOT, TTF จาก SVG

3 gulp-imacss

จะแปลงไฟล์รูปภาพเป็น URI ข้อมูลและวางไว้ในไฟล์ CSS เดียว

4 gulp-responsive

สร้างภาพที่ตอบสนองสำหรับอุปกรณ์ต่างๆ

5 gulp-sharp

ใช้เพื่อเปลี่ยนและปรับขนาดการวางแนวและพื้นหลังของภาพ

6 gulp-svgstore

รวมไฟล์ SVG เป็นไฟล์เดียวโดยมีองค์ประกอบ <symbol>

7 gulp-imagemin & gulp-tinypng

ใช้สำหรับบีบอัดรูปภาพเช่น PNG, JPEG, GIF, SVG

8 gulp-spritesmith

ใช้สำหรับสร้างสไปรท์ชีทจากชุดรูปภาพและตัวแปร CSS

ปลั๊กอินคอมไพเลอร์

ซีเนียร์ ปลั๊กอินและคำอธิบาย
1 gulp-less

มีปลั๊กอินน้อยสำหรับ Gulp

2 gulp-sass

มีปลั๊กอิน SASS สำหรับ Gulp

3 gulp-compass

มีปลั๊กอินเข็มทิศสำหรับ Gulp

4 gulp-stylus

ใช้สำหรับเก็บสไตลัสใน CSS

5 gulp-coffee

มีปลั๊กอิน Coffeescript สำหรับ Gulp

6 gulp-handlebars

มีปลั๊กอินสำหรับมือจับสำหรับ Gulp

7 gulp-jst

มีเทมเพลตขีดล่างใน JST

8 gulp-react

ระบุเทมเพลต Facebook React JSX ลงใน JavaScript

9 gulp-nunjucks

ระบุเทมเพลต Nunjucks ใน JST

10 gulp-dustjs

ระบุเทมเพลต Dust ใน JST

11 gulp-angular-templatecache

ระบุเทมเพลต AngularJS ใน templateCache

ปลั๊กอินอื่น ๆ

ปลั๊กอิน gulp-clean จะลบไฟล์และโฟลเดอร์และปลั๊กอิน gulp-copy คัดลอกไฟล์จากต้นทางไปยังปลายทางใหม่

ซีเนียร์ ปลั๊กอินและคำอธิบาย
1 gulp-grunt

มันเรียกใช้งาน Grunt จาก Gulp

2 gulp-watch

จะดูไฟล์ทุกครั้งที่มีการเปลี่ยนแปลง

3 gulp-notify

จะแจ้งข้อความแสดงข้อผิดพลาดเมื่องานล้มเหลว

4 gulp-git

อนุญาตให้ใช้คำสั่ง Git

5 gulp-jsdoc

สร้างเอกสาร JavaScript สำหรับ Gulp

6 gulp-rev

มีการแก้ไขเนื้อหาแบบคงที่เป็นชื่อไฟล์

7 gulp-bump

เพิ่มเวอร์ชันในแพ็คเกจ JSON

8 gulp-bower-files

ใช้ในการฉีดแพ็คเกจโบเวอร์

9 gulp-removelogs

มันลบคำสั่ง console.log

10 gulp-preprocess

ประมวลผลล่วงหน้า HTML, JavaScript และไฟล์อื่น ๆ ตามการกำหนดค่าบริบทหรือสภาพแวดล้อม

11 gulp-duration

ระบุระยะเวลาสำหรับงาน Gulp

12 gulp-changed & gulp-newer

เรียกใช้ไฟล์ที่แก้ไขและไฟล์ที่ใหม่กว่า

13 gulp-connect

ใช้เพื่อรันเว็บเซิร์ฟเวอร์ด้วย LiveReload

14 gulp-shell

มันรันคำสั่งเชลล์

15 gulp-ssh

เชื่อมต่อโดยใช้งาน SSH และ SFTP

16 gulp-zip

มันบีบอัดไฟล์และโฟลเดอร์

17 อึกสะอาด & ​​อึกคัดลอก
18 gulp-filesize

ระบุขนาดไฟล์ในรูปแบบที่มนุษย์อ่านได้

19 gulp-util

มันมียูทิลิตี้สำหรับปลั๊กอินอึก