BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】Gruntに異なるセットアップのindex.htmlを生成させる

2022-04-10 01:03:53

質問

WebアプリのビルドツールとしてGruntを使おうとしています。

少なくとも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. 生産設定 - minified & された私のスクリプトを1つのファイルにまとめてロードします。

を、index.htmlに適宜追加してください。 

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

という質問があります。 を実行したときに、gruntが設定に応じてこれらのindex.htmlを作成するようにするにはどうすればよいでしょうか？ grunt dev または grunt prod ?

あるいは、私が間違った方向に掘っているのかもしれません。 MyApp-all.min.js が、その中に私のすべてのスクリプト（連結したもの）か、それらのスクリプトを別々のファイルから非同期に読み込むローダースクリプトを入れるのでしょうか？

みんな、どうしてる？

どのように解決するのですか？

私なりの解決策を考えてみました。まだ洗練されてはいませんが、その方向で進めていこうと思います。

要するに、私は 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です。 が判明しました。 ヨーマン は、gruntをベースにしているため、ビルトインの ユーザミン タスクはYeomanのビルドシステムと統合されています。開発版のindex.htmlやその他の環境設定から、製品版のindex.htmlを生成します。少し高度ですが、見ていて面白いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します