In questo articolo vedrai come puoi usare gulp per automatizzare diverse attività che fai abitualmente a mano o per le quali ti affidi a strumenti sviluppati da altri.

Cos'è Gulp

Gulp è un sistema di generazione di streaming. Potresti aver sentito parlare e usato già il grunt. Ma ultimamente il gulp sta diventando più popolare. Può fare cose incredibili come compilare file LESS / Sass, JS, live ricaricare pagine web e molto altro.

Perché usare Gulp

Può risparmiare un sacco di tempo automatizzando diverse attività. E la cosa migliore è che hai il potere di dirgli cosa fare, a differenza di fare affidamento su strumenti di terze parti per implementare determinate funzionalità. In breve, puoi creare il tuo strumento di automazione in base alle tue esigenze.

Prerequisiti

Per iniziare è necessario avere Node.js (v0.10.30 o superiore) installato. Personalmente preferisco utilizzare Node Version Manager (NVM) in modo che possa passare tra diverse versioni di Node.js sulla mia macchina di sviluppo.

Iniziamo

La prima cosa che devi fare è installare gulp. Usa il seguente comando dal terminale per farlo.

npm install -g gulp

Questo installerà gulp a livello globale sulla tua macchina.

Iniziamo a impostare lo strumento di automazione creando una directory nella cartella Temi di WordPress o in qualsiasi posizione preferita desiderata.

Nel mio caso navigherò alla cartella dei temi ...

cd ... / wp-content / themes

... ed esegui il seguente comando.

mkdir wp-gulp-automation

Ora andrò alla cartella per iniziare a npm progetto.

cd wp-gulp-automation npm init

Questo ti farà diverse domande come nome del progetto, versione, descrizione, autore, licenza, ecc.

Puoi riempirli o continuare a colpire accedere fino a quando non dice sì. Infine, digita sì e colpisci accedere un'altra volta.

Questo creerà un file package.json nella directory. Tiene informazioni sul tuo progetto e le sue dipendenze.

Se hai seguito correttamente il processo, il tuo file package.json sarà simile al seguente:

"name": "wp-gulp-automation", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": " echo \ "Errore: nessun test specificato \" && exit 1 "," author ":" "," license ":" ISC "

Primo file Gulp

Installa gulp localmente nel tuo progetto.

npm install gulp --save-dev

Questo creerà a node_modules cartella e mantenere tutte le dipendenze del progetto in là. --save-dev è usato per aggiornare dev-dipendenze in package.json.

Crea gulpfile.js nella directory del progetto con il seguente codice.

var gulp = require ('gulp'); gulp.task ('default', function () console.log ('default gulp task ...'));

Nel tipo di terminale sorso e ha colpito accedere. Vedrai il testo sopra riportato nella console.

Creazione di uno strumento di compilazione Sass di base

Sono disponibili vari plugin per Gulp per la compilation Sass. Ho provato e elencato tre di loro di seguito.

1. gulp-sass (semplice e facile da usare)
2. gulp-compass (funziona alla grande con i progetti basati sulla bussola)
3. gulp-ruby-compass (questo dà più controllo degli altri due)

Per semplicità, in questo tutorial userò il primo, cioè gulp-sass.

Eseguire il seguente comando nella directory del progetto per installarlo.

npm installa gulp-sass --save-dev

Consente di aggiornare il codice per compilare i file Sass nei file CSS.

Aggiungi richiede nella parte superiore di gulpfile.

var sass = require ('gulp-sass'); gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')); ); gulp.task ('default', ['sass']);

Ora quando corro sass sass nel terminale, l'attività sass viene attivata.

E poiché l'ho aggiunto a una serie di attività predefinite, quando eseguo gulp nel terminale, l'attività predefinita attiva l'attività sass.

Ciò che questo farà sarà compilare tutti i file nel css / src cartella del progetto e salvarli nel css cartella. Potresti voler passare opzioni extra al sass () funzione a seconda delle esigenze.

Quindi, fondamentalmente in esecuzione sorso e sass sass farà la stessa cosa in questo momento.

Lint and Compile JS Files

Successivamente, per avere un codice JavaScript migliore e confezionato nei tuoi temi, hai bisogno di gulp-jshint e gulp-concat.

npm install gulp-jshint --save-dev npm installa gulp-concat --save-dev

Ora aggiungi require nella parte superiore di gulpfile:

var jshint = require ('gulp-jshint'); var concat = require ('gulp-concat');

Aggiungi la seguente attività di gulp al file per liberare e combinare tutti i file js.

gulp.task ('js', function () gulp.src ('js / src / *. js') .pipe (jshint ()) .pipe (jshint.reporter ('fail')) .pipe (concat ( 'theme.js')) .pipe (gulp.dest ('js')););

Se vuoi organizzare un po 'di più, puoi averlo venditore e tema cartelle all'interno js / src. Il venditore cartella contiene tutte le librerie di terze parti come i plugin jQuery e il tema la cartella conterrà il codice JavaScript del tuo tema.

Se vuoi anche minimizzarli, puoi includere il gulp-uglify collegare. E aggiorniamo la nostra attività predefinita su:

gulp.task ('default', ['sass', 'js']);

Ottimizza le immagini

Il plugin gulp più comunemente usato per questa attività è gulp-imagemin. Installalo usando:

npm install gulp-imagemin --sav-dev

Aggiungi richiesta gulp-imagemin in cima:

var imagemin = require ('gulp-imagemin');

E aggiungi la seguente attività al file gulp.

gulp.task ('img', function () gulp.src ('img / src / *. png, jpg, gif') .pipe (imagemin (optimizationLevel: 7, progressive: true)) .pipe (gulp.dest ('img')));

Ciò che questo farà sarà una copia ottimizzata di tutte le immagini collocate nel img / src directory nel img elenco.

Aggiungilo all'elenco delle attività predefinite.

gulp.task ('default', ['sass', 'js', 'img']);

Guarda l'attività

Il prossimo è impostare un orologio per automatizzare le attività.

gulp.task ('watch', function () gulp.watch ('css / src / *. scss', ['sass']); gulp.watch ('js / src / *. js', ['js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););

Aggiungendolo all'elenco delle attività predefinite ci dà:

gulp.task ('default', ['sass', 'js', 'img', 'watch']);

Gestione degli errori

Cosa succede se si verifica un errore durante l'esecuzione di uno dei nostri compiti? Il tuo gulpfile smetterà di funzionare.

Per gestirlo, usiamo un bel plugin per gulp chiamato gulp-plumber. Useremo anche gulp-notify per mostrare le belle notifiche di growl life sugli errori.

Installare gulp-idraulico e gulp-notify utilizzando:

npm install gulp-plumber --save-dev npm installa gulp-notify --save-dev

Richiedilo di nuovo nella parte superiore di gulpfile.

var plumber = require ('gulp-plumber'); var notify = require ('gulp-notify');

Ecco una comoda impostazione idraulica che userò quando si verifica un errore in una qualsiasi delle attività.

var plumberErrorHandler = errorHandler: notify.onError (title: 'Gulp', messaggio: 'Errore: <%= error.message %>');

Ora il nostro aggiornamento insolenza il compito sarà simile a:

gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (plumber (plumberErrorHandler)) .pipe (sass ()) .pipe (gulp.dest ( './css')));

Notare il plumberErrorHandler aggiunto. Allo stesso modo aggiungerò questo al js e img compiti.

Ricarica dal vivo

Una cosa importante è la funzionalità live reload.

Prima di tutto installa un'estensione / addon del browser per la ricarica live:

• Estensione Chrome
• Addon di Firefox

Ora è necessario installare gulp-livereload usando:

npm install gulp-liveraload --save-dev

Ancora una volta aggiungilo all'inizio dove è richiesto in gulpfile.

var livereload = require ('gulp-livereload');

Consente di aggiornare le nostre attività per includere la ricarica live ora.

Il insolenza il compito sarà simile a questo:

gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (plumber (plumberErrorHandler)) .pipe (sass ()) .pipe (gulp.dest ( './css')) .pipe (livereload ()););

Allo stesso modo aggiungere livereload al js e img compiti. Un'altra cosa che devi fare è aggiungere livereload.listen (); all'inizio del compito di sorveglianza.

gulp.task ('watch', function () livereload.listen (); gulp.watch ('css / src / *. scss', ['sass']); gulp.watch ('js / src / *. js ', [' js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););

Per testare livereload, creiamo un file index.php con il seguente codice.

      
ciao dallo strumento di automazione di gulp
   

E uno style.css.

/ * Nome del tema: Tutsplus gulp wp automation Tema URI: http://tutsplus.com Descrizione: Automazione del flusso di lavoro per lo sviluppo di wordpress. Autore: Atinder Singh Autore URI: http://tutsplus.com Versione: 1.4.1 Licenza: GNU General Public License v2 o successive URI di licenza: http://www.gnu.org/licenses/gpl-2.0.html * /

Ora attiva questo tema dalla dashboard di WordPress. Hai il tuo ambiente di base impostato e pronto per il rock. Correre sorso nel terminale e visualizzare il tema attivato nel browser. Fai clic sull'estensione live reload in modo che il live reload server sia connesso e ascolta le modifiche.

Ogni volta che si modifica il contenuto di qualsiasi file in css / src o js / src, gulp controllerà e compilerà i file e ricaricherà il tuo browser.

Roba leggermente avanzata

Ora hai uno strumento che può essere utilizzato per creare più temi, quindi spostiamo i file del tema in un'altra cartella in wp-content / themes / wp-gulp-automazione / theme-boilerplate elenco.

Copia il index.php e style.css file e il css, img e js cartelle a theme-boilerplate.

Questo è un tema di base molto essenziale. Puoi estendere questo o usare quello che ti piace.

Per quest'ultima operazione avrai bisogno di tre moduli Node.js. Installa json-file, node-fs e fs-extra.

npm installa json-file --save-dev npm installa node-fs --save-dev npm installa fs-extra --save-dev

Richiedili nella parte superiore del tuo gulpfile.

var fs = require ('node-fs'); var fse = require ('fs-extra'); var json = require ('json-file'); var themeName = json.read ('./ package.json'). get ('themeName'); var themeDir = '... /' + themeName;

Aggiungi questa attività al tuo gulpfile.

gulp.task ('init', function () fs.mkdirSync (themeDir, 765, true); fse.copySync ('theme-boilerplate', themeDir + '/'););

Quello che puoi fare ora è creare un nuovo tema in wp-content / themes utilizzando il codice boilerplate in questo modo, specificando il THEMENAME attributo in package.json.

E correndo:

gulp init

Ora hai due cartelle:

1. wp-gulp-automation (lo strumento per tutti i tuoi temi)
2. myNewTheme (il tema appena creato)

Le possibilità per questo sono infinite.

Puoi usare CoffeeScript invece del normale JavaScript e dire a Gulp di guardarlo anche tu. Puoi aggiungere più attività a seconda del tuo flusso di lavoro. Alcune nuove idee di attività potrebbero essere:

• rimuovendo .DS_Store, .thumb file o qualsiasi file indesiderato automaticamente
• impacchettare il tema in una cartella zip per l'invio su Themeforest

Grazie per aver letto! Se hai qualcosa da aggiungere o hai creato nuove attività che puoi condividere con i lettori, sei il benvenuto.

risorse

• Sito web Gulp
• Gulp GitHub page