Gulp - Plugin Berguna
Gulp menyediakan beberapa plugin yang berguna untuk bekerja dengan HTML & CSS, JavaScript, Grafik dan beberapa hal lainnya seperti yang dijelaskan dalam tabel berikut.
Plugin HTML & CSS
Sr.No. | Plugin & Deskripsi |
---|---|
1 | autoprefixer Ini secara otomatis menyertakan prefiks ke properti CSS. |
2 | gulp-browser-sync Ini digunakan untuk menonton semua file HTML dan CSS di direktori CSS dan melakukan reload langsung ke halaman di semua browser, setiap kali file diubah |
3 | gulp-useref Ini digunakan untuk mengganti referensi ke skrip atau stylesheet yang tidak dioptimalkan. |
4 | gulp-email-design Ini menciptakan template email HTML yang mengubah gaya CSS menjadi sebaris. |
5 | gulp-uncss Ini mengoptimalkan file CSS dan menemukan gaya yang tidak digunakan dan digandakan. |
6 | gulp-csso Ini adalah pengoptimal CSS, yang meminimalkan file CSS sehingga ukuran file menjadi lebih kecil. |
7 | gulp-htmlmin Ini meminimalkan file HTML. |
8 | gulp-csscomb Ini digunakan untuk membuat pemformat gaya untuk CSS. |
9 | gulp-csslint Ini menentukan linter CSS. |
10 | gulp-htmlhint Ini menentukan validator HTML. |
Plugin JavaScript
Sr.No. | Plugin & Deskripsi |
---|---|
1 | gulp-autopolyfiller Ini sama seperti autoprefixer yang menyertakan polyfill yang diperlukan untuk JavaScript. |
2 | gulp-jsfmt Ini digunakan untuk mencari potongan kode tertentu. |
3 | gulp-jscs Ini digunakan untuk memeriksa gaya kode JavaScript. |
4 | gulp-modernizr Ini menentukan fitur HTML, CSS, dan JavaScript yang ditawarkan browser pengguna. |
5 | gulp-express Ini mulai menelan server web express.js. |
6 | gulp-requirejs Ini menggunakan require.js untuk menggabungkan modul AMD require.js menjadi satu file. |
7 | gulp-plato Ini menghasilkan laporan analisis kompleksitas. |
8 | gulp-complexity Ini menganalisis kompleksitas dan pemeliharaan kode. |
9 | fixmyjs Ini memperbaiki hasil JSHint. |
10 | gulp-jscpd Ini digunakan sebagai detektor salin / tempel untuk kode sumber. |
11 | gulp-jsonlint Ini adalah validator JSON. |
12 | gulp-uglify Ini mengecilkan file JavaScript. |
13 | gulp-concat Ini menggabungkan file CSS. |
Uji Unit Plugin
Sr.No. | Plugin & Deskripsi |
---|---|
1 | gulp-nodeunit Ini menjalankan tes unit node dari Gulp. |
2 | gulp-jasmine Ini digunakan untuk melaporkan masalah yang terkait dengan output. |
3 | gulp-qunit Ini menyediakan output konsol dasar untuk tes QUnit dan menggunakan modul node PhantomJS dan plugin QUnit pelari PhantomJS. |
4 | gulp-mocha Ini menentukan pembungkus tipis di sekitar Mocha dan menjalankan tes Mocha. |
5 | gulp-karma Ini sudah tidak digunakan lagi di Gulp. |
Plugin Grafik
Sr.No. | Plugin & Deskripsi |
---|---|
1 | gulpicon Ini menghasilkan sprite dari SVG dan mengubahnya menjadi PNG. |
2 | gulp-iconfont Ini digunakan dengan font web untuk membuat file WOFF, EOT, TTF dari SVG. |
3 | gulp-imacss Ini mengubah file gambar menjadi URI data dan menempatkannya ke dalam satu file CSS. |
4 | gulp-responsive Ini menghasilkan gambar responsif untuk perangkat yang berbeda
|
5 | gulp-sharp Ini digunakan untuk mengubah dan mengubah ukuran orientasi dan latar belakang gambar. |
6 | gulp-svgstore Ini menggabungkan file SVG menjadi satu dengan elemen <symbol>. |
7 | gulp-imagemin & gulp-tinypng Ini digunakan untuk mengompresi gambar seperti PNG, JPEG, GIF, SVG. |
8 | gulp-spritesmith Ini digunakan untuk membuat spritesheet dari kumpulan gambar dan variabel CSS. |
Plugin Penyusun
Sr.No. | Plugin & Deskripsi |
---|---|
1 | gulp-less Ini menyediakan plugin KURANG untuk Gulp. |
2 | gulp-sass Ini menyediakan plugin SASS untuk Gulp. |
3 | gulp-compass Ini menyediakan plugin kompas untuk Gulp. |
4 | gulp-stylus Ini digunakan untuk menyimpan stylus di CSS. |
5 | gulp-coffee Ini menyediakan plugin coffeescript untuk Gulp. |
6 | gulp-handlebars Ini menyediakan plugin setang untuk Gulp. |
7 | gulp-jst Ini menyediakan template garis bawah di JST. |
8 | gulp-react Ini menentukan template Facebook React JSX ke dalam JavaScript. |
9 | gulp-nunjucks Ini menentukan template Nunjucks di JST. |
10 | gulp-dustjs Ini menentukan template Debu di JST. |
11 | gulp-angular-templatecache Ini menentukan template AngularJS di templateCache. |
Plugin Lainnya
Plugin gulp-clean menghapus file dan folder dan plugin gulp-copy menyalin file dari sumber ke tujuan baru.
Sr.No. | Plugin & Deskripsi |
---|---|
1 | gulp-grunt Ini menjalankan tugas Grunt dari Gulp
|
2 | gulp-watch Ia melihat file setiap kali ada perubahan. |
3 | gulp-notify Ini memberi tahu pesan kesalahan setiap kali tugas gagal. |
4 | gulp-git Ini memungkinkan untuk menggunakan perintah Git. |
5 | gulp-jsdoc Ini membuat dokumentasi JavaScript untuk Gulp. |
6 | gulp-rev Ini menyediakan revisi aset statis ke nama file. |
7 | gulp-bump Ini meningkatkan versi dalam paket JSON. |
8 | gulp-bower-files Ini digunakan untuk menyuntikkan paket bower. |
9 | gulp-removelogs Ini menghapus pernyataan console.log. |
10 | gulp-preprocess Itu preprocesses HTML, JavaScript dan file lain berdasarkan konteks atau konfigurasi lingkungan. |
11 | gulp-duration Ini menentukan durasi untuk tugas Gulp. |
12 | gulp-changed & gulp-newer Ini menjalankan file yang dimodifikasi dan file yang lebih baru. |
13 | gulp-connect Ini digunakan untuk menjalankan server web dengan LiveReload. |
14 | gulp-shell Ini menjalankan perintah Shell. |
15 | gulp-ssh Ini terhubung dengan menggunakan tugas SSH dan SFTP. |
16 | gulp-zip Ini memampatkan file dan folder. |
17 | gulp-clean & gulp-copy |
18 | gulp-filesize Ini menentukan ukuran file dalam format yang dapat dibaca manusia. |
19 | gulp-util Ini menyediakan utilitas untuk plugin gulp. |