web-dev-qa-db-ja.com

宛先出力ファイルにバージョン番号を動的に追加します。

私はpackage.json次のようなバージョン番号のファイル：

{
    name: "myproject"
    version: "2.0"
}

私の目標は、package.jsonファイルのバージョン番号を出力ファイルに動的に追加することです。たとえば、javascriptでは、バージョン番号を手動で更新したくありませんが、各ビルドの後に次のようなものを生成したいと思います。

/* My Project, v2.0 */
window.myProject = {
    version: "2.0"
};

Gruntfile.js構成でこれを行う簡単な方法はありますか？

javascriptnode.jsgruntjs
29
adam

実装しました： https://github.com/erickrdch/grunt-string-replace

ソースのcss/jsファイルでは、{{ VERSION }}ファイルに設定されているバージョン番号に置き換えられるpackage.jsonというテキストを使用しています。以下は、Gruntfile.jsに追加した構成です。

'string-replace': {
  version: {
    files: {
      // the files I did string replacement on
    },
    options: {
      replacements: [{
        pattern: /{{ VERSION }}/g,
        replacement: '<%= pkg.version %>'
      }]
    }
  }
},
pkg: grunt.file.readJSON('package.json'),
50
adam

あなたがしたいのは、ブラウザが持っているキャッシュファイルをページが使用できないようにするための何らかのトリックを置くことであり、今ではそのクロスブラウザのための唯一の方法はhref urlに何かを置くことだと思います「app.v2_2.js」や「app.js？ver = 22」など。だから私はこのうっとりするようなnpmパッケージを使用します：

https://www.npmjs.org/package/grunt-cache-breaker

デフォルトでは、javascriptにパラメーターを追加するだけで、ほとんどの場合、キャッシュを使用しないために必要なものですが、他のうっとうしいプロセスでファイルの名前を変更しても設定できます。これは、HTMLヘッダーを必要なものに変更するだけです。

Grunt-cache-breakerをインストールしたら、これをGruntFileに追加します。

// Append a timestamp to 'app.js', 'controllers.min.js' which are both located in 'index.html'
// resulting in the index the call of : href="~/app.js?rel=1415124174159"...
        cachebreaker: {
            dev: {
                options: {
                    match: ['app.js', 'styles.css']
                },
                files: {
                    src: ['dist/index.html']
                }
            }
        },

次に、モジュールをロードする場所：

grunt.loadNpmTasks('grunt-cache-breaker');

目的のタスクを追加します。

grunt.registerTask('deploy', [
        'clean:app',
        'copy:views',
        'copy:imgs',
        'copy:css',
        'uglify:app',
        'cssmin:app',
        'cachebreaker:dev'
    ]);

そして最後にコンソール/コマンドプロンプトでうなり声アクションを実行します

> grunt deploy
11
Luis Gonzalez

これは https://github.com/gruntjs/grunt-contrib-uglify のバナーオプションを使用して行うこともできます。これは、javascriptファイルの最小化も考慮します。

2
Andreas

grunt-contrib-concat でバナー機能を使用することをお勧めします

2
robertjd

filerevは現在、このオプションを提供しています。プロセスを使用して、ファイルの内容のmd5ハッシュで接尾辞が付けられるファイル名を操作します。これを使用して、必要なすべてのファイルにバージョンを挿入できます。

参照： https://github.com/yeoman/grunt-filerev

0
Mahesh M