Gulp Env and Preprocess

W Grnt użyłem wtyczki o nazwie env. To pozwoliłoby mi zdefiniować środowisko w konkretnej kompilacji. Miałem 3 kompilacje. Jednym z nich był DEV, który wykorzystywał wszystkie pliki podzielone pojedynczo. PROD zgodzi się na wszystko, a RELEASE będzie konkatować i ugodzić. Szukam tego samego w Gulp. Widzę preprocesor dla Gulpa, ale nic, co mogłoby zdefiniować środowisko.Gulp Env and Preprocess

Pytanie jest. Co mogę zrobić? Oczywiście nie chcę przez cały czas definiować wszystkich plików JS i nie chcę 3 różnych stron HTML z różnymi znacznikami skryptów.

W moim HTML Chciałbym mieć coś takiego:

<!-- @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 -->

i moich wtyczek Grunt będzie wyglądać następująco:

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' 
    } 
},

Źródło

2014-04-16 Chester Rivas

Oto jak osiągnąć to, co myślę, że chcesz. Mam skonfigurowany folder, który zawiera strony html do przetworzenia.

W tym folderze znajdują się foldery odpowiadające każdej stronie, na której przechowuję fragmenty html i plik json.

Każdy plik JSON zawiera zmienne definiujące zasoby strony dla określonej strony.

Załóżmy na przykład, że moja strona to index.html. Wygląda to mniej więcej tak:

<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

W moim pliku JSON dla tej strony ja albo mają pagecss1 określenia, czy nie.

Następnie używam gulp.watch.

Nie chcę napisać wszystkiego, ale efekt jest taki, że za każdym razem, gdy któryś z plików w podfolderach zmieni się, funkcja przechwytuje istniejącą globalną zmienną kontekstową i odczytuje plik JSON dla tej strony. Następnie używam node.util._extend, aby nadpisać zmienne za pomocą zmiennych specyficznych dla strony. Następnie przekazuję zmieniony obiekt do zadania preprocesora jako kontekstu. Wszystko szybko się rozjaśnia i zwraca wywołanie zwrotne, które powoduje, że liveloadload wie, którą stronę załadować ponownie.

Napisałem to na telefon komórkowy, więc mogę wrócić do edycji dla jasności, ale rozwiązanie tej zagadki zaoszczędziło mi niesamowitą ilość czasu i wysiłku.

Źródło

2014-06-06 18:41:43 user1167442

Dzięki wtyczce łyk-data ta została uproszczona bardzo. – user1167442

Powinieneś raczej użyć haustem-Preprocesuj i robić takie rzeczy w haustem

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

z rzeczy, jak to w html

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

Źródło

2014-11-07 17:33:44

Odpowiedz

Powiązane problemy