Niech Grunt wygeneruje indeks.html dla różnych konfiguracji

Niedawno odkryłem te zadania zgodne z Grunt v0.4.0:

• Grunt-preprocess

  Gruntowanie zadania wokół modułu preprocess npm.

• Grunt-env

  Grunt zadanie zautomatyzować konfigurację środowiska dla przyszłych zadań.

Poniżej fragmenty z mojego Gruntfile.js.

ENV setup:

env : {

    options : {

        /* Shared Options Hash */
        //globalOption : 'foo'

    },

    dev: {

        NODE_ENV : 'DEVELOPMENT'

    },

    prod : {

        NODE_ENV : 'PRODUCTION'

    }

},

Preprocess:

preprocess : {

    dev : {

        src : './src/tmpl/index.html',
        dest : './dev/index.html'

    },

    prod : {

        src : './src/tmpl/index.html',
        dest : '../<%= pkg.version %>/<%= now %>/<%= ver %>/index.html',
        options : {

            context : {
                name : '<%= pkg.name %>',
                version : '<%= pkg.version %>',
                now : '<%= now %>',
                ver : '<%= ver %>'
            }

        }

    }

}

Zadania:

grunt.registerTask('default', ['jshint']);

grunt.registerTask('dev', ['jshint', 'env:dev', 'clean:dev', 'preprocess:dev']);

grunt.registerTask('prod', ['jshint', 'env:prod', 'clean:prod', 'uglify:prod', 'cssmin:prod', 'copy:prod', 'preprocess:prod']);

I w /src/tmpl/index.html plik szablonu (na przykład):

<!-- @if NODE_ENV == 'DEVELOPMENT' -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="../src/js/foo1.js"></script>
    <script src="../src/js/foo2.js"></script>
    <script src="../src/js/jquery.blah.js"></script>
    <script src="../src/js/jquery.billy.js"></script>
    <script src="../src/js/jquery.jenkins.js"></script>

<!-- @endif -->

<!-- @if NODE_ENV == 'PRODUCTION' -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="http://cdn.foo.com/<!-- @echo name -->/<!-- @echo version -->/<!-- @echo now -->/<!-- @echo ver -->/js/<!-- @echo name -->.min.js"></script>

<!-- @endif -->

Jestem pewien, że moja konfiguracja jest inna niż większość ludzi, a przydatność powyższego zależy od twojej sytuacji. Dla mnie, chociaż jest to niesamowity kawałek kodu, Yeoman grunt-usemin jest bardziej wytrzymały, niż osobiście potrzebuję.

Uwaga: ja właśnie odkryłem dzisiaj wyżej wymienione zadania, więc może mi zabraknąć funkcji i / lub mój proces może ulec zmianie w dół drogi. Na razie uwielbiam prostotę i funkcje, które mają do zaoferowaniagrunt-preprocess igrunt-env . :)

Kiedy opublikowałem tę odpowiedź, nie było wielu opcji Grunt 0.4.x, które oferowały rozwiązanie, które działało na moje potrzeby. Teraz, miesiące później, domyślam się, że jest więcej opcji, które mogłyby być lepsze niż to, co zamieściłem tutaj. podczas gdy ja jeszcze osobiście używam i lubię używać, ta technika dla moich budów , proszę, aby przyszli czytelnicy poświęcili czas na przeczytanie innych udzielonych odpowiedzi i zbadanie wszystkich opcji. jeśli znajdziesz lepsze rozwiązanie, napisz swoją odpowiedź tutaj.

Nie jestem pewien, czy będzie to komuś pomocne, ale stworzyłem to repozytorium demo na Githubie , które pokazuje kompletną (i bardziej złożoną konfigurację) przy użyciu techniki opisanej powyżej.

Nie podoba mi się tutaj rozwiązanie (w tym to, które wcześniej podałem ) i oto dlaczego:

• problem z najwyższą głosowaną odpowiedzią polega na tym, że musisz ręcznie zsynchronizować listę tagów skryptu po dodaniu/zmianie nazwy/usunięciu pliku JS.
• problem z akceptowaną odpowiedzią jest to, że lista plików JS nie może mieć dopasowania wzorca. Oznacza to, że musisz zaktualizować go ręcznie w pliku Gruntfile.

Rozgryzłem jak aby rozwiązać oba te problemy. Skonfigurowałem moje zadanie grunt tak, że za każdym razem, gdy plik jest dodawany lub usuwany, znaczniki skryptu są automatycznie generowane, aby to odzwierciedlić. W ten sposób nie musisz modyfikować pliku html ani pliku grunt, gdy dodajesz/usuwasz / zmieniasz nazwy plików JS.

Podsumowując, jak to działa, Mam szablon html ze zmienną dla znaczników skryptu. Używam https://github.com/alanshaw/grunt-include-replace aby wypełnić tę zmienną. W dev mode, ta zmienna pochodzi ze wzoru globbingu wszystkich moich plików JS. Zadanie watch ponownie oblicza tę wartość po dodaniu lub usunięciu pliku JS.

Teraz, Aby uzyskać różne wyniki w trybie dev lub prod, wystarczy wypełnić tę zmienną inną wartością. Oto jakiś kod:

var jsSrcFileArray = [
    'src/main/scripts/app/js/Constants.js',
    'src/main/scripts/app/js/Random.js',
    'src/main/scripts/app/js/Vector.js',
    'src/main/scripts/app/js/scripts.js',
    'src/main/scripts/app/js/StatsData.js',
    'src/main/scripts/app/js/Dialog.js',
    'src/main/scripts/app/**/*.js',
    '!src/main/scripts/app/js/AuditingReport.js'
];

var jsScriptTags = function (srcPattern, destPath) {
    if (srcPattern === undefined) {
        throw new Error("srcPattern undefined");
    }
    if (destPath === undefined) {
        throw new Error("destPath undefined");
    }
    return grunt.util._.reduce(
        grunt.file.expandMapping(srcPattern, destPath, {
            filter: 'isFile',
            flatten: true,
            expand: true,
            cwd: '.'
        }),
        function (sum, file) {
            return sum + '\n<script src="' + file.dest + '" type="text/javascript"></script>';
        },
        ''
    );
};

...

grunt.initConfig({

    includereplace: {
        dev: {
            options: {
                globals: {
                    scriptsTags: '<%= jsScriptTags(jsSrcFileArray, "../../main/scripts/app/js")%>'
                }
            },
            src: [
                'src/**/html-template.html'
            ],
            dest: 'src/main/generated/',
            flatten: true,
            cwd: '.',
            expand: true
        },
        prod: {
            options: {
                globals: {
                    scriptsTags: '<script src="app.min.js" type="text/javascript"></script>'
                }
            },
            src: [
                'src/**/html-template.html'
            ],
            dest: 'src/main/generatedprod/',
            flatten: true,
            cwd: '.',
            expand: true
        }

...

    jsScriptTags: jsScriptTags

jsSrcFileArray to typowy wzór zgniatania plików. jsScriptTags pobiera jsSrcFileArray i łączy je razem ze znacznikami script po obu stronach. {[7] } to prefiks, który chcę umieścić w każdym pliku.

A oto jak wygląda HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Example</title>

</head>

<body>    
@@scriptsTags
</body>
</html>

Teraz, Jak widać w konfiguracji, generuję wartość tej zmiennej jako mocno zakodowany znacznik script, gdy jest uruchamiany w trybie prod. W trybie dev ta zmienna rozwinie się do takiej wartości:

<script src="../../main/scripts/app/js/Constants.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Random.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Vector.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/StatsData.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Dialog.js" type="text/javascript"></script>

PS: To jest szalona ilość kodu na coś, co chciałbym zrobić w każdej aplikacji js po stronie klienta. Mam nadzieję, że ktoś może przekształcić to w wtyczkę wielokrotnego użytku. Może tak zrobię. pewnego dnia.

Od jakiegoś czasu zadaję sobie to samo pytanie i myślę, że ten plugin grunt można skonfigurować tak, aby robił to, co chcesz: https://npmjs.org/package/grunt-targethtml . implementuje warunkowe znaczniki html, które zależą od celu grunt.

Szukałem prostszego, prostszego rozwiązania więc połączyłem odpowiedź z tego pytania:

Jak umieścić blok if else w pliku gruntfile.js

I wymyślił następujące proste kroki:

1. Zachowaj dwie wersje swoich plików indeksowych zgodnie z listą i nazwij je rozwijaniem indeksów.html i indeks-prodokcja.html.

2. Użyj poniższej logiki w swoim pliku Gruntfile.js ' s Concat / copy block dla Twojego indeksu.html plik:

   concat: {
       index: {
           src : [ (function() {
               if (grunt.option('Release')) {
                 return 'views/index-production.html';
               } else {
                 return 'views/index-development.html';
               }
             }()) ],
          dest: '<%= distdir %>/index.html',
          ...
       },
       ...
   },
   

3. Uruchom 'grunt --Release', aby wybrać indeks-produkcji.plik html i zostawić flagę, aby mieć wersję deweloperską.

Brak nowych wtyczek do dodania lub konfiguracji i żadnych nowych zadań grunt.

To zadanie o nazwie scriptlinker wygląda na łatwy sposób dodawania skryptów w trybie dev. Prawdopodobnie możesz najpierw uruchomić zadanie concat, a następnie skierować je do skonkatenowanego pliku w trybie prod.

Grunt-dom-munger czyta i manipuluje HTML za pomocą selektorów CSS. Ex. Czytaj tagi z twojego html. Usuń węzły, dodaj węzły i nie tylko.

Możesz użyć grunt-dom-munger, aby odczytać wszystkie pliki JS, które są połączone przez twój indeks.html, uglify them and then use grunt-dom-munger again to modify your index.html do linkowania tylko minifikowanego JS

Znalazłem wtyczkę grunt o nazwie grunt-dev-prod-switch. Wszystko, co robi, to komentowanie pewnych bloków, których szuka na podstawie opcji --env, którą przekazujesz gruntowi(chociaż ogranicza cię to do dev, prod I test).

Po skonfigurowaniu go tak, jak wyjaśnia tutaj, możesz uruchomić na przykład:

grunt serve --env=dev, i wszystko, co robi, to komentowanie bloków, które są owinięte przez

    <!-- env:test/prod -->
    your code here
    <!-- env:test/prod:end -->

I odkomentuje bloki, które są owinięte przez

    <!-- env:dev -->
    your code here
    <!-- env:dev:end -->

Działa również na javascript, używam służy do konfigurowania odpowiedniego adresu IP, z którym można się połączyć dla mojego API zaplecza. Bloki zmieniają się na

    /* env:dev */
    your code here
    /* env:dev:end */

W Twoim przypadku byłoby to tak proste:

<!DOCTYPE html>
<html>
    <head>
        <!-- env:dev -->
        <script src="js/module1.js" />
        <script src="js/module2.js" />
        <script src="js/module3.js" />
        ...
        <!-- env:dev:end -->
        <!-- env:prod -->
        <script src="js/MyApp-all.min.js" />
        ...
        <!-- env:prod:end -->
    </head>
    <body></body>
</html>

Grunt-bake to fantastyczny skrypt grunt, który byłby świetny tutaj. Używam go w moim skrypcie jqm auto build.

Https://github.com/imaginethepoet/autojqmphonegap

bake:
    resources: 
      files: "index.html":"resources/custom/components/base.html"

Piec odczytuje szablon z bazy.html i wstrzykuje strony HTML komponentu na zegarku.

<!DOCTYPE html>

JQuery Mobile Demo

App.initialize();

<body>
    <!--(bake /resources/custom/components/page1.html)-->
    <!--(bake /resources/custom/components/page2.html)-->
    <!--(bake /resources/custom/components/page3.html)-->
</body>

Możesz pójść o krok dalej i dodać zastrzyki na swoich stronach dla "menu ""wyskakujące okienka" itp., dzięki czemu można naprawdę podzielić strony na mniejsze, łatwe do zarządzania komponenty.

Użyj kombinacji wiredep https://github.com/taptapship/wiredep i usemin https://github.com/yeoman/grunt-usemin aby grunt zajął się tymi zadaniami. Wiredep doda zależności jeden plik skryptu na raz, a usemin połączy je wszystkie w jeden plik do produkcji. Można to osiągnąć za pomocą tylko kilku komentarzy html. Na przykład, moje Pakiety bower są automatycznie dołączane i dodawane do html, gdy uruchamiam bower install && grunt bowerInstall:

<!-- build:js /scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->

Rozważmy proceshtml . Pozwala na zdefiniowanie wielu "celów" dla buildów. Komentarze są używane do warunkowego włączenia lub wykluczenia materiału z HTML:

<!-- build:js:production js/app.js -->
...
<!-- /build -->

Staje się

<script src="js/app.js"></script>

To nawet pretenduje do robienia takich fajnych rzeczy (patrz README):

<!-- build:[class]:dist production -->
<html class="debug_mode">
<!-- /build -->

<!-- class is changed to 'production' only when the 'dist' build is executed -->
<html class="production">

Ta odpowiedź nie jest dla noobów!

Użyj Nefrytowego szablonu ... przekazywanie zmiennych do szablonu Jade jest standardowym przypadkiem użycia bog

Używam grunt (grunt-contrib-jade), ale nie musisz używać grunt. Wystarczy użyć standardowego modułu npm jade.

Jeśli używasz grunt to Twój gruntfile chciałby coś takiego ...

jade: {
    options: {
      // TODO - Define options here
    },
    dev: {
      options: {
        data: {
          pageTitle: '<%= grunt.file.name %>',
          homePage: '/app',
          liveReloadServer: liveReloadServer,
          cssGruntClassesForHtmlHead: 'grunt-' + '<%= grunt.task.current.target %>'
        },
        pretty: true
      },
      files: [
        {
          expand: true,
          cwd: "src/app",
          src: ["index.jade", "404.jade"],
          dest: "lib/app",
          ext: ".html"
        },
        {
          expand: true,
          flatten: true,
          cwd: "src/app",
          src: ["directives/partials/*.jade"],
          dest: "lib/app/directives/partials",
          ext: ".html"
        }
      ]
    }
  },

Możemy teraz łatwo uzyskać dostęp do danych przekazanych przez Grunta w szablonie Jade.

Podobnie jak podejście stosowane przez Modernizr, ustawiłem klasę CSS na znacznik HTML zgodnie z wartością zmiennej przekazanej i może używać logiki JavaScript stamtąd na podstawie tego, czy klasa CSS jest obecna, czy nie.

Jest to świetne, jeśli używasz Angular, ponieważ możesz zrobić ng-if, aby uwzględnić elementy na stronie w oparciu o to, czy klasa jest obecna.

Na przykład, mogę dołączyć skrypt, jeśli klasa jest obecna ...

(na przykład, mogę włączyć live reload script w dev, ale nie w produkcji)

<script ng-if="controller.isClassPresent()" src="//localhost:35729/livereload.js"></script>