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
มันมียูทิลิตี้สำหรับปลั๊กอินอึก |