Gulp - Plugin utili
Gulp fornisce alcuni plugin utili per lavorare con HTML e CSS, JavaScript, grafica e altre cose come descritto nelle tabelle seguenti.
Plugin HTML e CSS
| Sr.No. | Plugin e descrizione |
|---|---|
| 1 | autoprefixer Include automaticamente i prefissi alle proprietà CSS. |
| 2 | gulp-browser-sync Viene utilizzato per guardare tutti i file HTML e CSS nella directory CSS ed esegue il caricamento in tempo reale della pagina in tutti i browser, ogni volta che i file vengono modificati |
| 3 | gulp-useref Viene utilizzato per sostituire i riferimenti a script o fogli di stile non ottimizzati. |
| 4 | gulp-email-design Crea modelli di email HTML che converte gli stili CSS in inline. |
| 5 | gulp-uncss Ottimizza i file CSS e trova gli stili inutilizzati e duplicati. |
| 6 | gulp-csso È un ottimizzatore CSS, che riduce al minimo i file CSS con conseguente dimensione del file inferiore. |
| 7 | gulp-htmlmin Riduce al minimo i file HTML. |
| 8 | gulp-csscomb Viene utilizzato per creare un formattatore di stile per CSS. |
| 9 | gulp-csslint Specifica un linter CSS. |
| 10 | gulp-htmlhint Specifica un validatore HTML. |
Plugin JavaScript
| Sr.No. | Plugin e descrizione |
|---|---|
| 1 | gulp-autopolyfiller È uguale all'autoprefixer che include i polyfill necessari per JavaScript. |
| 2 | gulp-jsfmt Viene utilizzato per la ricerca di frammenti di codice specifici. |
| 3 | gulp-jscs Viene utilizzato per controllare lo stile del codice JavaScript. |
| 4 | gulp-modernizr Specifica quali funzionalità HTML, CSS e JavaScript ha da offrire il browser dell'utente. |
| 5 | gulp-express Avvia il server web gulp express.js. |
| 6 | gulp-requirejs Utilizza require.js per combinare i moduli AMD require.js in un unico file. |
| 7 | gulp-plato Genera report di analisi della complessità. |
| 8 | gulp-complexity Analizza la complessità e la manutenibilità del codice. |
| 9 | fixmyjs Corregge i risultati di JSHint. |
| 10 | gulp-jscpd Viene utilizzato come rilevatore di copia / incolla per il codice sorgente. |
| 11 | gulp-jsonlint È un validatore JSON. |
| 12 | gulp-uglify Minifica i file JavaScript. |
| 13 | gulp-concat Concatena i file CSS. |
Plugin per i test delle unità
| Sr.No. | Plugin e descrizione |
|---|---|
| 1 | gulp-nodeunit Esegue test di unità di nodo da Gulp. |
| 2 | gulp-jasmine Viene utilizzato per segnalare le problematiche relative all'output. |
| 3 | gulp-qunit Fornisce l'output della console di base per i test QUnit e utilizza il modulo del nodo PhantomJS e il plug-in QUnit del runner PhantomJS. |
| 4 | gulp-mocha Specifica l'involucro sottile attorno a Mocha ed esegue i test Mocha. |
| 5 | gulp-karma È stato deprecato a Gulp. |
Plugin grafici
| Sr.No. | Plugin e descrizione |
|---|---|
| 1 | gulpicon Genera sprite da SVG e li converte in PNG. |
| 2 | gulp-iconfont Viene utilizzato con i caratteri Web per creare file WOFF, EOT, TTF da SVG. |
| 3 | gulp-imacss Trasforma i file immagine in URI di dati e li inserisce in un unico file CSS. |
| 4 | gulp-responsive Genera immagini reattive per diversi dispositivi
|
| 5 | gulp-sharp Viene utilizzato per modificare e ridimensionare l'orientamento e lo sfondo dell'immagine. |
| 6 | gulp-svgstore Combina i file SVG in uno con gli elementi <symbol>. |
| 7 | gulp-imagemin & gulp-tinypng Viene utilizzato per comprimere le immagini come PNG, JPEG, GIF, SVG. |
| 8 | gulp-spritesmith Viene utilizzato per creare un foglio sprite da un insieme di immagini e variabili CSS. |
Plugin dei compilatori
| Sr.No. | Plugin e descrizione |
|---|---|
| 1 | gulp-less Fornisce MENO plugin per Gulp. |
| 2 | gulp-sass Fornisce il plugin SASS per Gulp. |
| 3 | gulp-compass Fornisce plug-in bussola per Gulp. |
| 4 | gulp-stylus Viene utilizzato per mantenere lo stilo in CSS. |
| 5 | gulp-coffee Fornisce plugin coffeescript per Gulp. |
| 6 | gulp-handlebars Fornisce plugin per manubri per Gulp. |
| 7 | gulp-jst Fornisce modelli di sottolineatura in JST. |
| 8 | gulp-react Specifica i modelli di Facebook React JSX in JavaScript. |
| 9 | gulp-nunjucks Specifica i modelli Nunjucks in JST. |
| 10 | gulp-dustjs Specifica i modelli Dust in JST. |
| 11 | gulp-angular-templatecache Specifica i modelli AngularJS nella templateCache. |
Altri plugin
Il plug-in gulp-clean rimuove file e cartelle e il plug-in gulp-copy copia i file dall'origine alla nuova destinazione.
| Sr.No. | Plugin e descrizione |
|---|---|
| 1 | gulp-grunt Esegue le attività Grunt da Gulp
|
| 2 | gulp-watch Controlla i file ogni volta che vengono apportate modifiche. |
| 3 | gulp-notify Notifica il messaggio di errore ogni volta che un'attività non riesce. |
| 4 | gulp-git Permette di utilizzare i comandi Git. |
| 5 | gulp-jsdoc Crea documentazione JavaScript per Gulp. |
| 6 | gulp-rev Fornisce la revisione statica degli asset ai nomi dei file. |
| 7 | gulp-bump Aumenta le versioni nel pacchetto JSON. |
| 8 | gulp-bower-files Viene utilizzato per iniettare pacchetti bower. |
| 9 | gulp-removelogs Rimuove le istruzioni console.log. |
| 10 | gulp-preprocess Preelabora HTML, JavaScript e altri file in base al contesto o alla configurazione dell'ambiente. |
| 11 | gulp-duration Specifica la durata delle attività Gulp. |
| 12 | gulp-changed & gulp-newer Esegue i file modificati e quelli più recenti. |
| 13 | gulp-connect Viene utilizzato per eseguire un server Web con LiveReload. |
| 14 | gulp-shell Esegue i comandi della shell. |
| 15 | gulp-ssh Si connette utilizzando attività SSH e SFTP. |
| 16 | gulp-zip Comprime i file e le cartelle. |
| 17 | gulp-clean e gulp-copy |
| 18 | gulp-filesize Specifica la dimensione del file in formato leggibile dall'uomo. |
| 19 | gulp-util Fornisce utilità per i plugin gulp. |
