web-dev-qa-db-ja.com

Gruntにさまざまなセットアップ用のindex.htmlを生成させる

私はGruntをwebappのビルドツールとして使用しようとしています。

少なくとも2つのセットアップが必要です。

I。開発セットアップ-連結せずに、別々のファイルからスクリプトをロードします。

だから私のindex.htmlは次のようになります：

<!DOCTYPE html>
<html>
    <head>
        <script src="js/module1.js" />
        <script src="js/module2.js" />
        <script src="js/module3.js" />
        ...
    </head>
    <body></body>
</html>

II。実稼働設定-1つのファイルに縮小および連結されたスクリプトを読み込み、

index.htmlに応じて：

<!DOCTYPE html>
<html>
    <head>
        <script src="js/MyApp-all.min.js" />
    </head>
    <body></body>
</html>

問題は、grunt devまたはgrunt prod？を実行するときに、構成に応じてこれらのindex.htmlを無作法にする方法です。

または、間違った方向に掘っていて、常にMyApp-all.min.jsを生成し、その中にすべてのスクリプト（連結）またはそれらのスクリプトを別々のファイルから非同期にロードするローダースクリプトを入れる方が簡単でしょうか？

どうやってやるの？

javascriptbuildbuild-automationgruntjs
207
Dmitry Pashkevich

私は自分の解決策を思いつきました。まだ磨かれていませんが、私はその方向に進むと思います。

本質的に、 grunt.template.process（） を使用して、現在の構成を分析し、元のソースファイルのリストまたは縮小された単一ファイルへのリンクを生成するテンプレートからindex.htmlを生成していますコード。以下の例はjsファイル用ですが、同じアプローチをcssおよび他の可能なテキストファイルに拡張できます。

grunt.js：

/*global module:false*/
module.exports = function(grunt) {
    var   // js files
        jsFiles = [
              'src/module1.js',
              'src/module2.js',
              'src/module3.js',
              'src/awesome.js'
            ];

    // Import custom tasks (see index task below)
    grunt.loadTasks( "build/tasks" );

    // Project configuration.
    grunt.initConfig({
      pkg: '<json:package.json>',
      meta: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
          '<%= grunt.template.today("yyyy-mm-dd") %> */'
      },

      jsFiles: jsFiles,

      // file name for concatenated js
      concatJsFile: '<%= pkg.name %>-all.js',

      // file name for concatenated & minified js
      concatJsMinFile: '<%= pkg.name %>-all.min.js',

      concat: {
        dist: {
            src: ['<banner:meta.banner>'].concat(jsFiles),
            dest: 'dist/<%= concatJsFile %>'
        }
      },
      min: {
        dist: {
        src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
        dest: 'dist/<%= concatJsMinFile %>'
        }
      },
      lint: {
        files: ['grunt.js'].concat(jsFiles)
      },
      // options for index.html builder task
      index: {
        src: 'index.tmpl',  // source template file
        dest: 'index.html'  // destination file (usually index.html)
      }
    });


    // Development setup
    grunt.registerTask('dev', 'Development build', function() {
        // set some global flags that all tasks can access
        grunt.config('isDebug', true);
        grunt.config('isConcat', false);
        grunt.config('isMin', false);

        // run tasks
        grunt.task.run('lint index');
    });

    // Production setup
    grunt.registerTask('prod', 'Production build', function() {
        // set some global flags that all tasks can access
        grunt.config('isDebug', false);
        grunt.config('isConcat', true);
        grunt.config('isMin', true);

        // run tasks
        grunt.task.run('lint concat min index');
    });

    // Default task
    grunt.registerTask('default', 'dev');
};

index.js (the index task)：

module.exports = function( grunt ) {
    grunt.registerTask( "index", "Generate index.html depending on configuration", function() {
        var conf = grunt.config('index'),
            tmpl = grunt.file.read(conf.src);

        grunt.file.write(conf.dest, grunt.template.process(tmpl));

        grunt.log.writeln('Generated \'' + conf.dest + '\' from \'' + conf.src + '\'');
    });
}

最後に、index.tmpl、生成ロジックが組み込まれています：

<doctype html>
<head>
<%
    var jsFiles = grunt.config('jsFiles'),
        isConcat = grunt.config('isConcat');

    if(isConcat) {
        print('<script type="text/javascript" src="' + grunt.config('concat.dist.dest') + '"></script>\n');
    } else {
        for(var i = 0, len = jsFiles.length; i < len; i++) {
            print('<script type="text/javascript" src="' + jsFiles[i] + '"></script>\n');
        }
    }
%>
</head>
<html>
</html>

UPD。Yeoman は、うなりに基づいており、組み込みの semin = Yeomanのビルドシステムと統合するタスク。 index.htmlの開発バージョンおよびその他の環境設定の情報からindex.htmlの製品バージョンを生成します。少し洗練されていますが、興味深いものです。

34
Dmitry Pashkevich

最近、これらのGrunt v0.4.0互換タスクを発見しました。

  • grunt-preprocess

    Npmモジュールの前処理に関するうなり声タスク。

  • grunt-env

    将来のタスクのために環境設定を自動化するためのうなり声タスク。

以下は、私のGruntfile.jsの抜粋です。

ENVセットアップ：

env : {

    options : {

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

    },

    dev: {

        NODE_ENV : 'DEVELOPMENT'

    },

    prod : {

        NODE_ENV : 'PRODUCTION'

    }

},

前処理：

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

        }

    }

}

タスク：

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']);

そして、/src/tmpl/index.htmlテンプレートファイルで（たとえば）：

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

私の設定はほとんどの人とは異なると確信しており、上記の有用性はあなたの状況に依存します。私にとって、それはすばらしいコードですが、Yeoman grunt-usemin は私が個人的に必要とするよりも堅牢です。

注：私はちょうど上記のタスクを今日発見したので、機能が欠落している可能性があります/または、私のプロセスが今後変わる可能性があります。今のところ、 grunt-preprocess および grunt-env というシンプルなand機能が大好きです=提供する必要があります。 :)

2014年1月の更新：

反対票による動機...

私がこの答えを投稿したとき、Grunt 0.4.xには、私のニーズに合ったソリューションを提供する多くのオプションがありませんでした。今、数か月後、私はここに投稿したものよりも良いcouldであるオプションがもっとあると思います。 私は今でも自分のビルドにこのテクニックを個人的に使用し、使用を楽しんでいますが、将来の読者は与えられた他の回答を読んで、すべてのオプションを調査します。 より良い解決策が見つかったら、ここに答えを投稿してください。

2014年2月の更新：

それが誰かに役立つかどうかはわかりませんが、私は GitHubのこのデモリポジトリ を作成しました。このテクニックを使用して、完全な（より複雑なセットアップ）を示しています。上記の概要。

161
mhulse

私はここでの解決策が嫌いです（ 以前に与えたものを含む ）、ここに理由があります：

  • 最高得票数 の問題は、JSファイルを追加/名前変更/削除するときに、スクリプトタグのリストを手動で同期する必要があることです。
  • 受け入れられた答え の問題は、JSファイルのリストにパターンマッチングを含めることができないことです。これは、Gruntfileで手動で更新する必要があることを意味します。

これらの両方の問題を解決する方法を見つけました。ファイルを追加または削除するたびに、スクリプトタグが自動的に生成されてそれを反映するように、うなり声タスクを設定しました。このように、JSファイルを追加/削除/名前変更するときに、htmlファイルやgruntファイルを変更する必要はありません。

それがどのように機能するかを要約すると、スクリプトタグの変数を含むhtmlテンプレートがあります。 https://github.com/alanshaw/grunt-include-replace を使用して、その変数を設定します。開発モードでは、その変数はすべてのJSファイルのグロビングパターンから取得されます。監視タスクは、JSファイルが追加または削除されると、この値を再計算します。

現在、devモードまたはprodモードで異なる結果を取得するには、その変数に異なる値を入力するだけです。コードは次のとおりです。

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は、典型的な単調なファイルグロビングパターンです。 jsScriptTagsはjsSrcFileArrayを取り、それらを両側のscriptタグと連結します。 destPathは、各ファイルに必要なプレフィックスです。

そして、HTMLは次のようになります。

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

</head>

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

これで、構成で確認できるように、scriptモードで実行されるときに、その変数の値をハードコードされたprodタグとして生成します。開発モードでは、この変数は次のような値に展開されます。

<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：これは、すべてのクライアント側のJSアプリでやりたいことのための非常に多くのコードです。誰かがこれを再利用可能なプラグインに変えられることを願っています。たぶん私はいつか。

15
Daniel Kaplan

私はしばらくの間同じ質問をしてきましたが、このうなり声プラグインはあなたが望むことをするように設定できると思います： https://npmjs.org/package/grunt-targethtml 。それは、うなり声のターゲットに依存する条件付きのhtmlタグを実装します。

13
Per Quested Aronsson

私はよりシンプルで簡単なソリューションを探していたので、この質問からの答えを組み合わせました：

gruntfile.jsでブロックする場合の配置方法

そして、次の簡単な手順を思い付きました。

  1. リストしたとおりに2つのバージョンのインデックスファイルを保持し、index-development.htmlおよびindex-prodoction.htmlという名前を付けます。

  2. Index.htmlファイルのGruntfile.jsのconcat/copyブロックで次のロジックを使用します。

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

  3. 'grunt --Release'を実行してindex-production.htmlファイルを選択し、フラグをオフにして開発バージョンにします。

追加または構成する新しいプラグインはなく、新しいうなり声タスクもありません。

8
Edward T

scriptlinker という名前のこの単調なタスクは、devモードでスクリプトを追加する簡単な方法のように見えます。おそらくconcatタスクを最初に実行してから、prodモードで連結ファイルをポイントすることができます。

5
Daniel Kaplan

Grunt-dev-prod-switchというgruntプラグインを見つけました。 gruntに渡す--envオプションに基づいて、特定のブロックをコメントアウトするだけです（ただし、dev、prod、testに制限されます）。

here の説明に従って設定したら、たとえば次のコマンドを実行できます。

grunt serve --env=dev、そしてそれはすべてラップされているブロックをコメントアウトするだけです

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

ラップされているブロックのコメントを外します

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

また、JavaScriptでも機能します。バックエンドAPIに接続するための正しいIPアドレスを設定するために使用します。ブロックは

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

あなたの場合、これは次のように簡単です：

<!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>
5
anonymous

grunt-dom-munger CSSセレクターでHTMLを読み取り、操作します。例HTMLからタグを読み取ります。ノードの削除、ノードの追加など。

Grunt-dom-mungerを使用して、index.htmlによってリンクされているすべてのJSファイルを読み取り、それらをUglifyしてから、再度grunt-dom-mungerを使用してindex.htmlを変更し、縮小されたJSのみをリンクします。

5
brillout

grunt-bakeは、ここで素晴らしい動作をする素晴らしいgruntスクリプトです。 JQM自動ビルドスクリプトで使用します。

https://github.com/imaginethepoet/autojqmphonegap

私のgrunt.coffeeファイルを見てください：

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

これは、base.html内のすべてのファイルを調べ、それらを取り込み、index.htmlを作成し、マルチページアプリ（phonegap）に最適です。これにより、すべての開発者が1つの長い単一ページアプリで作業することがなくなるため、開発が容易になります（多くの競合チェックインが防止されます）。代わりに、ページを分割し、小さなコードチャンクで作業し、監視コマンドを使用してページ全体にコンパイルできます。

Bakeは、base.htmlからテンプレートを読み取り、監視中にコンポーネントhtmlページを挿入します。

<!DOCTYPE html>

jQuery Mobileデモ

app.initialize（）;

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

これをさらに一歩進めて、「メニュー」や「ポップアップ」などのページにインジェクションを追加して、ページをより小さな管理可能なコンポーネントに分割することができます。

4
imaginethepoet

Wireep https://github.com/taptapship/wiredep とusemin https://github.com/yeoman/grunt-usemin を組み合わせて、うなり声を上げるこれらのタスクを処理してください。 Wiredepは依存関係を一度に1つのスクリプトファイルに追加し、useminはそれらをすべて生産用の単一ファイルに連結します。これは、いくつかのhtmlコメントで達成できます。たとえば、bower install && grunt bowerInstallを実行すると、bowerパッケージが自動的に含まれてhtmlに追加されます。

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

processhtml を検討してください。ビルドの複数の「ターゲット」を定義できます。コメントは、条件付きでHTMLの素材を含めるか除外するために使用されます。

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

になる

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

次のような気の利いたことを行うことさえ意図しています（ 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">
2
dat

この答えは初心者向けではありません！

Jadeテンプレートの使用...変数をJadeテンプレートに渡すことは、沼地の標準的なユースケースです

私はgrunt（grunt-contrib-jade）を使用していますが、gruntを使用する必要はありません。標準のnpm jadeモジュールを使用するだけです。

Gruntを使用している場合、gruntfileは次のようになります...

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"
        }
      ]
    }
  },

Jadeテンプレートでgruntによって渡されたデータに簡単にアクセスできるようになりました。

Modernizrで使用されるアプローチと同じように、渡された変数の値に従ってHTMLタグにCSSクラスを設定し、CSSクラスが存在するかどうかに基づいてそこからJavaScriptロジックを使用できます。

これは、クラスが存在するかどうかに基づいてページに要素を含めるためにng-ifを実行できるため、Angularを使用する場合に最適です。

たとえば、クラスが存在する場合、スクリプトを含めることができます...

（たとえば、ライブリロードスクリプトをdevに含めることはできますが、本番には含めません）

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