Gulp Env e Preprocess

In Grunt ho usato un plugin chiamato env. Questo mi permetterebbe di definire un ambiente in build specifica. Ho avuto 3 build. Uno era DEV che usava tutti i file divisi individualmente. PROD concat tutto e RELEASE sarebbe concatenare e ugolare. Sto cercando di fare lo stesso a Gulp. Vedo un preprocessore per Gulp ma nulla per definire l'ambiente.Gulp Env e Preprocess

La domanda è. Cosa posso fare? Ovviamente non voglio definire tutti i file JS tutto il tempo, e non voglio 3 diverse pagine HTML con tag di script diversi.

Nel mio HTML avrei qualcosa di simile:

<!-- @if NODE_ENV == 'DEVELOPMENT' --> 
<script src="js/example1.js" type="text/javascript"></script> 
<script src="js/example2.js" type="text/javascript"></script> 
<script src="js/example3.js" type="text/javascript"></script> 
<!-- @endif --> 

<!-- @if NODE_ENV == 'PRODUCTION' --> 
<script src="js/project.js" type="text/javascript"></script> 
<!-- @endif --> 

<!-- @if NODE_ENV == 'RELEASE' --> 
<script src="js/project.min.js" type="text/javascript"></script> 
<!-- @endif -->

E i miei plugin grugnito sarebbe simile a questa:

env: { 
    dev: { 
     NODE_ENV: 'DEVELOPMENT' 
    }, 
    prod: { 
     NODE_ENV: 'PRODUCTION' 
    }, 
    release: { 
     NODE_ENV: 'RELEASE' 
    } 
}, 
preprocess: { 
    options: { 
     context: { 
      name: '<%= pkg.outputName %>', 
      version: '<%= pkg.version %>', 
      port: '<%= pkg.port %>' 
     } 
    }, 
    dev: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    }, 
    prod: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    }, 
    release: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    } 
},

fonte

2014-04-16 Chester Rivas

Ecco come ho realizzato quello che penso che si desidera. Ho impostato una cartella che contiene pagine html da sottoporre a pre-elaborazione.

All'interno di tale cartella sono presenti cartelle corrispondenti a ciascuna pagina in cui sono archiviati frammenti html e un file json.

Ogni file JSON ha variabili che definiscono le risorse della pagina per una pagina specifica.

Ad esempio, supponiamo che la mia pagina sia index.html. Sembra qualcosa di simile:

<html> 
    <head> 
     ... Meta stuff title etc ... 
     <!-- @ifdef pagecss1 --> 
     <link href="<!-- @echo pagecss1 -->" rel="stylesheet"> 
     <!-- @endif --> 
     <!-- @ifdef pagecss2 --> 
     <link href="<!-- @echo pagecss2 -->" rel="stylesheet"> 
     <!-- @endif --> 
    </head> 
     /// so on - same stuff with scripts at bottom

Nel mio file JSON per quella pagina ho neanche avere pagecss1 definire o meno.

Quindi uso gulp.watch.

Non voglio scrivere tutto, ma il risultato è che ogni volta che uno dei file nelle sottocartelle cambia una funzione intercetta la variabile di contesto globale già esistente e legge il file JSON per quella pagina. Quindi uso node.util._extend per sovrascrivere le variabili con variabili specifiche della pagina. Passo quindi l'oggetto modificato all'attività del preprocessore come contesto. È tutto alleggerito velocemente e restituisce una richiamata che livereload conosce quale pagina ricaricare.

Ho scritto questo sul cellulare, quindi potrei tornare a modificare per chiarezza, ma risolvere questo indovinello mi ha risparmiato un incredibile quantità di tempo e fatica.

fonte

2014-06-06 18:41:43 user1167442

Grazie al plugin gulp-dati, questo è stato semplificato notevolmente. – user1167442

Probabilmente si dovrebbe usare gulp-pre-elaborazione e fare cose come questo in sorso

var preprocess = require('gulp-preprocess'); 
.pipe(preprocess({context: { NODE_ENV: 'PRODUCTION', RELEASE_TAG: '2.6.4', DEBUG: false}}))

con roba come questo nel tuo html

<!-- @if NODE_ENV='DEVELOPMENT' --> 
    <a href="test?v<!-- @echo RELEASE_TAG -->" /> 
<!-- @endif -->

fonte

2014-11-07 17:33:44

Gulp Env e Preprocess

risposta

Problemi correlati